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_",[3057,3058],{"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.65397996,{"description":3065,"labels":3066,"number":3074,"owner":3019,"repository":3036,"state":3037,"title":3075,"updated_at":3076,"url":3077,"score":3078},"### Description\n\nBreadcrumb uses Link (and LinkBase) to implement the item rendering and navigation. Link (through LinkBase) in itself supports `onClick` event/prop. Now, passing `onClick` to the breadcrumb item does not go all the way through to the LinkBase, and thus prevents the fine-grained control of the Breadcrumb component.\n\nThe usage would look something like this:\n```\n\u003Ctemplate>\n \u003CUBreadcrumb :items=\"items\" />\n\u003C/template>\n\u003Cscript setup>\nconst items = [\n { label: \"click for one\", onClick: () => alert(\"1\"), to: \"/one\" },\n { label: \"click for two\", onClick: () => alert(\"2\"), to: \"/two\" },\n]\n\u003C/script>\n```\n\nMy need is to have some secondary effects happening besides the navigation when the user clicks on a breadcrumb item.\n\n### Additional context\n\n_No response_",[3067,3070,3071],{"name":3068,"color":3069},"enhancement","a2eeef",{"name":3033,"color":3034},{"name":3072,"color":3073},"triage","ffffff",3631,"Support for `onClick` event on Breadcrumb items","2025-03-24T18:08:16Z","https://github.com/nuxt/ui/issues/3631",0.6551467,{"description":3080,"labels":3081,"number":3086,"owner":3019,"repository":3036,"state":3037,"title":3087,"updated_at":3088,"url":3089,"score":3090},"### 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```",[3082,3085],{"name":3083,"color":3084},"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.655835,{"description":3092,"labels":3093,"number":3096,"owner":3019,"repository":3097,"state":3037,"title":3098,"updated_at":3099,"url":3100,"score":3101},"(reported on discord) you can see by hard-reloading https://nuxt.com/modules?q=svg, for example.\r\n\r\nprobably similar to https://github.com/nuxt/nuxt.com/issues/1417",[3094],{"name":3030,"color":3095},"ff281a",1455,"nuxt.com","query parameters on module page result in hydration mismatch","2025-03-24T22:03:27Z","https://github.com/nuxt/nuxt.com/issues/1455",0.6559594,{"description":3103,"labels":3104,"number":3106,"owner":3019,"repository":3036,"state":3037,"title":3107,"updated_at":3108,"url":3109,"score":3110},"### 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_",[3105],{"name":3068,"color":3069},2168,"Make an inplace editable table","2024-09-11T14:14:15Z","https://github.com/nuxt/ui/issues/2168",0.65760285,{"description":3112,"labels":3113,"number":3115,"owner":3019,"repository":3036,"state":3037,"title":3116,"updated_at":3117,"url":3118,"score":3119},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v20.15.1\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.16.0\n- Nitro Version: -\n- Package Manager: pnpm@9.12.3\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@2.19.2, @nuxt/image@1.8.1, @formkit/auto-animate@0.8.2\n- Build Modules: -\n\n### Version\n\nv2.19\n\n### Reproduction\n\nAlready added in description\n\n### Description\n\nI have 2 inputs\n\nI want when I press enter on input2 the focus changes to input1.\n\nThis behaviour working fine with normal **input** but not with **UInput** \n\n**Working example input**\n\n```\n\u003Ctemplate>\n \u003Cdiv>\n \u003Cinput\n ref=\"firstInput\"\n v-model=\"firstValue\"\n @keyup.enter=\"handleFirstInputEnter\"\n placeholder=\"First Input\"\n />\n \u003Cinput\n ref=\"secondInput\"\n v-model=\"secondValue\"\n @keyup.enter=\"handleSecondInputEnter\"\n placeholder=\"Second Input\"\n />\n \u003C/div>\n\u003C/template>\n\n\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst firstInput = ref(null);\nconst secondInput = ref(null);\n\nconst firstValue = ref(\"\");\nconst secondValue = ref(\"\");\n\nconst handleFirstInputEnter = () => {\n // Any specific logic for first input enter\n};\n\nconst handleSecondInputEnter = () => {\n // Switch focus back to first input when enter is pressed in second input\n firstInput.value.focus();\n};\n\u003C/script>\n```\n\n**Not working example UInput**\n\n```\n\u003Ctemplate>\n \u003Cdiv>\n \u003CUInput\n ref=\"firstInput\"\n v-model=\"firstValue\"\n @keyup.enter=\"handleFirstInputEnter\"\n placeholder=\"First Input\"\n />\n \u003CUInput\n ref=\"secondInput\"\n v-model=\"secondValue\"\n @keyup.enter=\"handleSecondInputEnter\"\n placeholder=\"Second Input\"\n />\n \u003C/div>\n\u003C/template>\n\n\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst firstInput = ref(null);\nconst secondInput = ref(null);\n\nconst firstValue = ref(\"\");\nconst secondValue = ref(\"\");\n\nconst handleFirstInputEnter = () => {\n // Any specific logic for first input enter\n};\n\nconst handleSecondInputEnter = () => {\n // Switch focus back to first input when enter is pressed in second input\n firstInput.value.focus();\n};\n\u003C/script>\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3114],{"name":3030,"color":3031},2841,"ref is not working probably for \u003CUInput>","2024-12-06T14:44:22Z","https://github.com/nuxt/ui/issues/2841",0.66628605,{"description":3121,"labels":3122,"number":3123,"owner":3019,"repository":3124,"state":3037,"title":3125,"updated_at":3126,"url":3127,"score":3128},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.14.0`\n- Nuxt Version: `3.16.0`\n- CLI Version: `3.22.5`\n- Nitro Version: `2.11.5`\n- Package Manager: `bun@1.2.4`\n- Builder: `-`\n- User Config: `runtimeConfig`, `modules`, `app`, `site`, `sitemap`, `robots`, `css`, `icon`, `image`, `ui`, `devtools`, `future`, `unhead`, `compatibilityDate`\n- Runtime Modules: `@nuxt/ui@3.0.0-beta.3`, `@pinia/nuxt@0.10.1`, `@nuxt/scripts@0.10.5`, `@nuxt/image@1.9.0`, `@nuxtjs/seo@2.2.0`\n- Build Modules: `-`\n\n### Reproduction\n\nnda\n\n### Describe the bug\n\nnr dev\n$ nuxt dev\nNuxt 3.16.0 with Nitro 2.11.5 nuxi 8:23:08 PM\n 8:23:08 PM\n ➜ Local: http://localhost:3003/\n ➜ Network: use --host to expose\n\n ➜ DevTools: press Shift + Option + D in the browser (v2.2.1) 8:23:10 PM\n\n\n✔ Nuxt Icon loaded local collection elfi with 70 icons 8:23:10 PM\nℹ Running with compatibility version 4 nuxt 8:23:10 PM\n✔ Vite client built in 190ms 8:23:11 PM\n✔ Vite server built in 528ms 8:23:12 PM\n\n[nitro 8:23:14 PM] ERROR Error: Could not load /\u003Cmy-path>/node_modules/unenv/dist/runtime/runtime/mock/empty.mjs (imported by node_modules/nuxt-og-image/dist/runtime/server/og-image/satori/instances.js): ENOENT: no such file or directory, open '/\u003Cmy-path>/node_modules/unenv/dist/runtime/runtime/mock/empty.mjs'\n\n\nundefined\n\n### Additional context\n\nUpgraded by \"nuxi upgrade -f\" from 3.15.4 and couldn't able to start properly with provided error.\nTried with unhead flag in nuxt.config - same error\n```\nunhead: {\n legacy: true,\n }\n```\n\n### Logs\n\n```shell-script\n\n```",[],414,"scripts","Nuxt 3.16.0 won't start properly nor dev nor build","2025-03-07T18:58:03Z","https://github.com/nuxt/scripts/issues/414",0.66944605,["Reactive",3130],{},["Set"],["ShallowReactive",3133],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fG8xEHBOxadYcxZ8aIcmy60E5BGyv-3zvM1QEXFLw-zw":-1},"/nuxt/ui/3644"]