\n \u003C/UButton>\n\n \u003CUButton color=\"gray\" variant=\"ghost\" @click=\"continue\">\n Continue\n \u003CUIcon name=\"i-mdi-arrow-right-circle\" class=\"text-primary\" />\n \u003C/UButton>\n \u003C/div>\n \u003C/UCard>\n \u003C/UModal>\n```",[1984,1987],{"name":1985,"color":1986},"question","d876e3",{"name":1988,"color":1989},"stale","ededed",3187,"nuxt","ui","open","[V2] How to prevent button pre-selection on UModal?","2025-03-09T01:50:32Z","https://github.com/nuxt/ui/issues/3187",0.71371716,{"description":1999,"labels":2000,"number":2007,"owner":1991,"repository":1992,"state":1993,"title":2008,"updated_at":2009,"url":2010,"score":2011},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.9.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.8.3\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@2.19.2, nuxt-svgo@4.0.9, @pinia/nuxt@0.9.0, pinia-plugin-persistedstate/nuxt, @nuxtjs/i18n@9.1.0, nuxt-jsonld@2.1.0, @nuxtjs/robots@5.0.0, nuxt-gtag@3.0.2, @sentry/nuxt/module@8.42.0, nuxt-time@1.0.3, @nuxt/eslint@0.7.2\n- Build Modules: -\n\n\n### Version\n\nv2.19.2\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-ncxoznzw\n\n### Description\n\nIf you define your own color for tailwinds, and attempt to use it on a UButton component with the link variant, it will not work and give the following error:\n\n```\n500\nvariant?.replaceAll is not a function\n\nat ComputedRefImpl.fn (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@nuxt+ui@2.19.2_vite@6.0.3_vue@3.5.13/node_modules/@nuxt/ui/dist/runtime/components/elements/Button.js:142:18)\nat refreshComputed (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:353:29)\nat get value (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:1558:5)\nat unref (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:1431:29)\nat Object.get (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:1437:64)\nat Object.get (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:3099:26)\nat Proxy._sfc_render (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@nuxt+ui@2.19.2_vite@6.0.3_vue@3.5.13/node_modules/@nuxt/ui/dist/runtime/components/elements/Button.js:199:17)\nat renderComponentRoot (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:6521:16)\nat hydrateSubTree (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:5309:32)\nat ReactiveEffect.componentUpdateFn [as fn] (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:5334:13)\n```\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2001,2004],{"name":2002,"color":2003},"bug","d73a4a",{"name":2005,"color":2006},"triage","ffffff",2860,"[UButton] Using a custom color on the link variant causes an error","2025-02-06T03:16:14Z","https://github.com/nuxt/ui/issues/2860",0.73223853,{"description":2013,"labels":2014,"number":2021,"owner":1991,"repository":1992,"state":1993,"title":2022,"updated_at":2023,"url":2024,"score":2025},"### For what version of Nuxt UI are you suggesting this?\n\nv3.0.0-alpha.x\n\n### Description\n\nIn certain situations, it’s necessary to display a loading indicator, but not all components currently include this feature. It would be helpful to have a **composable** and **directive** for such cases.\n\n### How it should work\n\nA semi-transparent overlay should be rendered over the target, containing a loading icon.\n\n### How to use\n\n#### Composable `useLoading`\n\n```vue\n\u003Cscript setup lang=\"ts\">\nconst layout = ref\u003CHTMLDivElement | null>(null)\nconst { start, stop } = useLoading(layout)\n\nfunction startLoading() {\n start()\n setTimeout(stop, 2000)\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv ref=\"layout\">\n ...\n \u003C/div>\n \u003CUButton @click=\"startLoading\">Show loading\u003C/UButton>\n\u003C/template>\n```\n\n#### Directive `v-loading`\n\n```vue\n\u003Cscript setup lang=\"ts\">\nconst isLoading = ref(false)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv v-loading=\"isLoading\">\n ...\n \u003C/div>\n\u003C/template>\n```\n\n### Additional context\n\nHere’s how it’s implemented in other libraries:\n\n- [Element Plus - Loading](https://element-plus.org/en-US/component/loading.html) \n- [Vue Loading](https://coffcer.github.io/vue-loading/)",[2015,2018],{"name":2016,"color":2017},"feature","A27AF6",{"name":2019,"color":2020},"v3","49DCB8",2668,"Proposal to add a loading component","2024-11-18T12:01:05Z","https://github.com/nuxt/ui/issues/2668",0.76714176,{"description":2027,"labels":2028,"number":2031,"owner":1991,"repository":1992,"state":1993,"title":2032,"updated_at":2033,"url":2034,"score":2035},"### Description\n\nHi there,\n\nI'm really curious about how Nuxt UI is handling trailing slashes. In the Nuxt Content repo I can see they are using `ufo` to remove the trailing slashes, but in the Nuxt UI repo I can't find how you get rid of it. Even tho I know you can do these things on Vercel and Netlify, I'm curious how you handle it in Nuxt UI.\n\nIn my case, route.path is returning a path with a trailing slash and breaks my `queryCollection`...\n\n```vue\nconst { data: page } = await useAsyncData(\n `${route.path}/.navigation`,\n async () => {\n return await queryCollection('content').path(route.path).first();\n }\n);\n```",[2029,2030],{"name":1985,"color":1986},{"name":2019,"color":2020},3285,"Trailing slashes","2025-02-10T13:25:12Z","https://github.com/nuxt/ui/issues/3285",0.7724463,{"description":2037,"labels":2038,"number":2041,"owner":1991,"repository":1992,"state":1993,"title":2042,"updated_at":2043,"url":2044,"score":2045},"### Description\n\nIs there currently a way, or future support for overriding the trigger for the Accordion similar to how it worked in v2:\n\n> Example for v2\n\n```vue\n\u003Cu-accordion :items=\"items\" :ui=\"{ wrapper: 'flex flex-col w-full' }\">\n \u003Ctemplate #default=\"{ item, open }\">\n \u003Cu-button variant=\"ghost\" class=\"flex justify-between items-center font-semibold\">\n \u003Cspan>{{ item.label }}\u003C/span>\n \u003Cdiv class=\"flex items-center space-x-2\">\n \u003Cu-icon\n name=\"i-heroicons-chevron-right-20-solid\"\n class=\"w-5 h-5 ms-auto transform transition-transform duration-200\"\n :class=\"[open && 'rotate-90']\"\n />\n \u003C/div>\n \u003C/u-button>\n \u003C/template>\n\n \u003Ctemplate #item=\"{ item }\">\n // Content\n \u003C/template>\n\u003C/u-accordion>\n```\n\nCurrently i don't see a way with the default slot to override the AccordionRoot trigger\n",[2039,2040],{"name":1985,"color":1986},{"name":2019,"color":2020},3455,"Override Slot for Accordion Trigger","2025-03-04T17:30:46Z","https://github.com/nuxt/ui/issues/3455",0.7729218,{"description":2047,"labels":2048,"number":2054,"owner":1991,"repository":1992,"state":2055,"title":2056,"updated_at":2057,"url":2058,"score":2059},"### Description\n\nThere is currently no easy way to know what state the modal is in. Adding a `toggle` method would make life very much easier.\n\nI'm willing to make a PR\n\n### Additional context\n\n_No response_",[2049,2052,2053],{"name":2050,"color":2051},"enhancement","a2eeef",{"name":2019,"color":2020},{"name":2005,"color":2006},3720,"closed","feat: add toogle for useOverlay","2025-04-09T15:26:14Z","https://github.com/nuxt/ui/issues/3720",0.7092579,{"description":2061,"labels":2062,"number":2067,"owner":1991,"repository":1992,"state":2055,"title":2068,"updated_at":2069,"url":2070,"score":2071},"### Environment\n\n- Operating System: Darwin\r\n- Node Version: v18.18.2\r\n- Nuxt Version: 3.13.1\r\n- CLI Version: 3.13.1\r\n- Nitro Version: 2.9.7\r\n- Package Manager: bun@1.1.24\r\n- Builder: -\r\n- User Config: devtools, modules, eslint, runtimeConfig, site, mdc, image, components, strapi, i18n, vite, routeRules, formkit, compatibilityDate\r\n- Runtime Modules: @nuxtjs/strapi@1.12.0, @nuxt/image@1.8.0, @vueuse/nuxt@10.11.1, @nuxtjs/i18n@8.5.1, @nuxt/eslint@0.3.13, @nuxt/fonts@0.7.2, @nuxtjs/mdc@0.8.3, @formkit/nuxt@1.6.5, nuxt3-vuex-module@1.1.0, nuxt3-interpolation/index.cjs, nuxt-swiper@1.2.2, nuxt-marquee@1.0.4, @nuxtjs/seo@2.0.0-rc.20, @formkit/nuxt@1.6.5, @nuxt/ui@2.18.4\r\n- Build Modules: -\n\n### Version\n\nv2.18.4\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-dbk9vy?file=app.vue\n\n### Description\n\nEnter transition of sliderover Module not working properly. Instant appearing of elements (with sometimes slight but too quick transitions). Exit transition works fine. \r\n\r\nTried on Chrome, Firefox & Safari on Mac.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2063,2064],{"name":2002,"color":2003},{"name":2065,"color":2066},"upstream","78bddb",2127,"[Slideover/Modal] Enter transition not working","2024-09-20T14:03:47Z","https://github.com/nuxt/ui/issues/2127",0.75091964,{"description":2073,"labels":2074,"number":2079,"owner":1991,"repository":1992,"state":2055,"title":2080,"updated_at":2081,"url":2082,"score":2083},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.10.0\n- Nuxt Version: 3.13.2\n- CLI Version: 3.14.0\n- Nitro Version: 2.9.7\n- Package Manager: pnpm@9.12.1\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Version\n\nv2.18.7\n\n### Reproduction\n\n-\n\n### Description\n\nI'm using downloaded font awesome 6 svg's in my assets folder, but somehow I can't override the surround icons.\n\n**nuxt.config.ts**\n```ts\n// @nuxt/icon (handled by @nuxt/ui)\nicon: {\n customCollections: [\n {\n prefix: \"fa-light\",\n dir: \"./assets/icons/font-awesome/light\",\n },\n {\n prefix: \"fa-brands\",\n dir: \"./assets/icons/font-awesome/brands\",\n },\n ],\n},\n```\n\n**app.config.js**\n```js\nexport default defineAppConfig({\n ui: {\n icons: {\n prev: \"fa-light:arrow-left\",\n next: \"fa-light:arrow-right\",\n },\n\n content: {\n surround: {\n icon: {\n prev: \"fa-light:arrow-left\",\n next: \"fa-light:arrow-right\",\n },\n },\n },\n },\n},\n```\n\nAdding it to `icons.prev` and `icons.next` is not working at all.\n\nOverriding it in `content.surround.icon....` is working (class-wise), but simply not adding the icons..\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2075,2076],{"name":2002,"color":2003},{"name":2077,"color":2078},"duplicate","cfd3d7",2447,"Surround icons not updating with custom font","2024-11-10T21:45:37Z","https://github.com/nuxt/ui/issues/2447",0.7511124,{"description":2085,"labels":2086,"number":2087,"owner":1991,"repository":2088,"state":2055,"title":2089,"updated_at":2090,"url":2091,"score":2092},"### Environment\n\nhttps://nuxt.com/\n\n### Reproduction\n\nUse Google and Firefox to open https://nuxt.com/, and you can find that the automatic recognition on Firefox is wrong, showing the dark mode\r\n\r\n\r\n\n\n### Describe the bug\n\nfirefox Developer Edition 131.0b5\r\nAnd how to turn off dark mode?\r\nI tried but it didn't work\r\ncolorMode: {\r\n preference: 'light'\r\n},\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[],1663,"nuxt.com","Dark mode does not work properly on Firefox Developer Edition","2024-11-21T01:08:22Z","https://github.com/nuxt/nuxt.com/issues/1663",0.7580965,{"description":2094,"labels":2095,"number":2098,"owner":1991,"repository":1992,"state":2055,"title":2099,"updated_at":2100,"url":2101,"score":2102},"### Environment\n\n```\nNuxt project info: 4:16:28 PM\n\n------------------------------\n- Operating System: Linux\n- Node Version: v20.14.0\n- Nuxt Version: 3.14.159\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@8.8.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@2.19.2, @nuxt/eslint@0.3.13, @nuxt/test-utils/module@3.14.4, @pinia/nuxt@0.5.5, @vueuse/nuxt@10.11.1, nuxt-shiki@0.3.0, nuxt-svgo@4.0.8\n- Build Modules: -\n------------------------------\n```\n\n### Version\n\nv2.19.2\n\n### Reproduction\n\nI don't know how to reproduce it unfortunately.\n\n### Description\n\nI often have a bunch of `[Icon] loading icon `heroicons:magnifying-glass` timed out after 500ms` on firefox\n\n\n\nit impacts the breadcrumb component\n\nbut also other `\u003CUIcon>` instances\n\nDo you have any idea about where those timeouts maybe coming from \n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2096,2097],{"name":2002,"color":2003},{"name":2065,"color":2066},2573,"Icon timeout despite having installed the @iconify-json/heroicons collection","2024-11-08T16:41:20Z","https://github.com/nuxt/ui/issues/2573",0.75899124,["Reactive",2104],{},["Set"],["ShallowReactive",2107],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"RqmZfT-5qCka7KVazvC3WRboNRtT_Cjfwme-ZzZI3Ws":-1},"/nuxt/ui/3696"]