Toast: Nuxt PrimeVue Toast component doesn't work correctly without autoImport: true

[sparrow-chik-chrk]

Describe the bug

Problem:

When using the @primevue/nuxt-module, the Toast component does not work correctly unless autoImport: true is enabled.

• The component is successfully added to the page, and TypeScript recognizes useToast().
• However, when calling useToast().add("Example"), nothing happens.

I verified that ToastService is being automatically imported by the module, as trying to manually add a plugin for it results in a console message indicating that it is already registered.

For testing purposes, I set the components, directives, and composables options to include: "*", but the issue persisted.

However, when autoImport: true is enabled, everything works as expected, and useToast().add("Example") starts functioning properly.

It seems that the auto-import is handling something outside of the defined components, directives, and composables configurations, which is necessary for Toast to work.

Expected Behavior:

It should be possible to manually configure the import of components, directives, and composables for the Toast component to work without needing to enable autoImport: true.

Actual Behavior:

useToast().add() does not work unless autoImport: true is enabled, even when all necessary components, directives, and composables are manually included.

Environment:

• PrimeVue Version: 4.0.7
• Nuxt Version: 3.13.2
• Node Version: 20.16.0
• Operating System: Windows

Additional Context:

The problem seems to be that autoImport is doing more than just importing components, directives, and composables. There is likely something else being auto-imported that is necessary for the Toast component to function properly. The current manual import configuration does not cover whatever this missing part is.

I would appreciate a way to manually import everything necessary for the Toast component without relying on autoImport: true.

Thanks!

Reproducer

https://stackblitz.com/edit/primevue-nuxt-issue-template-jykhii

PrimeVue version

4.0.7

Vue version

3.x

Language

TypeScript

Build / Runtime

Nuxt

Browser(s)

Chrome 90

Steps to reproduce the behavior

1. Create a Nuxt project using the @primevue/nuxt-module.
2. Configure the module with autoImport: false and manually include all components, directives, and composables:

primevue: {
  autoImport: false,
  components: {
    include: '*',
  },
  directives: {
    include: '*',
  },
  composables: {
    include: '*',
  },
  importTheme: 'saga-blue',
  options: {
    ripple: true,
  },
}

3. Add the Toast component and call useToast().add():

<template>
  <PrimeToast />
  <button @click="showToast">Show Toast</button>
</template>

<script lang="ts" setup>
const toast = useToast();

function showToast() {
  toast.add("Example");
}
</script>

4. Observe that nothing happens when calling toast.add(), even though the component is rendered and useToast is recognized by TypeScript.

5. Change autoImport: true in the module configuration and see that useToast().add() now works as expected.

Expected behavior

No response

[tugcekucukoglu]

Service' should be imported manually: https://primevue.org/toast/#toast-service

[sparrow-chik-chrk]

@tugcekucukoglu I am very glad, of course, that you are closing the issue without looking into the matter.
But still. I am using primevue/nuxt-module.

When I add ToastService, even on the client side, there is an error in the browser console stating that the service is added multiple times.

I'm not even mentioning that adding a plugin to nuxt with ToastService does not solve the issue.

[sparrow-chik-chrk]

Service' should be imported manually: https://primevue.org/toast/#toast-service

Or provide an example of the configuration for Nuxt that will work.
I would be very grateful.

[Ed1ks]

@tugcekucukoglu @sparrow-chik-chrk

After some investigation I have find out, that Nuxt 3.13.2 is breaking toast. With 3.13.1 everything works as expected.