server-bundle created by vueify does not run in node

[mediafreakch]

Hey,

I'm trying to get the vue server-side rendering working in a browserify pipeline. Has anyone done this before? Is it possible with vueify?

It seems that the bundle generated by vueify cannot be executed by node. I'm getting this error in the console when accessing route /:

ReferenceError: document is not defined
    at Object.exports.insert (__vue_ssr_bundle__:10168:14)
    at Object.21../components/Topbar.vue (__vue_ssr_bundle__:11122:65)
    at s (__vue_ssr_bundle__:1:682)
    at __vue_ssr_bundle__:1:733
    at Object.22../App.vue (__vue_ssr_bundle__:11170:12)
    at s (__vue_ssr_bundle__:1:682)
    at __vue_ssr_bundle__:1:733
    at Object.<anonymous> (__vue_ssr_bundle__:11660:12)
    at Object.31../app (__vue_ssr_bundle__:11703:4)
    at s (__vue_ssr_bundle__:1:682)

Probably from this line

Yes, I use single file .vue components that contain styles. But shouldn't vue-server-renderer be smart enough not to run this in node?

Using vueify 9.4.0 and vue 2.1.4

[mediafreakch]

Ok I figured that you actually need to pass VUE_ENV=server as a environment variable to browserify when building the server-bundle. In my package.json, that looks like this: VUE_ENV=server browserify -e src/server-entry.js -o dist/server-bundle.js -t vueify

It's not documented anywhere. Would be nice to have it documented somewhere...

[mediafreakch]

I had to supply browserify with the --no-browser-field, --bare and --standalone server flags too. Where server can be any name you choose, this will just export the server-bundle under the given name. My browserify command now looks like this:

VUE_ENV=server browserify --bare --no-browser-field --standalone server -e src/server-entry.js -o dist/server-bundle.js -t vueify -t babelify

The resulting bundle now works with the createBundleRenderer of vue-server-renderer.

Hope that helps anyone trying to setup server-side-rendering with vue and browserify!