\n\nI've tried this but without any success so far\n` toast: {\n slots: {\n icon: \"shrink-0 size-5 !text-white rounded-full p-1.5 flex items-center justify-center\",\n },\n variants: {\n color: {\n primary: {\n icon: 'bg-blue-500'\n },\n secondary: {\n icon: 'bg-gray-500'\n },\n success: {\n icon: 'bg-green-500'\n },\n info: {\n icon: 'bg-blue-400'\n },\n warning: {\n icon: 'bg-yellow-500'\n },\n error: {\n icon: 'bg-red-500'\n },\n neutral: {\n icon: 'bg-gray-800'\n }\n }\n },\n },`\n\nThanks for your help!",[3057,3058],{"name":3021,"color":3022},{"name":3024,"color":3025},4630,"How to use filled icon with Toast?","2025-07-29T16:28:22Z","https://github.com/nuxt/ui/issues/4630",0.78748465,{"description":3065,"labels":3066,"number":3074,"owner":3027,"repository":3028,"state":3029,"title":3075,"updated_at":3076,"url":3077,"score":3078},"### Description\n\nFont family, colors and used icons can be customized globally in app.config.ts which is great! Unfortunately the used font-weights cant. Instead every component that uses a specific font-weight needs to be identified and then overwritten manually per component.\n\nE.g. when we want `font-medium` everywhere instead of `font-semibold`, we have to do:\n\n```ts\nui: {\n table: {\n slots: {\n th: 'font-medium',\n },\n },\n modal: {\n slots: {\n title: 'font-medium'\n },\n },\n}\n```\n\nFeature request:\n\n```ts\nui: {\n font-weights: {\n normal: 'font-normal',\n medium: 'font-medium',\n semi-bold: 'font-medium'\n }\n}\n```\n\n### Additional context\n\n_No response_",[3067,3070,3071],{"name":3068,"color":3069},"enhancement","a2eeef",{"name":3024,"color":3025},{"name":3072,"color":3073},"triage","ffffff",4506,"Customize font-weights globally","2025-07-11T15:43:11Z","https://github.com/nuxt/ui/issues/4506",0.7940754,{"description":3080,"labels":3081,"number":3085,"owner":3027,"repository":3028,"state":3029,"title":3086,"updated_at":3087,"url":3088,"score":3089},"### Description\n\nIt is very non-obvious, how to customize the style of indicator in Tabs and NavigationMenu components.\nI try to change the position of indicator to top of the link when NavigationMenu is in mobile mode (sticked to the bottom of the screen), but can't figure out how to do it.\nAlso try to make the text bold and background highlighted with border around and gradient in Tabs component.\n\n### Additional context\n\n_No response_",[3082,3083,3084],{"name":3068,"color":3069},{"name":3024,"color":3025},{"name":3072,"color":3073},4591,"Documentation: Styling of indicator in Tabs and NavigationMenu","2025-07-24T15:51:09Z","https://github.com/nuxt/ui/issues/4591",0.79417443,{"description":3091,"labels":3092,"number":3096,"owner":3027,"repository":3027,"state":3029,"title":3097,"updated_at":3098,"url":3099,"score":3100},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.20.3\r\n- Nuxt Version: 3.12.4\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.7\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: compatibilityDate, devtools, app\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\n[stackblitz](https://stackblitz.com/edit/nuxt-starter-ibatpo)\r\n\r\nIf you wil click on \"CLICK TO TEST\" from main page, the \"test page\" order is right, but\r\n\r\n1. go to unexisted route. (/dsdsdsd)\r\n2. click: \"CLICK TO TEST\" \r\n3.you will see order:\r\nHeader\r\nFooter\r\ntest page\r\n\r\n\r\n\n\n### Describe the bug\n\nWhen you add\r\n\r\n`\r\n app: {\r\n pageTransition: { name: 'page', mode: 'out-in' },\r\n },\r\n`\r\n\r\nand then you have a page with useAsyncData layout order breaks. \r\n\r\nExpected:\r\nHeader\r\nPage\r\nFooter\r\n\r\nbut after error page it becomes:\r\n\r\nHeader\r\nFooter\r\nPage\n\n### Additional context\n\nfor example, I didn't add transition styles because they don't matter. The bug appears with them too\n\n### Logs\n\n_No response_",[3093],{"name":3094,"color":3095},"pending triage","E99695",28220,"Page Transition Bug","2024-10-17T18:04:01Z","https://github.com/nuxt/nuxt/issues/28220",0.7997939,{"description":3102,"labels":3103,"number":3106,"owner":3027,"repository":3028,"state":3107,"title":3108,"updated_at":3109,"url":3110,"score":3111},"### Description\n\nI tried to set toast position like [https://github.com/nuxt/ui/blob/d79da9d7b60c9972af64acd8e6eef4ae7d6bc3eb/docs/app/app.config.ts#L3](https://github.com/nuxt/ui/blob/d79da9d7b60c9972af64acd8e6eef4ae7d6bc3eb/docs/app/app.config.ts#L3).\nBut it didn't work\nHere's my code\n```ts\nexport default defineAppConfig({\n toaster: {\n position: \"top-center\" as const,\n expand: true,\n duration: 5000,\n },\n theme: {\n radius: 0.5,\n },\n ui: {\n colors: {\n primary: \"sky\",\n secondary: \"violet\",\n success: \"green\",\n info: \"blue\",\n warning: \"yellow\",\n error: \"red\",\n neutral: \"slate\",\n },\n },\n})\n```\nb.t.w. theme.radius also not working.",[3104,3105],{"name":3021,"color":3022},{"name":3024,"color":3025},4153,"closed","About app.config.ts set toast position and duration","2025-05-15T08:40:30Z","https://github.com/nuxt/ui/issues/4153",0.5957554,{"description":3113,"labels":3114,"number":3117,"owner":3027,"repository":3028,"state":3107,"title":3118,"updated_at":3119,"url":3120,"score":3121},"### Description\n\nHello, NuxtUI is helping me a lot. Thanks.\n\nI know we can specify the position of the toasts globally in app.config but my case is to have them at top-center in mobile, and bottom-right in desktop.\n\nHow can I achieve this? Thank you",[3115,3116],{"name":3021,"color":3022},{"name":3024,"color":3025},4370,"Responsive Toast Position","2025-06-21T05:03:45Z","https://github.com/nuxt/ui/issues/4370",0.6242961,{"description":3123,"labels":3124,"number":3132,"owner":3027,"repository":3027,"state":3107,"title":3133,"updated_at":3134,"url":3135,"score":3136},"### Environment\n\nmac m1\r\n\n\n### Reproduction\n\n- [stackblitz](https://stackblitz.com/edit/nuxt-starter-8svbbt?file=nuxt.config.ts)\r\n\r\nOn the right window, there is a refresh button on the left of the URL\n\n### Describe the bug\n\n- `nuxt.config.js`\r\n\r\nIf pageTransition is set. Refreshing page scrolls will to the top\r\n\r\n```ts\r\nexport default defineNuxtConfig({\r\n app: {\r\n pageTransition: { name: 'page', mode: 'out-in' },\r\n },\r\n});\r\n```\r\n\r\nBut disable pageTransition. the scroller will be at the position before refreshing\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3125,3126,3129,3130,3131],{"name":3038,"color":3039},{"name":3127,"color":3128},"3.x","29bc7f",{"name":3041,"color":3042},{"name":3044,"color":3045},{"name":3047,"color":3048},19664,"app.pageTransition Refreshing page scrolls will to the top","2024-01-29T13:56:24Z","https://github.com/nuxt/nuxt/issues/19664",0.7568527,{"description":3138,"labels":3139,"number":3146,"owner":3027,"repository":3028,"state":3107,"title":3147,"updated_at":3148,"url":3149,"score":3150},"### Description\n\nHello!\r\n\r\nI think it would be nice to allow multiple notifications containers, so that we could have different placements for toasts based on the container they are sent to.\r\n\r\nAfter digging in the components i think this changes wouldn't be heavy and i could contribute for this if you agree with this feature request.\r\n\r\nMy idea would be to allow to pass a custom key for the the useToast and the notifications state and therefore they would have their own references:\r\n```\r\nNotifications.vue\r\nconst toast = useToast(aCustomKey)\r\nconst notifications = useState\u003CNotification[]>(aCustomKey, () => [])\r\n```\r\n\r\n----\r\n\r\nSo now we could have:\r\n```\r\nApp.vue\r\n\u003CUNotifications :ui=\"{position:'bottom-auto top-0' }\"/>\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_",[3140,3141,3144],{"name":3068,"color":3069},{"name":3142,"color":3143},"closed-by-bot","ededed",{"name":3145,"color":3143},"stale",1706,"Allow multiple notifications containers","2025-06-19T02:12:39Z","https://github.com/nuxt/ui/issues/1706",0.7706467,["Reactive",3152],{},["Set"],["ShallowReactive",3155],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fQfqhQ6o45SZPxMccK1Qf5NQBk8wGJo4KfKgNBYd0Bw4":-1},"/nuxt/ui/4104"]