aslanon/vue-confirm-dialog

Is it ready for Nuxt?

magmel48 opened this issue · 5 comments

magmel48 commented

Added as plugin for Nuxt, got the following error: "document is not defined" in the following line:

var styleElement = document.querySelector('style[data-vue-ssr-id~="' + obj.id + '"]')

Seems like it doesn't work properly in SSR process.

aslanon commented

Can you give some more details? I used it with nuxt and it's working.

ueharajohji commented

there is alot of bad practice , can you explain why are you using id inside a component ? and instead of using const you keep using let.

  • 👍1
ueharajohji commented

and in the index.js part you are using != and suddenly you used === , I don't see any reason to suddenly use triple equals in this case.

  • 👍1
aslanon commented

:( It's my fault. I will remove id from component and it will add prop.

pjezusek commented

Hi,
to make it work in Nuxt with SSR you need to add this plugin as client-side only. Just create a file plugins/vue_confirm_dialog.client.js (the 'client' part is neccessary), put there

import Vue from 'vue'
import VueConfirmDialog from 'vue-confirm-dialog'

Vue.use(VueConfirmDialog)
Vue.component('vue-confirm-dialog', VueConfirmDialog.default)

and add proper entry to nuxt.config.js.
Then in your layout layouts/default.vue you need to wrap the component from the plugin with client-only directive:

<client-only>
  <vue-confirm-dialog />
</client-only>

If you don't wrap the component with client-only you receive an error about the difference between DOM from the server and DOM in the client side.

Nuxt version: 2.14.6

  • 👍1