Thanks to @d0cm0d for the fantastic first PR

It's like res.renderVue

but instead of super cool streams.... it returns a string.

It's blocking, and it's slower... but if you need a string instead of a stream.. here you go!

Express-Vue now pre-caches all vue files on startup.

This will massively help initial request times.

• [email protected]
• moved to better js to string method https://github.com/danmademe/js-to-string

You now no longer need to put in any config into express-vue's init method, it's now as simple as this.

const expressVue = require("express-vue");
const express = require("express");
const app = express();

const expressVueMiddleware = expressVue.init();
app.use(expressVueMiddleware);

HURRAH!! 🙌

Summary

• 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
  when using res.renderVue the filename requires an extention now.
• Paths are now RELATIVE to the file you're currently in ... YAAAY
• Node Modules are supported, for both javascript and vue file imports inside .vue files ... YAAAY
• Massive Performance gains
• 100% compatability with vueJS

Migration to Vue-Pronto

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

const vueOptions = {
    vue: {
        head: {
            meta: [
                { script: 'https://unpkg.com/[email protected]/dist/vue.js'},
                { name: 'application-name', content: 'Name of my application' },
                { name: 'description', content: 'A description of the page', id: 'desc' },
                { style: '/assets/style.css' }
            ]
        }
    }
};

Now its different ..

• We have automated getting vueJS from the CDN for you, and which version (dev/prod) it should use based on the environment variable VUE_DEV.
• We also broke up the meta object, into metas, scripts, and styles arrays.
• scripts now have scriptSrc which is a string including the <script> elements which will be placed in your head as is.
• The parent vue object that wraps the head object was unneeded and removed.

here's the same as above but newer

const vueOptions = {
    vueOptions: "2.4.2",
    head: {
        metas: [
            { name: 'application-name', content: 'Name of my application' },
            { name: 'description', content: 'A description of the page', id: 'desc' },
        ],
        styles: [
            { style: '/assets/style.css' }
        ]
    }
};

Vue File changes

Routes before were relative to the rootPath... now that is gone... routes for requires are relative to the file you are currently in.
Also node_module paths are working for both .js and .vue includes

Remember to look at this if you're getting errors!

res.renderVue Changes

res.renderVue now requires an extension for the file you're using in the route. foo/bar now foo/bar.vue

New

Global req.vueOptions. this is super handy for passing options around between middleware.

Shaves a few extra KB from the payload.

Few bugfixes for objects and vueoptions

Welcome to the new express-vue

There's a lot of features, and new things.. its a massive change, and a breaking one if you're coming from v3.

No longer uses res.render() introducing res.renderVue()

We had to ditch res.render since this is a sync call, and slows down your server. It requires the library to have totally rendered everything before sending to the client.

We have replaced it with **res.renderVue() which returns a stream!

res.renderVue('nameofVueFile', {data}, {vueOptions})
// Note data, and vueOptions objects are optional

It's mostly the same, except its now non-blocking, This improves performance, before we were seeing an average of 140 requests a second, at about 1000ms lag, now were seeing 1000 requests a second at a 0.9ms lag (this is in production mode)

Migrated the engine into a separate project.

This allows us to have finer control over the library, and ultimately write the engine in C++. The long term plan is to have this library do nodeJS/Express ... and then write others for Java, Golang, and Swift

New instantiation and options

Before you had to use this as the view engine.. now its middleware.

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

var app = express();
const vueOptions = {
    rootPath: path.join(__dirname, '../example/views'),
    layout: {
        start: '<div id="app">',
        end: '</div>'
    }
};
const expressVueMiddleware = expressVue.init(vueOptions);
app.use(expressVueMiddleware);

Lots of the config has changed, its best to read the README.

Huge performance increase.

We started noticing concurrency issues at massive scale, so we have solved this issue.

Increases of 1000%!!

Huge thanks to @nick-fytros!!

Big release.

You are now able to use CSS in component/view files..

please use CSS for now, SCSS/LESS/etc support requires those lang's to be compiled, and since this is a runtime library, it will slow down your rendering on the server.

Readme has been updated.

Scoped Slots

@boguan updated the regex used for template identifying to allow for scoped slots in pull request #72

Stack Traces

@ralucas added better erroring into the parser in pull request #71, so you should see better stack traces!

Thanks to both these two!

Fixed big SEO Bug

Hey,

Ok a few things this updates

• Better Error handling, it will now tell you that it can't find a file instead of just hard exiting node.
• New Vue Head object (with fallback to old version)
• Support for Google Structured Data in the head
• Dropped support for node v4 and node v5

Dropped Support for node V5 and lower!

This is super important, I'm really sorry to have to do this going forward but some of the vue libraries have dropped support for this going forward and I have to follow suit node v6 is LTS, and has been for a while now, so you really should be updating.

New Vue Head Object

This is the new vue head object.. what changed? well i realised that in the vue block, there was a meta section and then head inside that. It made zero sense, it should have been a head block where title, and meta lived inside that basically like this example below!

{
        data: {
            otherData: 'Something Else'
        },
        vue: {
            head: {
                title: 'Page Title',
                meta: [
                    { property:'og:title', content: 'Page Title'},
                    { name:'twitter:title', content: 'Page Title'},
                ]
            }    
        }
}

So much nicer now! (I can sleep better at night)

Now in you can use pug/jade in your components!

<template lang="pug">
    div.super-cool
        button(v-on:submit="amazingHandler") Button
</template>

Huge thanks to @refextu for the wonderful contribution!

Devtools!!!!

You can now use the amazing chrome vue devtools by enabling devtools through the VUE_DEV=true environment variable

Other

• Moved second script into primary, No more need for that second script block, everything is handled now, this is referred in the readme file.
  if you still have this <script>app.$mount('#app')</script> you can remove it when using v3.5.0
• Minor text fixes

• Changed the vue config object,
• Added fallbacks
• Removed the need to use rootPath and LayoutsDir

Updated for a minimal and optional setup

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

var app = express();
app.set('views', __dirname + '/app/views');
//Optional if you want to specify the components directory seperate to your views, and/or specify a custom layout.
app.set('vue', {
    //ComponentsDir is optional if you are storing your components in a different directory than your views
    componentsDir: __dirname + '/components',
    //Default layout is optional it's a file and relative to the views path, it does not require a .vue extention.
    //If you want a custom layout set this to the location of your layout.vue file.
    defaultLayout: 'layout'
});
app.engine('vue', expressVue);
app.set('view engine', 'vue');

• Fixes Bug with data binding to child components
• Small refactor of Defaults class to make this library compatible with consolidate.js