nandi95 / vue-toastify

🔥 Simple, extendable, dependency free notification plugin. 🔥
https://vue-toastify.netlify.com/
MIT License
227 stars 12 forks source link

How to configure vue-toastify for Nuxt? #20

Closed claytongf closed 4 years ago

claytongf commented 4 years ago

I'm trying to use it in Nuxt but I receive an error after adding it to plugins. config in nuxt.config.js: plugins: [ '~plugins/vtoastify.js' ], setting up in plugins/vtoastify.js:

`import Vue from 'vue' import VueToastify from 'vue-toastify'

Vue.use(VueToastify)`

after that, I receive an error in browser:

ReferenceError window is not defined

in console: Uncaught InternalError: too much recursion

And shows an error in import VueToastify

module "/nuxtproject/node_modules/vue-toastify/dist/vue-toastify.umd.min" Could not find a declaration file for module 'vue-toastify'. '/nuxtproject/node_modules/vue-toastify/dist/vue-toastify.umd.min.js' implicitly has an 'any' type. Try npm install @types/vue-toastify if it exists or add a new declaration (.d.ts) file containing declare module 'vue-toastify';ts(7016)

But the file vue-toastify.umd.min.js exists on that folder. Any ideas how to setup vue-toastify on Nuxt?

Note: I'm not using typescript

LuisRego commented 4 years ago

I'm having the same issue.

nandi95 commented 4 years ago

Do you have an example repo @claytongf ? I was able to set it up following the nuxt docs

in this case it was:

// plugins/vue-toastify.js

import Vue from "vue";
import VueToastify from "vue-toastify";

Vue.use(VueToastify);
// nuxt.config.js
...
plugins: ["@/plugins/vue-toastify.js"]
...

and in a component:

mounted() {
  this.$vToastify.success('it worked');
},

Regardless it would be a good idea to add support for nuxt so this won't be happening in the future.

Can I close this or is this still an issue?

claytongf commented 4 years ago

Hi, I've created an empty nuxt project installing vue-toastify as described in the nuxt documentation. https://github.com/claytongf/vue-toastify-test I still get the error https://ibb.co/k6MgYkZ I've sent a screenshot of the error.

nandi95 commented 4 years ago

Try updating the plugins array to this:

plugins: [
    // https://stackoverflow.com/a/58633076/11672649
    { src: '@/plugins/vue-toastify.js', mode: 'client' }
],

In the config your target is set to "server"

nandi95 commented 4 years ago

@claytongf see above