\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!",[3020,3023],{"name":3021,"color":3022},"question","d876e3",{"name":3024,"color":3025},"v3","49DCB8",4630,"nuxt","ui","open","How to use filled icon with Toast?","2025-07-29T16:28:22Z","https://github.com/nuxt/ui/issues/4630",0.77686447,{"description":3035,"labels":3036,"number":3046,"owner":3027,"repository":3027,"state":3029,"title":3047,"updated_at":3048,"url":3049,"score":3050},"We have experimental support in Nuxt 3 for both island components and server-only components (which are implemented using islands) - see https://github.com/nuxt/framework/pull/5689 and https://github.com/nuxt/framework/pull/9972 for initial implementations and https://github.com/nuxt/nuxt/discussions/17956 for initial partial RFC.\r\n\r\nThere are a number of future linked improvements. This issue is to track those and provide some place to document the linking story, purpose and usage of server components within Nuxt.\r\n\r\n## Purpose and usage\r\n\r\nCurrently we are collecting use patterns to ensure that the final API and implementation for server components is useful. But the following are some benefits we are exploring:\r\n\r\n1. security and direct access to server APIs within certain components\r\n2. separate caching strategies for individual chunks of HTML\r\n3. leaner bundle size (keeping some dependencies solely on the server, e.g. syntax highlighting)\r\n4. extensibility\r\n5. rendering individual components within other modules or server routes (e.g. for component previews, OG images, PDF downloads, etc.)\r\n6. ...\r\n\r\nComments and suggestions are very welcome.\r\n\r\n```[tasklist]\r\n### Roadmap\r\n- [x] Allow async components - https://github.com/nuxt/nuxt/issues/18500\r\n- [x] Client-side interactivity - https://github.com/nuxt/nuxt/issues/19765\r\n- [x] remove server component content from payload and prefetch on route transition: https://github.com/nuxt/nuxt/pull/21461\r\n- [x] Hybrid/remote/streaming sources for server components - https://github.com/nuxt/nuxt/issues/12343\r\n- [x] lazy (non-blocking) server components\r\n- [x] interactive components within server components\r\n- [x] deep interactive components within server components\r\n- [x] slot refactor to stabilize the API for other remotes sources such as CMS\r\n- [x] server pages\r\n- [ ] Looking for server-side Performance optimisation opportunity\r\n- [ ] A deep documentation for islands\r\n- [ ] Apply islands features to non SFC components\r\n```",[3037,3040,3043],{"name":3038,"color":3039},"enhancement","8DEF37",{"name":3041,"color":3042},"discussion","538de2",{"name":3044,"color":3045},"馃嵃 p2-nice-to-have","0E8A16",19772,"server component roadmap","2025-03-17T18:46:11Z","https://github.com/nuxt/nuxt/issues/19772",0.7991519,{"description":3052,"labels":3053,"number":3057,"owner":3027,"repository":3028,"state":3058,"title":3059,"updated_at":3060,"url":3061,"score":3062},"### Description\n\nHi guys would be nice if there's a config value that sets `progress: false`, cause someone doesn't like it...\nit can be disabled on ui with display none, but a more correct approach would be in app config.\nThanks.\n\n### Additional context\n\n\u003Cimg width=\"382\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/fc3885e7-fcfb-4950-a239-f0e4053de69d\" />",[3054,3056],{"name":3038,"color":3055},"a2eeef",{"name":3024,"color":3025},3270,"closed","[Feature request] Toast hide progress in app.config","2025-05-12T12:47:03Z","https://github.com/nuxt/ui/issues/3270",0.6888818,{"description":3064,"labels":3065,"number":3073,"owner":3027,"repository":3028,"state":3058,"title":3074,"updated_at":3075,"url":3076,"score":3077},"### Description\n\n### Feature Request: Add `variant` and `status-position` props to `UProgress` component\n\n#### Description\nI鈥檓 a junior developer, and I鈥檝e been working on enhancing the flexibility of the `Progress` component by adding two new props: `variant` and `status-position`. These props allow for better customization, especially when using the `Progress` component in different design contexts.\n\n- **`variant`**: This prop allows you to choose between two styles for the progress bar: `linear` and `circular`. The `circular` variant provides a circular progress bar instead of the default linear style.\n \n- **`status-position`**: This prop controls the position of the progress status (the percentage or label) relative to the progress bar. The possible values are:\n - `inside`: The status is displayed inside the circle (for the `circular` variant).\n - `outside`: The status is displayed outside the circle.\n\n#### Motivation\nThis update would help in using the `Progress` component more flexibly across different layouts, providing options for both linear and circular progress indicators with customizable label placements.\n\n#### What I've Done\nI鈥檓 still a junior developer, so the implementation is not perfect, but a good portion of the work is done. I鈥檝e added the `variant` and `status-position` props to the `Progress` component. I鈥檇 love to know if this is something you鈥檇 like to integrate into the main repository and whether I can open a pull request for it.\n\n#### Additional Notes\n- The `variant` prop accepts values `linear` or `circular`.\n- The `status-position` prop accepts values `inside` or `outside`.\n \nWould love to hear your thoughts on this approach!\n\n\n### Additional context\n\n[Reka UI : Progress Circular](https://reka-ui.com/examples/progress-circular)",[3066,3067,3068,3071],{"name":3038,"color":3055},{"name":3024,"color":3025},{"name":3069,"color":3070},"closed-by-bot","ededed",{"name":3072,"color":3070},"stale",3728,"[UProgress]: Add `variant` and `status-position` props","2025-07-30T02:13:32Z","https://github.com/nuxt/ui/issues/3728",0.72893435,{"description":3079,"labels":3080,"number":3083,"owner":3027,"repository":3028,"state":3058,"title":3084,"updated_at":3085,"url":3086,"score":3087},"### Description\n\nI'm using UI Pro ** and the Dashboard Template ** and I just want the position of the toast to be top-center.\n\nI've tried updating my app.config.ts as well as updating appConfig in code. \n\nMy app.config.ts is:\n\n```\nexport default defineAppConfig({\n toaster: {\n position: 'top-center',\n },\n ui: {\n colors: {\n primary: 'green',\n neutral: 'zinc'\n }\n }\n})\n\n```\n\nMy code is:\n\n```\nconst appConfig = useAppConfig()\nappConfig.toaster.position = \"top-center\"\n\nconst toast = useToast();\n\n```\n\n\nI tried reversing the order of useToast() and useAppConfig() to no avail. \n\nI'm sorry this is so basic, but I'm pulling my (remaining) hair out!\n\nThanks!!\nJim\n",[3081,3082],{"name":3021,"color":3022},{"name":3024,"color":3025},4104,"Unable to change position of Toast","2025-05-08T15:40:35Z","https://github.com/nuxt/ui/issues/4104",0.7553459,{"labels":3089,"number":3094,"owner":3027,"repository":3027,"state":3058,"title":3095,"updated_at":3096,"url":3097,"score":3098},[3090,3091],{"name":3038,"color":3039},{"name":3092,"color":3093},"2.x","d4c5f9",8811,"Add classes to loading to customize nuxt-progress bar","2023-01-22T17:08:38Z","https://github.com/nuxt/nuxt/issues/8811",0.7561123,{"description":3100,"labels":3101,"number":3105,"owner":3027,"repository":3027,"state":3058,"title":3106,"updated_at":3107,"url":3108,"score":3109},"Hi @Atinux,\r\nit's good to add `dir:` `rtl` or `ltr` to Customize the Progress Bar options.\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1346\">#c1346\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3102,3104],{"name":3021,"color":3103},"cc317c",{"name":3092,"color":3093},1512,"Add direction in Progress Bar","2023-01-18T15:41:52Z","https://github.com/nuxt/nuxt/issues/1512",0.7580992,{"description":3111,"labels":3112,"number":3119,"owner":3027,"repository":3027,"state":3058,"title":3120,"updated_at":3121,"url":3122,"score":3123},"### Version\n\n[v2.3.4](https://github.com/nuxt.js/releases/tag/v2.3.4)\n\n### Reproduction link\n\n[https://codesandbox.io/s/github/nuxt/codesandbox-nuxt/tree/master/](https://codesandbox.io/s/github/nuxt/codesandbox-nuxt/tree/master/)\n\n### Steps to reproduce\n\n1. Install using yarn create nuxt-app \u003Cmy-project>\n2. Specify loading color\n3. Add nuxt-link to some page\n\n### What is expected ?\n\nProgress bar should be visible when page is loading\n\n### What is actually happening?\n\nNothing appears\n\n### Additional comments?\n\nI noticed this bug a while back, when started to build a project. \nAt the time I had nuxt version 2.0 installed, it didn't have an if statement in the component so it was always visible in the HTML but the opacity was always 0 when router changed (only the width property was changing). With the latest version loading component doesn't appear at all.\nAt first I thought maybe something wrong with my project, but I installed the demo project and the issue is still there. \nAm I doing something wrong?\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c8399\">#c8399\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3113,3115,3118],{"name":3072,"color":3114},"ffffff",{"name":3116,"color":3117},"pending triage","E99695",{"name":3092,"color":3093},4682,"Loading progressbar","2023-01-22T15:30:09Z","https://github.com/nuxt/nuxt/issues/4682",0.7598456,{"labels":3125,"number":3128,"owner":3027,"repository":3027,"state":3058,"title":3129,"updated_at":3130,"url":3131,"score":3132},[3126,3127],{"name":3038,"color":3039},{"name":3092,"color":3093},7753,"Components into root element","2023-02-15T00:59:50Z","https://github.com/nuxt/nuxt/issues/7753",0.7691136,{"description":3134,"labels":3135,"number":3138,"owner":3027,"repository":3028,"state":3058,"title":3139,"updated_at":3140,"url":3141,"score":3142},"### 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",[3136,3137],{"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.7860876,["Reactive",3144],{},["Set"],["ShallowReactive",3147],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fX0zu6tMu4-QmTUGn5d3jCk12SnM2UWmzQXeONf0cxQQ":-1},"/nuxt/ui/4625"]