\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```",[3029,3032,3035],{"name":3030,"color":3031},"bug","d73a4a",{"name":3033,"color":3034},"v3","49DCB8",{"name":3036,"color":3037},"triage","ffffff",3644,"ui","closed","\u003CUInput> template ref does not work","2025-03-21T13:14:18Z","https://github.com/nuxt/ui/issues/3644",0.69387305,{"description":3046,"labels":3047,"number":3052,"owner":3019,"repository":3039,"state":3040,"title":3053,"updated_at":3054,"url":3055,"score":3056},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.12.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.17.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.9.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@2.20.0\n- Build Modules: -\n\n\n### Version\n\nv2.20.0\n\n### Reproduction\n\n`npx nuxi@latest init new-project`\n\nruns fine, then:\n\n`cd new-project`\n`npx nuxi@latest module add ui`\n\nresults in\n```\nInvalid module \"..mjs\" is not a valid package name imported from /Users/user/Sites/new-project\n...\nExperimentalWarning: CommonJS module /Users/user/Sites/new-project/nuxt-ui-app/.nuxt/nuxtui-tailwind.config.cjs is loading ES Module /Users/user/Sites/new-project/nuxt-ui-app/node_modules/@nuxt/ui/dist/runtime/utils/colors.js using require().\n```\n\n\n### Description\n\nNot sure why the most basic vanilla default install results in this error",[3048,3049],{"name":3030,"color":3031},{"name":3050,"color":3051},"upstream","78bddb",2935,"Installing nuxt ui on top of default latest nuxt install throws error","2025-03-07T07:47:03Z","https://github.com/nuxt/ui/issues/2935",0.7055738,{"description":3058,"labels":3059,"number":3064,"owner":3019,"repository":3039,"state":3040,"title":3065,"updated_at":3066,"url":3067,"score":3068},"### For what version of Nuxt UI are you asking this question?\n\nv3.0.0-alpha.x\n\n### Description\n\nIn my Nuxt 3 project (that uses Nuxt UI `v3.0.0-alpha9`), I have a Vue component like this:\n\n```vue\n\u003Cscript setup lang=\"ts\">\n...\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUContainer class=\"section\">\n ...\n \u003C/UContainer>\n\u003C/template>\n\n\u003Cstyle scoped lang=\"scss\">\n@use \"tailwindcss\";\n\n.section + .section {\n @apply mt-8 lg:mt-12;\n}\n\u003C/style>\n```\n\nThe problem is that `@apply mt-8 lg:mt-12;` doesn't work unless I add this to my `nuxt.config.ts`:\n```\npostcss: {\n plugins: {\n \"@tailwindcss/postcss\": {}, // https://tailwindcss.com/docs/v4-beta#using-post-css\n },\n},\n```\n\nHowever, when I do this, the Nuxt UI components stop working properly (e.g., Slideover renders at the bottom of the page and with wrong styling). How can I make the `@apply ...` work without breaking the Nuxt UI components?\n\nThis is my `package.json`:\n```json\n{\n \"name\": \"frontend\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"postinstall\": \"husky install && nuxt prepare\",\n \"dev\": \"nuxt dev\",\n \"build\": \"nuxt build\",\n \"preview\": \"nuxt preview\"\n },\n \"dependencies\": {\n \"@nuxt/ui\": \"^3.0.0-alpha.9\",\n \"nuxt\": \"latest\",\n \"nuxt-svgo\": \"latest\",\n \"vue\": \"latest\",\n \"vue-router\": \"latest\"\n },\n \"devDependencies\": {\n \"@commitlint/cli\": \"latest\",\n \"@commitlint/config-conventional\": \"latest\",\n \"husky\": \"latest\",\n \"sass\": \"latest\"\n }\n}\n```\n\nThis is my `nuxt.config.ts`:\n```ts\n// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n compatibilityDate: \"2024-04-03\",\n devtools: { enabled: false },\n modules: [\"@nuxt/ui\", \"nuxt-svgo\"],\n css: [\"@/assets/css/main.css\"],\n // postcss: {\n // plugins: {\n // \"@tailwindcss/postcss\": {}, // https://tailwindcss.com/docs/v4-beta#using-post-css\n // },\n // },\n appConfig: {\n // https://ui3.nuxt.dev/getting-started/theme#colors\n ui: {\n colors: {\n primary: \"primary\", // Defined in `assets/css/theme.css`\n secondary: \"secondary\", // Defined in `assets/css/theme.css`\n },\n },\n },\n});\n```\n\nThis is my `assets/main.css`:\n```css\n/* https://ui3.nuxt.dev/getting-started/installation/nuxt#import-tailwind-css-and-nuxt-ui-in-your-css */\n@import \"tailwindcss\";\n@import \"@nuxt/ui\";\n```",[3060,3063],{"name":3061,"color":3062},"question","d876e3",{"name":3033,"color":3034},2772,"@apply Tailwind CSS class in a component's `\u003Cstyle>` tag","2024-12-09T11:14:28Z","https://github.com/nuxt/ui/issues/2772",0.7081053,{"description":3070,"labels":3071,"number":3074,"owner":3019,"repository":3039,"state":3040,"title":3075,"updated_at":3076,"url":3077,"score":3078},"### Environment\n\n\n\nI get this error anytime I try and use \u003CUInput /> even without any other code.\n\n### Version\n\nv3.0.0-alpha.5\n\n### Reproduction\n\n`\u003Ctemplate>\n \u003CUContainer>\n \u003CUForm :schema=\"schema\" :state=\"state\" class=\"space-y-4\" @submit=\"onSubmit\">\n \u003CUFormField label=\"Code\" name=\"Code\"\n >\u003CUInput v-model=\"state.code\" />\n \u003C/UFormField>\n \u003C/UForm>\n \u003C/UContainer>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport { z } from 'zod';\nimport type { FormSubmitEvent } from '#ui/types';\n\nconst supabase = useSupabaseClient();\nconst toast = useToast();\n\n//Form\nconst schema = z.object({\n code: z.string().min(3),\n});\n\ntype Schema = z.output\u003Ctypeof schema>;\n\nconst state = reactive\u003CPartial\u003CSchema>>({\n code: undefined,\n});\n\nasync function onSubmit(event: FormSubmitEvent\u003CSchema>) {\n toast.add({\n title: 'Success',\n description: 'The form has been submitted.',\n color: 'success',\n });\n console.log(event.data);\n}\n\u003C/script>\n`\n\n### Description\n\nUInput causes an error\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3072,3073],{"name":3030,"color":3031},{"name":3033,"color":3034},2349,"UInput causes error","2024-10-10T14:15:25Z","https://github.com/nuxt/ui/issues/2349",0.7081901,{"description":3080,"labels":3081,"number":3083,"owner":3019,"repository":3039,"state":3040,"title":3084,"updated_at":3085,"url":3086,"score":3087},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.12.0`\n- Nuxt Version: `3.15.1`\n- CLI Version: `3.20.0`\n- Nitro Version: `2.10.4`\n- Package Manager: `pnpm@9.15.2`\n- Builder: `-`\n- User Config: `compatibilityDate`, `devtools`, `modules`\n- Runtime Modules: `@nuxt/ui@2.20.0`\n- Build Modules: `-`\n\n### Version\n\n2.20.0\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-jxcmyybr?file=app.vue\n\n### Description\n\nAfter looping though all items in useAppConfig().ui.colors, i get a false-positive error after assigning the item to a UBadge's color property, the color is still applied.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\nType 'string' is not assignable to type 'BadgeColor | undefined'.ts-plugin(2322)\nBadge.vue.d.ts(217, 5): The expected type comes from property 'color' which is declared here on type 'Partial\u003C{ size: BadgeSize; class: any; ui: { base?: string | undefined; rounded?: string | undefined; font?: string | undefined; size?: DeepPartial\u003C{ xs: string; sm: string; md: string; lg: string; }, any> | undefined; ... 4 more ...; default?: DeepPartial\u003C...> | undefined; } & { ...; } & { ...; }; ... 7 more ...; t...'\n(property) color?: BadgeColor | undefined\n```",[3082],{"name":3030,"color":3031},3077,"Type 'string' is not assignable to type 'BadgeColor | undefined'.ts-plugin(2322)","2025-01-13T16:33:02Z","https://github.com/nuxt/ui/issues/3077",0.71189207,{"description":3089,"labels":3090,"number":3093,"owner":3019,"repository":3039,"state":3040,"title":3094,"updated_at":3095,"url":3096,"score":3097},"### 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```",[3091,3092],{"name":3030,"color":3031},{"name":3033,"color":3034},3513,"Nuxt 3.16.0 - ships with @unhead2","2025-03-10T08:49:36Z","https://github.com/nuxt/ui/issues/3513",0.7146626,{"description":3099,"labels":3100,"number":3104,"owner":3019,"repository":3039,"state":3040,"title":3105,"updated_at":3106,"url":3107,"score":3108},"### 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```",[3101,3102,3103],{"name":3030,"color":3031},{"name":3033,"color":3034},{"name":3036,"color":3037},3775,"Incomplete type indexing from #ui/types — component interfaces missing","2025-04-03T10:24:29Z","https://github.com/nuxt/ui/issues/3775",0.71561444,{"description":3110,"labels":3111,"number":3118,"owner":3019,"repository":3119,"state":3040,"title":3120,"updated_at":3121,"url":3122,"score":3123},"I've explored other font providers, looks like `fontsource` is also quite promising.\r\n\r\nCurrently most of its fonts are from Google Fonts, along with some icons and some other fonts. It's also the service that Cloudflare Fonts is fetching from.\r\n\r\n@danielroe Would you like to include this font provider? If so, I'd like to work on it.\r\n\r\nDocs: https://fontsource.org/docs",[3112,3115],{"name":3113,"color":3114},"enhancement","a2eeef",{"name":3116,"color":3117},"provider","1161A4",65,"fonts","feat: fontsource provider","2024-03-20T13:12:12Z","https://github.com/nuxt/fonts/issues/65",0.72075117,{"description":3125,"labels":3126,"number":3127,"owner":3019,"repository":3020,"state":3040,"title":3128,"updated_at":3129,"url":3130,"score":3131},"My folder structure looks the same as it is described in the documentation (https://nuxt.com/modules/icon#custom-local-collections):\n\n`assets/my-icons/photogrammetry.svg`\n\nHowever, I load content from a json file:\n\n```json\n{\n \"data\": {\n \"0\": {\n \"title\": \"Video- & Photography\",\n \"icon\": \"my-icon:photogrammetry\",\n \"iconColor\": \"text-cyan-400\",\n [...]\n },\n```\n\n... into the component:\n\n```vue\n\u003Cscript setup>\nimport services from \"/public/jsons/services.json\"\n...\n\u003C/script>\n\n\u003Ctemplate>\n[...]\n \u003Cdiv class=\"[ card ] absolute\" :class=\"service.iconColor\">\n \u003CIcon :name=\"service.icon\" :color=\"service.iconColor\" size=\"10rem\" />\n \u003C/div>\n[...]\n\u003C/template>\n```\n\nThe icon (which is and remains black) does not accept any color, while any standard implementation (icon from a downloaded icon set like mdi) does indeed change the color of an icon.\n\n(Just in case this is not an error: What kind of \"treatment\" do I have to apply to make my icon accept color?)",[],307,"custom local collections do not accept props like color","2024-11-23T10:19:42Z","https://github.com/nuxt/icon/issues/307",0.72305,["Reactive",3133],{},["Set"],["ShallowReactive",3136],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fqTRWiphoZPdShB02H5fTwFXOX6m3Y7GAsdIOhcJQRs0":-1},"/nuxt/ui/2725"]