Need help with vue-server?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
ngsru

Description

Vue.js server-side version

434 Stars 32 Forks 194 Commits 1 Opened issues

Services available

Need anything else?

bitHound Score

VueServer.js

Vue.js server-side version

Disclaimer

This is not an offical Vue.js version and it has no straight relation to it and its author.

The module is developed for specific needs of its authors and has some restrictions compared to Vue.js.

Getting started

var vueServer = require('vue-server');
var Vue = new vueServer.renderer();

// For $root instance you should pass 'template' option instead of 'el'. var vm = new Vue({ template: '', components: { commonModule: { template: '

Hello world!
' } } });

vm.$on('vueServer.htmlReady', function(html) { console.log(html); // '

Hello world!
' });

Compatibility table

| VueServer.js | Vue.js | | :------------ |:--------------- | | 0.4.x-0.6.x | 1.0.0-migration |

Restrictions

VueServer.js is designed for static HTML rendering. It has no real reactivity.

Also, the module is not running original Vue.js on server. It has its own implementation.

It means VueServer.js is just trying to perfectly reproduce the same result as Vue.js does.

Because of the reasons listed above some of Vue.js functionality is not available.

Hooks difference

VueServer.js does not share hooks with Vue.js. It has its own ones, partially equal to Vue.js'

Note:

readyBe
is a bit experimental and its behaviour may be not correct.

| VueServer.js | Vue.js | | :------------ |:------------- | |

createdBe
|
created
| | -- |
beforeCompile
| |
compiledBe
|
compiled
| |
activateBe
|
activate
| |
readyBe
|
ready
| | -- |
attached
| | -- |
detached
| | -- |
beforeDestroy
| | -- |
destroyed
|

List of unsupported methods:

  • vm.$watch
  • vm.$delete
  • vm.$eval
  • vm.$interpolate
  • vm.$appendTo
  • vm.$before
  • vm.$after
  • vm.$remove
  • vm.$mount
  • vm.$destroy
  • vm.$addChild

List of unsupported directives:

  • v-on
  • v-el

Because of using an extra light DOM version it's not possible to use custom directives too.

What is supported, then?

Well, actually, everything else is (maybe I forgot something).

It means you can use

v-if
,
filters
,
partials
,
async components
,
wait-for
(or activate hook),
events
etc.

Overall, it is possible to use the beloved complex component building system like in orignal Vue.js

Templates precompilation

It is recommended to precompile templates for faster rendering

var vueServer = require('vue-server');
var VueCompile = new vueServer.compiler();

var serverTemplate = VueCompile('

Hello world!
');

We've got a gulp.js plugin for that purpose. Soon it will be published too.

Configuration

var vueServer = require('vue-server');
var Vue = new vueServer.renderer();

// Original Vue.js options. Can be used with VueServer.js too: Vue.config.replace = false; Vue.config.debug = true; Vue.config.silent = false; Vue.config.strict = false;

// VueServer.js options. // On warnings and errors you can pass additional information about your VM; Vue.config.onLogMessage = function (vm) { if (vm.name) { return vm.name; } else { return ''; } };

Custom options

  • renderServer
    - accepts compiled template (a function from
    require('vue-server').compiler();
    )

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.