\r\n\u003CUNotifications state-key=\"aCustomKey\" :ui=\"{position:'bottom-0 top-auto' }\"/>\r\n```\r\n\r\nAnd then within your app we could call the toast handler we want:\r\n```\r\nRandom.vue\r\nconst toast = useToast(aCustomKey)\r\n```\r\n\r\nLet me know what you think and if you'll be interested on this knowing that i could contribute fully to it.\r\n\r\nThanks!\n\n### Additional context\n\n_No response_",[3096,3097,3098],{"name":3037,"color":3068},{"name":3073,"color":3074},{"name":3076,"color":3074},1706,"Allow multiple notifications containers","2025-06-19T02:12:39Z","https://github.com/nuxt/ui/issues/1706",0.73376197,{"description":3105,"labels":3106,"number":3108,"owner":3027,"repository":3027,"state":3059,"title":3109,"updated_at":3110,"url":3111,"score":3112},"### Describe the feature\r\n\r\nThe current implementation of `usePreviewMode` automatically calls `refreshNuxtData()` when enabling preview mode, as well as binding a `useRouter.afterEach(() => refreshNuxtData())` callback that fires on the next route change.\r\n\r\nFor apps that do not utilize SSG, or apps that desire custom enable/disable setup or cleanup tasks, the linked PR allows passing in two new callbacks to the composable's options.\r\n\r\nI've submitted the functionality as a new PR: https://github.com/nuxt/nuxt/pull/28371\r\n\r\n### Additional information\r\n\r\n- [X] Would you be willing to help implement this feature?\r\n- [ ] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3107],{"name":3024,"color":3025},28370,"Allow providing custom enable/disable callbacks to `usePreviewMode`","2024-08-08T12:52:46Z","https://github.com/nuxt/nuxt/issues/28370",0.7345921,{"description":3114,"labels":3115,"number":3118,"owner":3027,"repository":3027,"state":3059,"title":3119,"updated_at":3120,"url":3121,"score":3122},"### Describe the feature\n\nI think it would be useful to have composable to subscribe to runtime hooks and automatically unsubscribe on unmounted:\n\nBefore:\n```ts\nconst nuxtApp = useNuxtApp()\n\nconst clear = nuxtApp.hook('link:clicked', closeSearch)\n\nonUnmounted(clear)\n``` \nAfter:\n```ts\nuseHook('link:clicked', closeSearch)\n```\n\n### Additional information\n\n- [x] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [x] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [x] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3116,3117],{"name":3037,"color":3038},{"name":3056,"color":3057},29723,"`useHook` composable","2024-11-02T22:25:06Z","https://github.com/nuxt/nuxt/issues/29723",0.739955,{"description":3124,"labels":3125,"number":3136,"owner":3027,"repository":3078,"state":3059,"title":3137,"updated_at":3138,"url":3139,"score":3140},"## Description\n\nAccording to the @nuxt/ui documentation, composables like useToast and defineShortcuts should be auto-imported:\n\n> Use the auto-imported useToast composable to display [Toast](https://ui.nuxt.com/components/toast) notifications.\n> Use the auto-imported defineShortcuts composable to define keyboard shortcuts.\n\nHowever, in my Nuxt application, these composables are not being auto-imported as expected, resulting in a runtime error: useToast is not defined. Manually importing useToast leads to a Vite build error, and the only working solution I’ve found is a hack from a GitHub issue.\n\n## Step to reproduce\n\n`nuxt.config.ts`\n```ts\nimport tailwindcss from '@tailwindcss/vite'\n\n// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n compatibilityDate: '2025-05-15',\n css: ['~/assets/css/main.css'],\n devtools: { enabled: true },\n modules: ['@nuxt/eslint', '@nuxtjs/leaflet', '@pinia/nuxt', '@nuxt/ui'],\n vite: {\n plugins: [tailwindcss()],\n },\n})\n```\n\n`app.vue`\n```vue\n\u003Ctemplate>\n \u003CUApp>\n \u003CNuxtLayout>\n \u003CNuxtPage />\n \u003C/NuxtLayout>\n \u003C/UApp>\n\u003C/template>\n\n```\n\n`pages/index.vue`\n```vue\n\u003Cscript lang=\"ts\" setup>\nconst toast = useToast()\n\nfunction showToast() {\n toast.add({ title: 'Title' })\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003CUButton label=\"Show toast\" color=\"neutral\" variant=\"outline\" @click=\"showToast\" />\n \u003C/div>\n\u003C/template>\n```\n\n## Result\n\nWith the above \"configuration\", when running `npm run dev`, NUXT will display an 500 error page with message `useToast is not defined`.\n\nMy IDE suggests I should do a manual import with: `import { useToast } from '@nuxt/ui/runtime/composables/useToast.js';`. After I applied it, VITE failed to build the app with error message:\n\n\u003Cimg width=\"926\" height=\"388\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/c7341745-32e3-4162-8e9d-099de951f784\" />\n\nIf builds only if I apply the suggestion from this issue: https://github.com/nuxt/ui/issues/3928#issuecomment-2870066906.\n\n## Questions\n1. Is that hack the optimal way to solve this problem?\n2. Are composables not being auto-imported an expected behaviour?",[3126,3129,3132,3135],{"name":3127,"color":3128},"question","d876e3",{"name":3130,"color":3131},"needs reproduction","CB47CF",{"name":3133,"color":3134},"v3","49DCB8",{"name":3073,"color":3074},4495,"Composables are not being auto-imported in NUXT 3","2025-07-18T02:16:37Z","https://github.com/nuxt/ui/issues/4495",0.7413325,{"description":3142,"labels":3143,"number":3147,"owner":3027,"repository":3027,"state":3059,"title":3148,"updated_at":3149,"url":3150,"score":3151},"### Describe the feature\n\nMaybe I'm missing something, I see the `\u003CNuxtLoadingIndicator />` component, but how can I start/stop the loading manually like in Nuxt 2 ? \r\n\r\nIn Nuxt 2 I could do this:\r\n```\r\nthis.$nuxt.$loading.start();\r\nawait somePromise();\r\nthis.$nuxt.$loading.finish();\r\n```\r\nIn Nuxt 3, could we get a composable to do the same ?\r\n```\r\nconst loading = useLoading();\r\nloading.start();\r\nawait somePromise();\r\nloading.finish();\r\n```\r\n\n\n### Additional information\n\n- [ ] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3144,3145,3146],{"name":3037,"color":3038},{"name":3053,"color":3054},{"name":3056,"color":3057},19650,"`useLoading` composable to control `\u003CNuxtLoadingIndicator />` ?","2023-03-13T20:30:06Z","https://github.com/nuxt/nuxt/issues/19650",0.74198467,["Reactive",3153],{},["Set"],["ShallowReactive",3156],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fwBG-xPc2Ioc_JvPC6iKwDWjxa4Y-dKBale6zupKfEzk":-1},"/nuxt/ui/4206"]