Nuxt.js: Disable ssr, encounter an error when using vue-js-modal

[seekcx]

Because this component does not support ssr, so I disabled ssr:

{ src: '~plugins/vue-js-modal', ssr: false }

Everything looks normal, but when I open the browser, the page display is not normal, in the browser's console to find this error:
vue.runtime.esm.js:430 [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

I only added a line of code for testing.

<modal name="login">login</modal>

Guess may be because the server has disabled ssr, the browser side is not disabled, resulting in both sides of the rendering results are not the same?

_{This question is available on Nuxt.js community (#c791)}

[Atinux]

It's exactly what's appening @seekcx, you can ignore this warning or help the author of vue-js-modal to make his plugin compatible with SSR.

Please take a look at my answer https://github.com/euvl/vue-js-modal/issues/31#issuecomment-309431136

[euvl]

Hey @seekcx and @Atinux. Thanks a lot for heads up. Thats my bad and I will try to fix this problem asap. I had an issue for a month or so but did not take it serious. Sorry 😭

[euvl]

Hey @seekcx

Version 1.2.1 should have SSR support, here is a quick manual https://github.com/euvl/vue-js-modal#ssr and also I've added demo to /demo/server_side_rendeing.

If you will have any futher issues - let me know.
Cheers 👍

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.