servue

Rendering engine for turning vue files into html

Helping you serve vue with servue

servue

Installation

$ npm install --save servue

Usage

Creating your Vue file

resources/home.vue

<template>
    <div id="app">
        {{ msg }}
    </div>
</template>
<script>
export default {
    data(){
        return {
            msg: "Hello World"
        }
    }
}
</script>

Express Usage

index.js

const Servue = require("servue")
const express = require("express")

const app = express()
var servue = new Servue(__dirname)

app.get('/', async (req, res) => {
    res.send(await servue.render('home.vue'))
})

app.listen(2000, () => console.log("listening to port 2000!"))

Koa Usage

index.js

const Servue = require("servue")
const Koa = require("koa")

var app = new Koa()
var servue = new Servue(__dirname)

app.use(async (ctx) => {
    ctx.body = await servue.render('home.vue')
})

http.createServer(app.handle()).listen(80)

Setting custom path variables

You may use your own custom paths for folders

//Sets views folder path
servue.resources = path.resolve(__dirname, "resources")

//path of node_modules
servue.nodemodules = path.resolve(__dirname, 'node_modules')

Using a custom loader

Here we add support for the stylus language so it can be usedi n vue files

servue.webpackCommon.module.rules.push({
    test: /\.styl(us)?$/,
    use: [
        'vue-style-loader',
        'css-loader',
        'stylus-loader'
    ]
})

<template>
    <div class="red">
        This will be red
    </div>
</template>
<style lang="red">
    .red{
        color: red;
    }
</style>

Layouts & Head Management

In your top-most layout level, import headify, and it will collect all head data and merge it into your <head>

parent-layout.vue

<template>
    <div id="app">
        <slot></slot>
    </div>
</template>
<script>
//import servue-provided head management system (headify)
import headify from "headify";

export default {
    mixins: [
        headify
    ],
    head: function(object){ //object is inherited from child view (home.vue)
        return {
            meta: `
                <script src="https://unpkg.com/vue/dist/vue.js"><\/script>
                ${object.meta ? object.meta : ""}
            `,
            title: `
                <title>${object.title ? object.title + ' - My Website': 'My Website'}</title>
            `,
            lala: `<meta name="test">`
        }
    }
}
</script>

home.vue

<template>
    <parent>
        Hello
    </parent>
</template>
<script>
import parent from "layouts/parent-layout.vue"\

export default {
    head: function (object){
        return {
            title: "Home" //when set: 'Home - My Website', when unset: 'My Website' - See parent-layout.vue
            //optional, add meta tags if needed
        }
    },
    components: {
        parent //layouts can be multiple layers deep
    }
}
</script>

codebender828/servue