Nuxt 3 support

[sahmadreza]

Support Nuxt 3

[gobboo]

Currently working on Nuxt 3 for me if I make a new plugin

import Toast from "vue-toastification";
import "vue-toastification/dist/index.css";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Toast)
});

[LynxTR]

For noticing further nuxt 3 users like me, you need to set transpile for this package before using it at production. Otherwise toast used pages will throw 500 error as dist.useToast is not a function when you refresh the browser or at initial site openning.

// nuxt.config.ts
export default defineNuxtConfig({
   build : {
      transpile: ['vue-toastification']
   }
})

For now, this is the only solution i able to find out. Tested nuxt version is rc.8

[mykkode]

Another way to use vue-toastification with vue3 and nuxt3:

Create vue-toastification.client.js in /plugins with the following content:

import Toast from 'vue-toastification/dist/index.mjs'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Toast, {})
})

Also you have to import useToast this way: import { useToast } from 'vue-toastification/dist/index.mjs'

And to import the toast style, add in nuxt.config.js:

css: [
    ...
    'vue-toastification/dist/index.css'
 ],

[jiblett1000]

Additionally, to avoid importing useToast everywhere, you can just add a composable in the composables directory like so....

import { useToast } from "vue-toastification";

export default function () {
  return useToast();
}

[akbarism]

Another way to use vue-toastification with vue3 and nuxt3:

Create vue-toastification.client.js in /plugins with the following content:

import Toast from 'vue-toastification/dist/index.mjs'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Toast, {})
})

Also you have to import useToast this way: import { useToast } from 'vue-toastification/dist/index.mjs'

And to import the toast style, add in nuxt.config.js:

css: [
    ...
    'vue-toastification/dist/index.css'
 ],

is this work in production?

[kpetrillo]

Another way to use vue-toastification with vue3 and nuxt3: Create vue-toastification.client.js in /plugins with the following content:

import Toast from 'vue-toastification/dist/index.mjs'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Toast, {})
})

Also you have to import useToast this way: import { useToast } from 'vue-toastification/dist/index.mjs' And to import the toast style, add in nuxt.config.js:

css: [
    ...
    'vue-toastification/dist/index.css'
 ],

is this work in production?

It works for me in production; I'm using Digital Ocean / Cleavr.

[kouts]

Here's what worked for me using nuxt 3.4.2

Added

build: { transpile: ['vue-toastification'] },
css: ['vue-toastification/dist/index.css']`

to nuxt.config.ts

Added plugins/vue-toastificaton.client.ts

import Toast, { PluginOptions } from 'vue-toastification'

const options: PluginOptions = {
  // We can set our default options here
}

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Toast, options)
})

Added composables/useToast.ts

import { useToast } from 'vue-toastification'

export default function () {
  return useToast()
}

I've tested production build with nuxt build and nuxt preview

[achraf-prestigia]

this solution fixed my issue: https://github.com/nuxt/nuxt/issues/14790