README.md

express-vue

A Simple way of using Server Side rendered Vue.js 2.0+ natively in Express using streams

If you want to use vue.js and setup a large scale web application that is server side rendered, using Node+Express, but you want to use all the fantastic tools given to you by Vue.js. Then this is the library for you.

The idea is simple use Node+Express for your Controller and Models, and Vue.js for your Views.. you can have a secure server side rendered website without all the hassle. Your Controller will pass in the data to your View through res.renderVue('view', {data}, [{vueOptions}]).

Example / Starter

Usage

This is the minimum required setup.
If you don't provide a vueVersion it will use the latest one when the project was published.
If there is no rootPath it will assume the root is the parent directory of node_modules.

To use Data binding into the vue files you need to pass data in through the data object as above.
express-vue will automatically add anything you put here to the root element of your Vue components.
You do not need to have anything in data in your .vue file, but if you did what you put in res.render
will overwrite it.

In the future we will have other options like you passing in the location of the vueVersion you want to use.. and other things

Components / Mixins / Etc

When including components/mixins/etc the directory it looks is going to be relative to the file you're working in currently.
assuming the below is running in a folder with a subdirectory components and a directory mixins in a parent, it would look like this.
when importing .vue files and .js files from node modules you can just import them the normal way you import a module.

CSS inside components/views

Please use regular CSS for now, SCSS/LESS/etc are compiled languages, and this is a runtime library for now.
In the future I will be creating build tools to handle compiling the .vue files into .js files so that it runs faster,
and more efficient at runtime. But for dev mode, it will compile everything at runtime, so you can edit and preview faster.

<style>.test {border: 2px; }.testa {color: #FFF; }</style>

Mixins

You can now use Mixins, lets say you have an file called exampleMixin.js and it looks like this:

Meta

This library takes the wonderful inspiration from vue-head and adapts it to
work here. Just add a meta array into your head object, with support for both content and property types.
(Note we don't support shorthand here, and no support for google+ just yet, that will come soon).

DevTools

To use the amazing Vue.js DevTools please set the environment variable VUE_DEV=truethis will also trigger the development version of vue to be included in the head.

Caching

Caching is now enabled by default, in dev mode hopefuly you're using something like nodemon/gulp/grunt etc, which restarts the server on file change.. otherwise you will need to stop and restart the server if you change your files.. which is normal.

Finally

Finally you'll need to set the version of VueJS you want to use in the options like so

constvueOptions= {
vueVersion:"2.4.2"
};

Vue versions will switch between min and regular copies of vue based on VUE_DEV=true value. (Dev uses the non minified.)

Typescript support

Typescript declarations are published on NPM, so you don’t need external tools like Typings, as declarations are automatically imported with express-vue. That means all you need is a simple:

import expressVue = require('express-vue');

Sailsjs Support

This is middleware now so support for sails should just work as middleware.

V5 Migration

Ditched the custom parser/renderer and moved to using vue-pronto which uses Vueify

Re-structured the vueOptions

Added req.vueOptions as a global.

Removed the vue parent object with the child of head, this was un-needed its now just vueOptions.head instead of vueOptions.vue.head

Express-vue-renderer got too heavy, the architecture became too messy, and it was slow. It needed to get thrown out. Enter vue-pronto it uses vueify under the hood, and is much more modular. this will be much easier going forward to maintain.

Changes to the Vue Options Object

There's been some big changes to this object, so before it would look like this

V4

v4 was a complete re-write.. migrating from v3 to v4 will break everything.

No longer is res.render used, its now res.renderVue

Now replies with streams instead of a single sync call

massive performance increase

import vue components in your vue files!

lots of other changes

V3

v3 has seriously changed the object you pass into the vue file.. so please if migrating from
an earlier version (and you should). Take the time to look at the new object. Sorry for the breaking change, but I'm only one person.