Serve a single vue component file

light-weight framework, with vue front-end and rest api

Only for learning or teaching!

Usage

read and compile main.vue from frontend/main.vue

let main = new Svc('main')

Simplest example

var { Svc,
      app } = require('singlevue'),
      page  = new Svc();

app.get('/', (req, res) => {
    res.send( page.vue({}) ); //frontend/index.vue
});

app.listen(3000);

More example

index.js:

var { Svc,
      app } = require('singlevue'),
      page  = new Svc();

var counter=1;

app.get('/', (req, res) => {
    res.send( page.vue({ data: counter++ }) );
});

app.get(/c/i, (req, res) => {
    res.send( req.param );
});

app.post('/', (req, res) => {
    console.log(req.body);
    res.sendJSON( { x: Number(req.body.x)+1 } );
});

app.listen(3000);

frontend/index.vue:

<template>
    <div>
        <input v-model="x" @keyup.enter="f()">
        <hr>
        Data from server: {{ template.data }}
    </div>
</template>

<script>
export default {
    data: {
        x: 0
    },
    mounted() {
        this.x=this.template.data;
    },
    methods: {
        f() {
            axios
                .post('/',{ x: this.x })
                .then( resp=>this.template.data=resp.data.x );
        }
    }
};
</script>

Example project (tic-tac-toe with sse):

Example GitHub repo