\n\u003C/template>\n\n\u003Cscript setup>\nconst translationField = ref(null)\n\nfunction nextCard() {\n translationField.value.focus() // throws: 'focus is not a function'\n \n nextTick(() => {\n translationField.value.focus() // same error\n })\n\n // below works ok\n nextTick(() => {\n const input = translationField.value?.$el?.querySelector('input')\n if (input) {\n input.focus()\n }\n })\n}\n\u003C/script>\n```\n\n\n### Description\nStandard Vue method of using template ref (for setting a focus, here) throws: 'focus() is not a function'\nIn the above code snippet I included workaround (credits to Sonnet 3.5)\nTried it dozen of times and checked this place to see if it has not been solved earlier.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2034,2035,2036],{"name":1985,"color":1986},{"name":2003,"color":2004},{"name":1988,"color":1989},3644,"\u003CUInput> template ref does not work","2025-03-21T13:14:18Z","https://github.com/nuxt/ui/issues/3644",0.7097842,{"description":2043,"labels":2044,"number":2047,"owner":1991,"repository":1992,"state":2026,"title":2048,"updated_at":2049,"url":2050,"score":2051},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.13.1`\n- Nuxt Version: `3.15.4`\n- CLI Version: `3.22.2`\n- Nitro Version: `2.10.4`\n- Package Manager: `bun@1.2.2`\n- Builder: `-`\n- User Config: `compatibilityDate`, `ssr`, `extends`, `modules`, `css`, `components`, `ui`, `app`, `dayjs`, `icon`\n- Runtime Modules: `@nuxt/ui-pro@3.0.0-beta.2`, `dayjs-nuxt@2.1.11`\n- Build Modules: `-`\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-beta.2\n\n### Reproduction\n\n```ts\nexport default defineAppConfig({\n ui: {\n colors: {\n violet: 'violet',\n },\n },\n});\n```\n\n```ts\nexport default defineNuxtConfig({\n ui: {\n theme: {\n colors: [\n 'primary', 'secondary', 'tertiary',\n 'info', 'success', 'warning',\n 'error', 'violet'\n ]\n }\n },\n});\n\n```\n\n### Description\n\nSetting a custom color with the same name as the color causes some kind of cylical referernce in the css vars between NuxtUIv3 and TWv4.\n\n\n\n\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2045,2046],{"name":1985,"color":1986},{"name":2003,"color":2004},3426,"Setting custom color alias the same name as the color does not work","2025-03-08T12:22:25Z","https://github.com/nuxt/ui/issues/3426",0.71038157,{"description":2053,"labels":2054,"number":2059,"owner":1991,"repository":1992,"state":2026,"title":2060,"updated_at":2061,"url":2062,"score":2063},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.10.0\n- Nuxt Version: 3.14.159\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.12.1\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/content@2.13.4, @nuxt/ui@2.19.2, @nuxtjs/seo@2.0.0-rc.23, @kgierke/nuxt-basic-auth@1.7.0\n- Build Modules: -\n\n### Version\n\nv2.19.2\n\n### Reproduction\n\nhttps://stackblitz.com/edit/breadcrumb-outputs-class-string-instead-of-icon-2590?file=layouts%2Fdefault.vue\n\n### Description\n\nI'm using custom icons (font awesome 6 pro) locally, and I'm trying to change the icon of the breadcrumb. According to the [docs](https://ui.nuxt.com/components/breadcrumb#config), this should do it, but instead it is showing the class as content.\n\n```js\nexport default defineAppConfig({\n ui: {\n breadcrumb: {\n default: {\n divider: \"fa-light:caret-right\",\n },\n },\n }\n});\n\n---\n\nexport default defineNuxtConfig({\n extends: [\"@nuxt/ui-pro\"],\n modules: [\n \"@nuxt/content\",\n \"@nuxt/ui\"\n ],\n // @nuxt/icon (handled by @nuxt/ui)\n icon: {\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```\n\n\n\n\n### Additional context\n\nRelated issues #2447",[2055,2056],{"name":1985,"color":1986},{"name":2057,"color":2058},"upstream","78bddb",2590,"Breadcrumb outputs class string instead of icon","2024-12-22T21:31:32Z","https://github.com/nuxt/ui/issues/2590",0.718248,{"description":2065,"labels":2066,"number":2067,"owner":1991,"repository":2068,"state":2026,"title":2069,"updated_at":2070,"url":2071,"score":2072},"- Fetch API from GitHub\n- List files on the left\n- Display selected file on the right (we support syntax highlight on client-side)\n\n```md\n::code-explorer{repo=\"nuxt/framework\" branch=\"main\" path=\"examples/essentials/hello-world\"}\n::\n```\n\nWould be nice to imagine a simple design for it @R-mooon @SarahM19 ",[],1018,"nuxt.com","[Examples] Component to display the code from GitHub directory","2023-10-10T14:45:32Z","https://github.com/nuxt/nuxt.com/issues/1018",0.7296864,{"description":2074,"labels":2075,"number":2079,"owner":1991,"repository":1992,"state":2026,"title":2080,"updated_at":2081,"url":2082,"score":2083},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.14.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.12.0\n- Nitro Version: 2.11.8\n- Package Manager: pnpm@9.11.0\n- Builder: -\n- User Config: devtools, css, eslint, experimental, future, dayjs, imports, modules, vite, primevue, runtimeConfig, echo, sanctum, turnstile, compatibilityDate\n- Runtime Modules: @nuxt/ui-pro@3.0.2, @primevue/nuxt-module@4.3.3, @nuxt/image@1.10.0, nuxt-icon@0.6.10, dayjs-nuxt@2.1.11, nuxt-laravel-echo@0.2.3, @nuxtjs/leaflet@1.2.6, @vueuse/nuxt@10.11.1, @samk-dev/nuxt-vcalendar@1.0.4, nuxt-tour@0.0.34, @vee-validate/nuxt@4.15.0, @nuxt/eslint@0.5.7, nuxt-auth-sanctum@0.5.8, @nuxtjs/turnstile@0.6.3\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.2\n\n### Reproduction\n\n-\n\n### Description\n\nHey, this isn't exactly the same issue but it's somewhat related to #3186. I'm trying to wrap UInput in a custom component and want to expose all the props it uses. Here's what I tried:\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport type { InputProps } from '#ui/types'\n\nconst props = defineProps\u003CInputProps>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUInput\n v-bind=\"props\"\n :ui=\"{ root: 'w-full' }\"\n >\n \u003Ctemplate\n v-for=\"(_, name) in $slots\"\n #[name]=\"scope\"\n >\n \u003Cslot\n :name\n v-bind=\"scope ?? {}\"\n />\n \u003C/template>\n \u003C/UInput>\n\u003C/template>\n\n```\n\nThe issue is: I can access types exported from #ui/types/form, #ui/types/locale, and #ui/types/utils, but none of the component interfaces (like InputProps) are properly indexed or accessible through #ui/types.\n\nLooks like an indexing/alias resolution issue in Nuxt or WebStorm — but maybe the structure of the exports from #ui/types could be improved to help this?\n\nAny ideas or recommended workaround?\n\nMany thanks\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2076,2077,2078],{"name":1985,"color":1986},{"name":2003,"color":2004},{"name":1988,"color":1989},3775,"Incomplete type indexing from #ui/types — component interfaces missing","2025-04-03T10:24:29Z","https://github.com/nuxt/ui/issues/3775",0.7363395,{"description":2085,"labels":2086,"number":2089,"owner":1991,"repository":1992,"state":2026,"title":2090,"updated_at":2091,"url":2092,"score":2093},"### Environment\n\n-\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.16.0\n\n### Reproduction\n\n- \n\n### Description\n\nUpgraded all deps to the latest and bam Nuxt 3.16.0 is added. We get errors now as Nuxt UI 3 still ships with\n\n`'@unhead/vue': 1.11.20(vue@3.5.13(typescript@5.8.2))\n`\n\nAs of Nuxt 3.16.0 ships with @unhead2:\nhttps://nuxt.com/blog/v3-16#unhead-v2\n\nActual error:\n`[@nuxt/scripts 9:42:20 PM] ERROR Nuxt Scripts requires Unhead >= 2, you are using v1.11.20. Please run nuxi upgrade --clean to upgrade...`\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2087,2088],{"name":1985,"color":1986},{"name":2003,"color":2004},3513,"Nuxt 3.16.0 - ships with @unhead2","2025-03-10T08:49:36Z","https://github.com/nuxt/ui/issues/3513",0.73742545,["Reactive",2095],{},["Set"],["ShallowReactive",2098],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"AAXSlxs85ERSrCn18FCLV7h4BeUtni73r9Wi8v8-RSQ":-1},"/nuxt/ui/3756"]