\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```",[2929,2930,2931],{"name":2868,"color":2869},{"name":2886,"color":2887},{"name":2871,"color":2872},3644,"\u003CUInput> template ref does not work","2025-03-21T13:14:18Z","https://github.com/nuxt/ui/issues/3644",0.7194111,{"description":2938,"labels":2939,"number":2940,"owner":2874,"repository":2941,"state":2921,"title":2942,"updated_at":2943,"url":2944,"score":2945},"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.7206558,{"description":2947,"labels":2948,"number":2951,"owner":2874,"repository":2875,"state":2921,"title":2952,"updated_at":2953,"url":2954,"score":2955},"### 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```",[2949,2950],{"name":2868,"color":2869},{"name":2886,"color":2887},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":2957,"labels":2958,"number":2962,"owner":2874,"repository":2875,"state":2921,"title":2963,"updated_at":2964,"url":2965,"score":2966},"### 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```",[2959,2960,2961],{"name":2868,"color":2869},{"name":2886,"color":2887},{"name":2871,"color":2872},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":2968,"labels":2969,"number":2970,"owner":2874,"repository":2971,"state":2921,"title":2972,"updated_at":2973,"url":2974,"score":2975},"- 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,["Reactive",2977],{},["Set"],["ShallowReactive",2980],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fAAXSlxs85ERSrCn18FCLV7h4BeUtni73r9Wi8v8-RSQ":-1},"/nuxt/ui/3756"]