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_",[2941,2944],{"name":2942,"color":2943},"bug","d73a4a",{"name":2945,"color":2946},"v3","49DCB8",2349,"closed","UInput causes error","2024-10-10T14:15:25Z","https://github.com/nuxt/ui/issues/2349",0.6848916,{"description":2954,"labels":2955,"number":2958,"owner":2905,"repository":2933,"state":2948,"title":2959,"updated_at":2960,"url":2961,"score":2962},"### 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```",[2956,2957],{"name":2942,"color":2943},{"name":2945,"color":2946},3513,"Nuxt 3.16.0 - ships with @unhead2","2025-03-10T08:49:36Z","https://github.com/nuxt/ui/issues/3513",0.7104372,{"description":2964,"labels":2965,"number":2969,"owner":2905,"repository":2933,"state":2948,"title":2970,"updated_at":2971,"url":2972,"score":2973},"### Description\n\nI am using the UFormGroup component. My use case is I want to have the label and/or description set dynamically based on a value coming from my Api.\n\nIs there any way of doing it and if yes were can I find some example?\n\nThank you\n",[2966],{"name":2967,"color":2968},"question","d876e3",3337,"UFormGroup dynamic Description","2025-02-17T02:56:17Z","https://github.com/nuxt/ui/issues/3337",0.7192522,{"description":2975,"labels":2976,"number":2979,"owner":2905,"repository":2933,"state":2948,"title":2980,"updated_at":2981,"url":2982,"score":2983},"### Description\n\nFor custom validation or for using the Form with Zod, etc. it would be great to have the common form field properties `touched` and `dirty` exposed.\n\n- `Touched` (opposite of `untouched`): A field is considered touched when a user has focused it OR changed it's value\n- `Dirty` (opposite of `pristine`): A field is considered dirty, if the value has changed (AND is different from its initial value). The second part is depending on the definition.\n\nYou can currently work around most of these by using a computed on the exposed `errors` ref and the state reactive, but for custom validation having these values natively exposed from the API would be very helpful.\n\n### Additional context\n\n_No response_",[2977,2978],{"name":2927,"color":2928},{"name":2945,"color":2946},2302,"Form validation properties","2025-01-24T18:10:45Z","https://github.com/nuxt/ui/issues/2302",0.7238092,{"description":2985,"labels":2986,"number":2990,"owner":2905,"repository":2991,"state":2948,"title":2992,"updated_at":2993,"url":2994,"score":2995},"```\r\nimport { describe, expect, test, beforeAll } from 'vitest'\r\nimport { setup } from '@nuxt/test-utils'\r\n\r\ndescribe('testing', async () => {\r\n await setup({})\r\n test('it works', () => {\r\n expect(true).toBe(true)\r\n })\r\n})\r\n\r\n```\r\n\r\n65.48s is a bit slow for a simple test not sure whats causing it ",[2987],{"name":2988,"color":2989},"vitest-environment","b60205",589,"test-utils","Simple test super slow","2024-03-21T16:57:05Z","https://github.com/nuxt/test-utils/issues/589",0.7259975,{"description":2997,"labels":2998,"number":3001,"owner":2905,"repository":2933,"state":2948,"title":3002,"updated_at":3003,"url":3004,"score":3005},"### Description\n\nI was trying to add a bit of margin around the Slideover to look like this:\n\n\n\nI think it can be done cleanly if there was a `\u003Cdiv>` wrapping the whole [DialogContent](https://github.com/nuxt/ui/blob/71728d3c3fa95255db03448c8b87fb75bc2d805c/src/runtime/components/Slideover.vue#L129C7-L129C21)\n\nHow do you suggest to achieve it? \nThank you",[2999,3000],{"name":2967,"color":2968},{"name":2945,"color":2946},3390,"How to add margins around the Slideover panel?","2025-02-25T15:36:40Z","https://github.com/nuxt/ui/issues/3390",0.72609484,{"description":3007,"labels":3008,"number":3011,"owner":2905,"repository":2933,"state":2948,"title":3012,"updated_at":3013,"url":3014,"score":3015},"### 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```",[3009,3010],{"name":2967,"color":2968},{"name":2945,"color":2946},2772,"@apply Tailwind CSS class in a component's `\u003Cstyle>` tag","2024-12-09T11:14:28Z","https://github.com/nuxt/ui/issues/2772",0.72824335,["Reactive",3017],{},["Set"],["ShallowReactive",3020],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fGaUcemEwuUSQO5QJN-X3NjfXh7Gb6AKKu6Xu5WKOrQg":-1},"/nuxt/ui/3226"]