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

[sparrow-chik-chrk]

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 automatically imported by the module, as attempting to manually add a plugin for it results in a console message indicating that it is already registered.
And even if you manually add the service via a plugin, it still doesn't work.

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.

Any ideas on how to solve this issue specifically for Nuxt?
The standard documentation doesn't cover this case, and all the issues I've read suggest the same thing, often not considering @primevue/nuxt-module.
I already created an issue, but it was just closed without anyone looking into the matter.

[j0rgedev]

Hello @sparrow-chik-chrk. There'a an open issue with nuxt auto import logic. It seems like it is actually inverted. Check here: primefaces/primevue#6187

[sparrow-chik-chrk]

Actually, it’s not inverted.
It’s just not working correctly in dev mode with TypeScript when using a prefix. For example, PrimeButton. In dev mode, the components are not recognized, and TypeScript hints don’t work. However, the components themselves function properly, and everything works fine during the build. I’ve described this behavior here.

The issue with the Toast component is a bit different.
When auto-import is enabled, everything seems to work fine.
But if we consider the above-mentioned problem, sometimes you don’t want to enable auto-import, for instance, when you want to use prefixes for components.

When you disable auto-import, add all composables, directives, and components – Toast doesn’t work.
One might think this is because the ToastService plugin isn’t being imported. And if this were Vue, yes, that would be the case. But let’s also remember that importing services in Nuxt is quite different, and PrimeFaces should mention this in their documentation, expanding the configuration section for Nuxt.

As I understand it, Nuxt automatically imports this plugin in the @primevue/nuxt-module. Otherwise, I can’t explain why when I import the plugin even on the client side, the console tells me that I’m trying to import a plugin that is already connected. (And side note, it still doesn’t work even then).

You can try to reproduce and check all this on this StackBlitz example. I’ve described the reproduction steps here.