Vue Toastify on Nuxt 3 not updating Toast

Question

I'm trying to get vue-toastify on Nuxt 3 to update the toast, though I'm struggling to make it update even just basic text. Having looked through their docs, I'm updating it correct and the toastId is returning the same.

This is my code

    const toastId = useNuxtApp().$toast.loading('I'm Loading!...', { timeout: -1 });  
    console.log(toastId)
    useNuxtApp().$toast.update(toastId, {
        render: 'Not loading anymore',
        autoClose: true,
        closeOnClick: true,
        closeButton: true,
        type: 'success',
        isLoading: false,
    });

Am I doing something fundamentally wrong here?

https://vue3-toastify.js-bridge.com/usage/update-toast.html#basic-example

Answer 1

The code you provided is a bit complicated. Here are two ways you can implement Vue Toastify in your Nuxt 3 project.

Method 1 - Most common usage.

~/plugins/toastify.client.ts

Don't forget to suffix the file name with .client.

import Vue3Toasity, { type ToastContainerOptions } from 'vue3-toastify'
import 'vue3-toastify/dist/index.css'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Vue3Toasity) as ToastContainerOptions
})

Component usage.

<script lang="ts" setup>
import { toast, type ToastOptions } from 'vue3-toastify'
const notify = () => {
  toast("Hello World 12345", {
    autoClose: 5000,
    position: toast.POSITION.TOP_CENTER,
  } as ToastOptions)
}
</script>
<template>
  <div>
    <div>
      <button @click="notify">Notify !</button>
    </div>
  </div>
</template>
<style scoped lang="css"></style>

Method 2

~/plugins/toastify.client.ts

import Vue3Toasity, { type ToastContainerOptions } from 'vue3-toastify'
import 'vue3-toastify/dist/index.css'
import { toast, type ToastOptions } from 'vue3-toastify'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Vue3Toasity) as ToastContainerOptions
  return {
    provide: {
      toastify: (msg: string) => {
        toast(msg, {
          autoClose: 5000,
          position: toast.POSITION.TOP_CENTER,
        } as ToastOptions)
      }
    }
  }
})

Component usage.

<script lang="ts" setup>
const { $toastify } = useNuxtApp()
</script>
<template>
  <div>
    <button @click="$toastify('Hello World I am toast.')">Notify !</button>
  </div>
</template>
<style scoped lang="css"></style>

Tested and it works. Hope this helps!