How to use vue-toastification

Question

I just migrated my project created in vue 3 to nuxt 3. Previously I used the vue-toastification module but now I don't know how to import it correctly. My code using this module.

import { useToast, POSITION } from 'vue-toastification'
const toast = useToast()

export default {
    methods: {
        copy(text) {
            toast.success('Copied!', {
                timeout: 2000,
                position: POSITION.BOTTOM_CENTER,
            })
            navigator.clipboard.writeText(text)
        }
    }
}

In Vue I had to do app.use(Toast) but Nuxt does not have an index.js file. Adding modules: ['vue-toastification/nuxt'] in nuxt.config.js does not work because I get an error.

Gangrel

Hi, does that one help? https://mcmap.net/q/1631809/-how-to-add-vue3-openlayers-plugin-to-nuxt – Exequies

Does it work, is it fixing your issue? – Exequies

@Exequies yes its works – Gangrel

had the same issue and solved it like this: - used a plugin helper as decribed below by @ricardo-de-paula and in the component I imported useToast and wrapped the call to it in a conditional if(process.client) – Scurrilous

Answer 1

Answers suggested by kissu and Ricardo de Paula worked for me while I was using development server (npm run dev).

After building and running the project I encountered error 500:

Named export 'useToast' not found. The requested module 'vue-toastification' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using: import pkg from 'vue-toastification';

To fix this, I registered toast as plugin helper (I'm using Nuxt 3.1.1 with Nitro 2.1.1):

Inside vue-toastificaton.client.js:

import { defineNuxtPlugin } from '#app'
import * as vt from 'vue-toastification'
import '@/assets/css/toast.scss'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(vt.default)
  return {
    provide: {
      toast: vt.useToast()
    }
  }
})

Then in my component script setup:

//throws an error after production build
//import { useToast } from 'vue-toastification'
//const toast = useToast()
//toast.success('Yay!!!')

//works after production build
const { $toast } = useNuxtApp()
$toast.success('Yay!!!')

Tapp

Is this an answer or a personal question? – Exequies

this is an answer – Tapp

Answer 2

I was wanting to do the same thing. I read kissu's answer and did the following:

1 - I created a folder for the puglin - plugins

2 - Inside the plugins folder I created a file called vue-toastificaton.client.js

Inside vue-toastificaton.client.js:

import { defineNuxtPlugin } from '#app'
import Toast from 'vue-toastification'
import 'vue-toastification/dist/index.css' // if needed

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

And I used it that way:

<script setup>
import { useToast } from 'vue-toastification'
const toast = useToast()
const onSubmit = () => {
    // use the toast notification plugin to show a success message
    toast.success('Hello world!')
}
</script>

Mcreynolds

Answer 3

If someone still encounters this error upon build you can simply add the vue-toastification into build: { transpile: ['vue-toastification'] } on nuxt config. You may check https://nuxt.com/docs/guide/concepts/esm#transpiling-libraries with regards to this type of issue.

Jud

Here's the link to the issue for Nuxt: github.com/nuxt/nuxt/issues/14790 – Clinic

This should be marked as the answer – Explanatory

Answer 4

Usage to avoid an issue on deployment

Since this is a broad type of question, I'll share my experience with vue-toastification 2.

The vue-toastification 2 does not support SSR so you need to ensure that the plugin only runs on the client side only. Follow @kissu's answer on this thread.

Now on your script setup, the syntax is like this.

<script setup>
import { useToast } from 'vue-toastification'
const toast = useToast()

const showToast = () => {
 toast.success( 'Hello World' )
}
</script>

The problem, The syntax above will work during the development but not on deployment. You'll get an error like this.

Even if you follow the instruction shown on the screenshot, the issue will still persist on deployment. That is I think because the const toast = useToast() runs on the server-side.

The solution The workaround solution for this issue is to call the useToast() directly. Like this

<script setup>
import { useToast } from 'vue-toastification'

const showToast = () => {
 useToast().success( 'Hello World' )
}
</script>

Now, it should work on deployment.

If you are using Pinia

import { useToast } from 'vue-toastification'

export const useItems = defineStore('useItems', {
state: () => {
 return {
   ....
 }
},
actions: {
 method() {
  if (process.client) {
     useToast().success('Hello World')
  }
 }
}
})

Appreciable

Answer 5

If you want it to be available globally, you can install it as a Nuxt plugin as explained in the official docs or in this other answer.

vue-toastification is probably a client-side only plugin, hence you would probably want to use it as /plugins/vue-toastificaton.client.js like this

import { defineNuxtPlugin } from '#app'
import Toast from "vue-toastification"
import "vue-toastification/dist/index.css" // if needed

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

Then, you should be able to use it in your components with either Composition API or Options API (I think).

Exequies

Answer 6

1. Install vue-toastification;

2. Add this:

build: {
  transpile: ['vue-toastification'],
}

to your nuxt.config.ts file.

3. Create the plugin toast.ts;

import * as vt from 'vue-toastification';
import 'vue-toastification/dist/index.css';
import { defineNuxtPlugin } from '#app';
    
export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(vt.default);
  return {
    provide: {
      toast: vt.useToast()
    }
  }
})

Akkerman