JSPM – @doweb/vuexpress@1.0.9

Package Exports

@doweb/vuexpress

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@doweb/vuexpress) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vuexpress - Vue + express.js

Introduction

VueXpress is a template engine for express.js. You can easily rendering *.vue templates on the server. Check out the usage information.

Install

$ npm i @doweb/vuexpress --save

You need to install the peer dependencies as well

$ npm i vue vuex vue-loader css-loader vue-template-compiler node-sass sass-loader extract-text-webpack-plugin webpack babel-core babel-loader babel-plugin-transform-object-rest-spread babel-preset-env --save

Usage

File: example.js

const vueRenderer = require('@doweb/vuexpress').vueRenderer;
const express = require('express');
const app = express();

let options = {
    // folder with your views
    views: './views',
    // precompile the template
    preCompile: ['example.vue'],
    // pre compile all templates in the view folder
    preCompileAll: true,
    // cache templates
    cache: true,
    // meta info - check out https://github.com/ktquez/vue-head for more information
    metaInfo: {
      title: 'Default Title'
    },
    // extract css to file, otherwise it will be inline
    extractCSS: true,
    // css output folder, extracted styles from your *.vue files
    cssOutputPath: 'css/style.css',
    // path to your web root
    publicPath: './public',
    // global vars, access directly like window.
    globals: {
        example: 'world!'
    },
    plugins: [
        // vue plugins
        // require('your-plugin')
    ],
    compilerConfig: {
        // custom webpack config
    },
    onError: (err) => {}, // error handler
    onReady: () => {} // ready event handler, when completed the work of initialization
};

const renderer = vueRenderer(options);
app.use(renderer);

app.get('/', function(req, res) {
    res.render('example', { myVar1: 'my variable one' });
});

app.get('/plain', function(req, res) {
    // render template without html head and body
    res.render('example', { myVar1: 'my variable one' }, { plain: true, includeCSS: false });
});

File: example.vue

For head configuration check out vue-head

<template>
    <div id="app">
       {{myVar}} {{myVar2}}
    </div>
</template>

<script>
    import axios from 'axios';

    export default {
        name: 'Example',
        data() {
            return {
                myVar: 'Hello',
                myVar2: '',
                asyncExample: ''
            };
        },
        metaInfo: {
            title: 'Default Title',
            titleTemplate: '%s | My Awesome Website',
            meta: [
                { charset: 'utf-8' },
                { name: 'viewport', content: 'width=device-width, initial-scale=1' }
            ]
        },
        created() {
            this.myVar2 = example;
        },
        methods: {},
        computed: {},
        components: {}
    }
</script>

<style lang="scss">
    body {
        #app {
            font-size: 16px;
            font-weight: bold;
        }
    }
</style>

Changelog

See CHANGELOG.md

License

MIT