Issue with nuxt

[PiotrBaczkowski]

Hello,
after following documentation i am getting this error:

[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

, or missing . Bailing hydration and performing full client-side render.

[PiotrBaczkowski]

however if i import like this it works
import VueFinalModal from 'vue-final-modal'

[hunterliu1003]

Hi @PiotrBaczkowski,

Thanks for your feedback,
I think the issue is because vue-final-modal using document for some features.

Please give this a try:

• Add build.transpile in nuxt.config.js:

plugins: [
    '~plugins/vue-final-modal.js'
],
build: {
    transpile: ['vue-final-modal']
}

• Add plugins/vue-final-modal.js:

import VueFinalModal from 'vue-final-modal/lib'

Vue.use(VueFinalModal)

If it works to you, please let me know.
If this still not work, please provide a reproduction or more info

[PiotrBaczkowski]

hello, adding transpile fixed the issue, thanks :)

[AlbatiQue]

Hey,

I have the same issue, but the transpile solution does not seem to fix the issue in my case.

[hunterliu1003]

Hi @AlbatiQue,

Can you provide more info like below?

Version

vue-final-modal:
vue:
nuxt:

How you use vue-final-modal

Steps to reproduce

[AlbatiQue]

Hey @hunterliu1003

I just did the basic setup. With the basic example for nuxt.

`<vue-final-modal
@click-outside="clickOutside"
@before-open="beforeOpen"
@opened="opened"
@before-close="beforeClose"
@closed="closed"
>
...modal content

<button @click="showModal = true">
Launch
`

"nuxt": "^2.14.0",
"vue-final-modal": "^0.19.0"

My vs file gives the following suggestion:

[Mini-ghost]

@AlbatiQue
I have a working solution, that is working in my project very well.

Create an index.d.ts file in root, and add this code block below:

// index.d.ts
declare module 'vue-final-modal/lib' {
  import VueFinalModal from 'vue-final-modal'
  export default VueFinalModal
}

Hope it useful 😉