How to Fix "No PrimeVue Toast Provided" Error in Nuxt 3 with PrimeVue

I'm trying to use the Toast component from PrimeVue in my Nuxt 3 application but keep encountering the error:

No PrimeVue Toast provided.

I’ve configured my nuxt.config.ts to include the @primevue/nuxt-module with the useToast composable and a custom theme using Aura.

Additionally, I created a plugin to register the ToastService. However, it seems like the ToastService is not being registered properly, and the error persists.

1. I included the @primevue/nuxt-module in my nuxt.config.ts and configured it with useToast in the composables section.
2. I added a toast-service.ts plugin to register the ToastService using nuxtApp.vueApp.use(ToastService).
3. I expected the Toast component to work seamlessly with the ToastService registered globally, allowing me to display notifications in my application.

Despite these steps, the error persists. The plugin logs "Hello world," so I know the plugin is being loaded, but it doesn’t seem to resolve the issue with the Toast component

// nuxt.config.ts

import Aura from '@primevue/themes/aura';

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  app: {
    head: {
      title: "Test App"
    }
  },
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  modules: [
    '@nuxt/image',
    '@nuxtjs/tailwindcss',
    '@nuxtjs/google-fonts',
    '@vueuse/nuxt',
    '@nuxt/icon',
    'nuxt-lucide-icons',
    'shadcn-nuxt',
    '@nuxtjs/color-mode',
    '@pinia/nuxt',
    '@nuxtjs/seo',
    '@nuxtjs/sitemap',
    'nuxt-seo-utils',
    '@nuxt/content',
    '@primevue/nuxt-module'
  ],
  shadcn: {
    /**
     * Prefix for all the imported component
     */
    prefix: '',
    /**
     * Directory that the component lives in.
     * @default "./components/ui"
     */
    componentDir: './components/ui'
  },
  primevue: {
    autoImport: true,
    composables: {
      include: ['useToast'],
    },
    options: {
      ripple: true,
      inputVariant: 'filled',
      theme: {
        preset: Aura,
        options: {
          cssLayer: {
            name: 'primevue',
            order: 'tailwind-base, primevue, tailwind-utilities'
          }
        }
      }
    }
  },
  googleFonts: {
    download: true,
    display: "swap",
    outputDir: 'assets',
    families: {
      'Darker Grotesque': [300, 400, 600, 700, 800],
      Roboto: true,
      Ubuntu: true,
      'Josefin+Sans': true,
      Lato: [100, 300],
      Raleway: {
        wght: [100, 400],
        ital: [100]
      },
    }
  },

})

This is my plugin file

// plugins/toast-service.ts

import ToastService from 'primevue/toastservice';
export default defineNuxtPlugin((nuxtApp) => {
    console.log("Hello world");
    nuxtApp.vueApp.use(ToastService);
})

This is my page using it

// pages/index.vue

<script lang="ts">

const toast = useToast();

// const show = () => {
//   toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000 });
// };

definePageMeta({
  layout: "dashboard"
})

</script>
<template>
  <Toast />
  <Button label="Verify" class="w-24" />

  <Alert />
</template>