\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```",[2941,2944,2945],{"name":2942,"color":2943},"bug","d73a4a",{"name":2917,"color":2918},{"name":2920,"color":2921},3644,"closed","\u003CUInput> template ref does not work","2025-03-21T13:14:18Z","https://github.com/nuxt/ui/issues/3644",0.61862385,{"description":2953,"labels":2954,"number":2957,"owner":2903,"repository":2923,"state":2947,"title":2958,"updated_at":2959,"url":2960,"score":2961},"### 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_",[2955,2956],{"name":2942,"color":2943},{"name":2917,"color":2918},2349,"UInput causes error","2024-10-10T14:15:25Z","https://github.com/nuxt/ui/issues/2349",0.6375948,{"description":2963,"labels":2964,"number":2969,"owner":2903,"repository":2923,"state":2947,"title":2970,"updated_at":2971,"url":2972,"score":2973},"### 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```",[2965,2968],{"name":2966,"color":2967},"question","d876e3",{"name":2917,"color":2918},2772,"@apply Tailwind CSS class in a component's `\u003Cstyle>` tag","2024-12-09T11:14:28Z","https://github.com/nuxt/ui/issues/2772",0.6503754,{"description":2975,"labels":2976,"number":2979,"owner":2903,"repository":2923,"state":2947,"title":2980,"updated_at":2981,"url":2982,"score":2983},"### 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```",[2977,2978],{"name":2942,"color":2943},{"name":2917,"color":2918},3513,"Nuxt 3.16.0 - ships with @unhead2","2025-03-10T08:49:36Z","https://github.com/nuxt/ui/issues/3513",0.65972966,{"description":2985,"labels":2986,"number":2988,"owner":2903,"repository":2923,"state":2947,"title":2989,"updated_at":2990,"url":2991,"score":2992},"### Description\n\nWhen using a Table component, it would be a cool feature to allow the items to be modified in place and an event emitted. There arent really many good solutions for this in Vue ecosystem, that I know of. \n\n### Additional context\n\n_No response_",[2987],{"name":2914,"color":2915},2168,"Make an inplace editable table","2024-09-11T14:14:15Z","https://github.com/nuxt/ui/issues/2168",0.6694874,{"description":2994,"labels":2995,"number":2998,"owner":2903,"repository":2999,"state":2947,"title":3000,"updated_at":3001,"url":3002,"score":3003},"Hover color should be green on `ProseA`\n\n\n\nReading [typography tokens](https://github.com/nuxt-themes/typography/blob/main/tokens.config.ts), colors should be declared inside `tokens.config.ts` this way.\n\n(Tried with `colors` and `color`, both don't work)\n\n```js\nexport default defineTheme({\n typography: {\n color: {\n // palette() returns the good color scheme\n primary: palette('#00dc82')\n }\n }\n})\n```",[2996],{"name":2942,"color":2997},"ff281a",1076,"nuxt.com","[Typography] ProseA hover color not applied","2023-06-06T12:14:34Z","https://github.com/nuxt/nuxt.com/issues/1076",0.6723952,{"description":3005,"labels":3006,"number":3009,"owner":2903,"repository":2923,"state":2947,"title":3010,"updated_at":3011,"url":3012,"score":3013},"### Description\n\nThe Nuxt UI v2 dropdown has the option to open on hover or click. In v3 the only option available is click. \n\n\n\n### Additional context\n\n_No response_",[3007,3008],{"name":2914,"color":2915},{"name":2917,"color":2918},3322,"[DropdownMenu] (v3) missing mode prop for hover/click","2025-03-08T12:22:25Z","https://github.com/nuxt/ui/issues/3322",0.6756535,["Reactive",3015],{},["Set"],["ShallowReactive",3018],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fiLzhET8sAGMxMzSDPnWaldw6a2o02qHf6d_AKmj25XI":-1},"/nuxt/ui/3408"]