Vue-js-modal: SSR Issue

[uptownhr]

I'm assuming the library touches the dom somehow and it is causing the vdom to not match up. Anyway this can be handled when SSR is in use?

[euvl]

I didn't test it with SRR. If you want to create SSR test case i will gladly look if i can fix it. Either if you know how to fix it, feel free to do a PR.

[Atinux]

Hi @euvl

I am the author of Nuxt.js, thank you for creating vue-js-modal :)

Here the current setup to use your module with Nuxt.js: https://glitch.com/edit/#!/thread-hacksaw
Demo: https://thread-hacksaw.glitch.me/

As you can see, the server fails because of the usage of document which is not defined in node.js.

To make your module compatible with SSR, you need to ensure that every access to document or window is done only when they exists.

Also, be aware that beforeCreate and created hooks are called also on SSR, please take a look at the Universal Guide written by Evan You: http://ssr.vuejs.org/en/universal.html

[euvl]

Hey @Atinux

Thanks a lot for a setup. Will take a look into it tonight 😄

[euvl]

Hey @Atinux

Have a question

Is it an acceptable solution if i would have a separate build for ssr?
E.g. the plugin integration will look something like this:

In nuxt.config.js:

module.exports = {
  plugins: ['~plugins/vue-js-modal']
}

In plugins/vue-js-modal:

import Vue from 'vue'
import VModal from 'vue-js-modal/dist/ssr.index.js'

Vue.use(VModal)

I have an issue with importing styles from templates. In any solution i've tried either ssr build or client build works. I would clearly prefer to have one file for both, but again I am not sure what is the "right" way of doing things in this environment.

Latest working version: https://github.com/euvl/vue-js-modal/tree/ssr-fix-2-outputs

Thanks a lot.