Vue rendering engine for Express.js. Use .Vue files as templates using streams
OTHER License
Thanks to @d0cm0d for the fantastic first PR
Published by danielcherubini over 6 years ago
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!
Published by danielcherubini over 6 years ago
Express-Vue now pre-caches all vue files on startup.
This will massively help initial request times.
Published by danielcherubini over 6 years ago
[email protected]
Published by danielcherubini over 6 years ago
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!! 🙌
Published by danielcherubini over 6 years ago
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.
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 ..
VUE_DEV
.metas
, scripts
, and styles
arrays.scriptSrc
which is a string including the <script>
elements which will be placed in your head as is.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' }
]
}
};
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
res.renderVue
now requires an extension for the file you're using in the route. foo/bar
now foo/bar.vue
Global req.vueOptions. this is super handy for passing options around between middleware.
Published by danielcherubini about 7 years ago
Shaves a few extra KB from the payload.
Few bugfixes for objects and vueoptions
Published by danielcherubini about 7 years ago
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.
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)
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
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.
Published by danielcherubini over 7 years ago
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!!
Published by danielcherubini over 7 years ago
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.
Published by danielcherubini over 7 years ago
@boguan updated the regex used for template identifying to allow for scoped slots in pull request #72
@ralucas added better erroring into the parser in pull request #71, so you should see better stack traces!
Published by danielcherubini over 7 years ago
Fixed big SEO Bug
Published by danielcherubini over 7 years ago
Hey,
Ok a few things this updates
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.
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)
Published by danielcherubini over 7 years ago
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!
Published by danielcherubini almost 8 years ago
You can now use the amazing chrome vue devtools by enabling devtools through the VUE_DEV=true
environment variable
<script>app.$mount('#app')</script>
you can remove it when using v3.5.0
Published by danielcherubini almost 8 years ago
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');