Nuxt•6d ago

Can't get the Vue-sonner package to work...

Nuxt Version: 3.16.2 Vue Sonner Version: 1.3.2 (https://vue-sonner.robertshaw.id) Hello Nuxt community. I am experiencing issues with the "Vue-sonner" package. I wanted to ask you guys to see if anyone in here has experienced the same and has found the correct solution to this. I have attached the error as a screenshot and below is the code that I am using to test if it works. Anyone knows what I am doing wrong? Here is my component code:

<template>
    <main class="grid align-center justify-center p-4">
        <div>
            <h1>{{ $t('pages.home.title') }}</h1>

            <button class="btn btn-wide btn-primary mt-2" @click="triggerToast">
                Give me a toast
            </button>
        </div>
    </main>
</template>

<script setup lang="ts">
    import { toast } from 'vue-sonner'

    const triggerToast = () => {
        toast.error("test");
    }

</script>

<template>
    <main class="grid align-center justify-center p-4">
        <div>
            <h1>{{ $t('pages.home.title') }}</h1>

            <button class="btn btn-wide btn-primary mt-2" @click="triggerToast">
                Give me a toast
            </button>
        </div>
    </main>
</template>

<script setup lang="ts">
    import { toast } from 'vue-sonner'

    const triggerToast = () => {
        toast.error("test");
    }

</script>

Here is my app.vue code:

<script setup lang="ts">

    import { Toaster } from 'vue-sonner'

    const route = useRoute();

    useHead({
        title: <string> route.meta.title || '',
    });

</script>

<template>
    <Toaster richColors position="bottom-right" />
    <NuxtLayout>
        <NuxtRouteAnnouncer />
        <NuxtPage />
    </NuxtLayout>
</template>

<script setup lang="ts">

    import { Toaster } from 'vue-sonner'

    const route = useRoute();

    useHead({
        title: <string> route.meta.title || '',
    });

</script>

<template>
    <Toaster richColors position="bottom-right" />
    <NuxtLayout>
        <NuxtRouteAnnouncer />
        <NuxtPage />
    </NuxtLayout>
</template>

Can anyone here spot why this wont work?

3 Replies

kapa.ai•6d ago

Hi @Polak. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the code you've shared, I can see a potential issue with how you're implementing the Vue Sonner toast library in your Nuxt 3 application. The problem appears to be related to how Vue plugins need to be registered in Nuxt. In Nuxt 3, when using third-party Vue plugins like Vue Sonner, you need to create a plugin to properly register them with your Vue application. This is similar to how other toast libraries like PrimeVue's ToastService need to be registered. Here's what you should do: 1. Create a plugin file for Vue Sonner. Create a file at plugins/vue-sonner.ts with the following content:

import { Toaster } from 'vue-sonner'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('Toaster', Toaster)
})

import { Toaster } from 'vue-sonner'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('Toaster', Toaster)
})

This registers the Toaster component globally in your Nuxt application. 2. Keep your app.vue file as is, with the Toaster component:

<template>
  <Toaster richColors position="bottom-right" />
  <NuxtLayout>
    <NuxtRouteAnnouncer />
    <NuxtPage />
  </NuxtLayout>
</template>

<template>
  <Toaster richColors position="bottom-right" />
  <NuxtLayout>
    <NuxtRouteAnnouncer />
    <NuxtPage />
  </NuxtLayout>
</template>

3. In your component, you should be able to use the toast function as you're doing:

import { toast } from 'vue-sonner'

const triggerToast = () => {
  toast.error("test");
}

import { toast } from 'vue-sonner'

const triggerToast = () => {
  toast.error("test");
}

This approach is similar to how other Vue plugins are integrated into Nuxt, as shown in the PrimeVue toast example from the knowledge sources how to integrate toast prive into nuxt3?. If you're still experiencing issues, you might want to consider using Nuxt UI's built-in toast system, which is designed to work seamlessly with Nuxt. It provides a similar API through the useToast composable and includes a Toaster component that's already integrated with the framework Components. Let me know if this helps resolve your issue! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6d ago

<@260534435915628554> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

PolakOP•6d ago

So I am dumb. Read the docs more carefully and you'll find out that for Nuxt there is some other steps.

Gaming

Programming

Can't get the Vue-sonner package to work...

Did you find this page helpful?