Toast not showing

[jguerrerogTRC]

Environment

• Nuxt: 3.16.0.
• Vue: 3.5.13.
• Node: 18.
• Nuxt UI: 3.0.0.

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.0.0

Reproduction

NA

Description

Hi. I created a new Nuxt project. Im working with the Nuxt UI v 3.0.0.
I read the docs but I have problem with toast because is not showing when its being call.

This is my App.vue

index.vue

<script setup lang="ts"> const toast = useToast(); function showToast() { toast.add({ title: "Title", }); } </script>

And this is my nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
hooks: {
"prerender:routes"({ routes }) {
routes.clear();
},
},
future: {
compatibilityVersion: 4,
},
compatibilityDate: "2024-11-01",
devtools: { enabled: true },
modules: ["@nuxt/ui", "@vueuse/nuxt", "@nuxt/eslint"],
css: ["~/assets/css/main.css"],
ui: {
fonts: false,
//colorMode: false,
theme: {},
},
ssr: false,
router: {
options: {
hashMode: true,
},
},
eslint: {
config: {
stylistic: true,
},
},
});

I tried working with a nuxt.config.ts by default settings but it didnt work neither.

Additional context

No response

Logs

[maxsteinwand]

You will need to wrap your app with te UApp component for toast to show up: https://ui.nuxt.com/components/app

[HugoRCD]

@jguerrerogTRC As @maxsteinwand said, did you wrap your application properly with the UApp, since it's thanks to this component that we inject the toast provider as well as the other modals, overlay etc...

[jguerrerogTRC]

@jguerrerogTRC As @maxsteinwand said, did you wrap your application properly with the UApp, since it's thanks to this component that we inject the toast provider as well as the other modals, overlay etc...

Yes, I had my app.vue like this:

Just like the documentation said.
But the modals, and toasts still not showing.