\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```",[3061,3062,3063],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3026,"color":3027},3644,"\u003CUInput> template ref does not work","2025-03-21T13:14:18Z","https://github.com/nuxt/ui/issues/3644",0.7194111,{"description":3070,"labels":3071,"number":3072,"owner":3029,"repository":3073,"state":3053,"title":3074,"updated_at":3075,"url":3076,"score":3077},"I have these fonts in my public/font directory:\n\n\nI set my font as a CSS var:\n\n\nI use that var, but with a bold weight:\n\n\nThe bold font is never loaded:\n\n\nRegular font weights and italic style work, but can't get the other weights to load.\n\n",[],343,"fonts","Font as a CSS var, not loading other weights","2024-10-23T08:47:08Z","https://github.com/nuxt/fonts/issues/343",0.72065574,{"description":3079,"labels":3080,"number":3083,"owner":3029,"repository":3030,"state":3053,"title":3084,"updated_at":3085,"url":3086,"score":3087},"### 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```",[3081,3082],{"name":3020,"color":3021},{"name":3023,"color":3024},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.7219595,{"description":3089,"labels":3090,"number":3094,"owner":3029,"repository":3030,"state":3053,"title":3095,"updated_at":3096,"url":3097,"score":3098},"### 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```",[3091,3092,3093],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3026,"color":3027},3775,"Incomplete type indexing from #ui/types — component interfaces missing","2025-04-03T10:24:29Z","https://github.com/nuxt/ui/issues/3775",0.7281365,{"description":3100,"labels":3101,"number":3102,"owner":3029,"repository":3103,"state":3053,"title":3104,"updated_at":3105,"url":3106,"score":3107},"- 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.7318853,{"description":3109,"labels":3110,"number":3114,"owner":3029,"repository":3030,"state":3053,"title":3115,"updated_at":3116,"url":3117,"score":3118},"### Environment\n\n- Nuxt version: `v.3.2.0`\n- Vue version: `v3.5.17`\n\n### Is this bug related to Nuxt or Vue?\n\nVue\n\n### Version\n\nv3.2.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/thirsty-snow-722czt?file=%2Fsrc%2FApp.vue&workspaceId=ws_An7GtePWxuFz84S5Ko1Dey\n\n### Description\n\n## Vue 3 + NuxtUI Pro: Components Not Working After Page Reload\n\nHello,\n\nI am using Vue 3 together with NuxtUI Pro during development. I have been trying to solve this issue for 2 days but unfortunately, I still haven’t found a solution.\n\n**Problem Summary:** \nWhen I modify the code on the page, everything works correctly with *hot module replacement* (HMR). However, when I fully reload the page (`F5`), the components do not render or work as expected.\n\nHere is the relevant template code:\n\n```vue\n\u003Ctemplate>\n \u003CUApp>\n \u003CUDashboardGroup>\n \u003CUDashboardSidebar \n collapsible\n resizable \n >\n \u003C/UDashboardSidebar>\n \n \u003CUDashboardPanel>\n \n \u003Ctemplate #header>\n \u003CUDashboardNavbar title=\"RİDES\" icon=\"i-lucide-house\">\n \u003Ctemplate #leading>\n \u003CUDashboardSidebarCollapse variant=\"subtle\" />\n \u003C/template>\n \u003C/UDashboardNavbar>\n \u003C/template>\n \n \u003Ctemplate #body>\n \u003CRouterView />\n \u003C/template>\n \n \u003C/UDashboardPanel>\n \u003C/UDashboardGroup>\n \u003C/UApp>\n\u003C/template>",[3111,3112,3113],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3026,"color":3027},4487,"Sidebar not collapsed after page reload [with Vite + Vue3 + Nuxtui Pro Development mode]","2025-07-08T12:17:31Z","https://github.com/nuxt/ui/issues/4487",0.73521155,{"description":3120,"labels":3121,"number":3125,"owner":3029,"repository":3103,"state":3053,"title":3126,"updated_at":3127,"url":3128,"score":3129},"Blocked by #468 \n\nThis will allow to edit this data on nuxt.com",[3122],{"name":3123,"color":3124},"enhancement","1ad6ff",563,"[Docs] Replace `_collections` in `v2` with slots and components","2023-02-15T12:30:48Z","https://github.com/nuxt/nuxt.com/issues/563",0.7386798,["Reactive",3131],{},["Set"],["ShallowReactive",3134],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fAAXSlxs85ERSrCn18FCLV7h4BeUtni73r9Wi8v8-RSQ":-1},"/nuxt/ui/3756"]