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_",[3212,3215],{"name":3213,"color":3214},"bug","d73a4a",{"name":3216,"color":3217},"v3","49DCB8",2349,"ui","closed","UInput causes error","2024-10-10T14:15:25Z","https://github.com/nuxt/ui/issues/2349",0.7352476,{"description":3226,"labels":3227,"number":3232,"owner":3193,"repository":3219,"state":3220,"title":3233,"updated_at":3234,"url":3235,"score":3236},"### 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```",[3228,3231],{"name":3229,"color":3230},"question","d876e3",{"name":3216,"color":3217},2772,"@apply Tailwind CSS class in a component's `\u003Cstyle>` tag","2024-12-09T11:14:28Z","https://github.com/nuxt/ui/issues/2772",0.7416415,{"description":3238,"labels":3239,"number":3242,"owner":3193,"repository":3219,"state":3220,"title":3243,"updated_at":3244,"url":3245,"score":3246},"### 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```",[3240,3241],{"name":3213,"color":3214},{"name":3216,"color":3217},3513,"Nuxt 3.16.0 - ships with @unhead2","2025-03-10T08:49:36Z","https://github.com/nuxt/ui/issues/3513",0.7439597,{"labels":3248,"number":3258,"owner":3193,"repository":3193,"state":3220,"title":3259,"updated_at":3260,"url":3261,"score":3262},[3249,3252,3255],{"name":3250,"color":3251},"stale","ffffff",{"name":3253,"color":3254},"pending triage","E99695",{"name":3256,"color":3257},"2.x","d4c5f9",10322,"nuxt build found render link tag insert repeat","2023-01-22T15:48:28Z","https://github.com/nuxt/nuxt/issues/10322",0.74677366,{"description":3264,"labels":3265,"number":3270,"owner":3193,"repository":3193,"state":3220,"title":3271,"updated_at":3272,"url":3273,"score":3274},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v20.18.2\n- Nuxt Version: 3.17.2\n- CLI Version: 3.25.0\n- Nitro Version: 2.11.11\n- Package Manager: npm@10.8.2\n- Builder: -\n- User Config: css, build, vite, sourcemap, pages, components, routeRules, runtimeConfig, modules, critters, security, nitro, i18n, compatibilityDate\n- Runtime Modules: @nuxtjs/i18n@9.3.3, nuxt-security@1.1.0, @nuxtjs/critters@0.8.0, @nuxt/image@1.3.0\n- Build Modules: -\n------------------------------\n\n### Reproduction\n\nconst file = new File([\"Hello, world!\"], \"my-file.txt\", { type: \"text/plain\" }); //used for reproduction - in actual code this is passed through a model reference from the file input component\nlet form = new FormData();\nform.append('file', file); // file is included as part of the form where File is an uploaded file\n const requestOptions = {\n method: \"POST\",\n body: form,\n };\n const { data, pending, error } = await useFetch(\"endpoint to upload to\", requestOptions);\n\n### Describe the bug\n\nAfter upgrading to Nuxt 3.17.2, we are getting an error \"Error: Cannot serialize File\" when uploading. \n\n### Additional context\n\nWe use Vuetify v3.7.19 for the file input capability. Reverting to 3.16.1 fixes this issue. \n\n### Logs\n\n```shell-script\n\n```",[3266,3267],{"name":3253,"color":3254},{"name":3268,"color":3269},"possible regression","B90A42",32059,"Files unable to upload after upgrade from 3.16.1 - 3.17.2","2025-05-09T13:21:52Z","https://github.com/nuxt/nuxt/issues/32059",0.74721724,{"description":3276,"labels":3277,"number":3280,"owner":3193,"repository":3219,"state":3220,"title":3281,"updated_at":3282,"url":3283,"score":3284},"### Environment\n\nN/A\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\ncommit: 64b703df8d0a7133a381bfcc7af07644d5d15d4c\n\n### Reproduction\n\n```vue\n\u003Ctemplate>\n \u003Cdiv>\n \u003CUSlideover side=\"left\">\n \u003CUButton label=\"Open Slideover\" color=\"neutral\" variant=\"subtle\" />\n \u003Ctemplate #content>\n \u003CUButton label=\"Show toast\" color=\"neutral\" variant=\"outline\" @click=\"showToast\" />\n \u003C/template>\n \u003C/USlideover>\n\n \u003Cbr>\n\n \u003CUModal>\n \u003CUButton label=\"Open Modal\" color=\"neutral\" variant=\"subtle\" />\n \u003Ctemplate #content>\n \u003CUButton label=\"Show toast\" color=\"neutral\" variant=\"outline\" @click=\"showToast\" />\n \u003C/template>\n \u003C/UModal>\n \u003C/div>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nconst toast = useToast()\n\nfunction showToast() {\n toast.add({\n title: 'Test',\n duration: 60 * 1000\n })\n}\n\u003C/script>\n```\n\n### Description\nFollowing #2404 resolved via b0be26d67feab467ac5862edd82e52df03a5091c\n\nWhile a Slideover or Modal are open trigger a Toaster and try to interact with it.\n\n\nhttps://github.com/user-attachments/assets/945c1f96-7556-42a6-b7e7-f88373b6e38f\n\n",[3278,3279],{"name":3213,"color":3214},{"name":3216,"color":3217},2646,"[v3] Toaster gets rendered behind Slideover's and Modal's overlays","2024-11-15T10:59:18Z","https://github.com/nuxt/ui/issues/2646",0.7478964,{"description":3286,"labels":3287,"number":3288,"owner":3193,"repository":3194,"state":3220,"title":3289,"updated_at":3290,"url":3291,"score":3292},"i get icon is not found locally , render mode : css\r\n\r\n\r\n",[],194,"[Icon] Collection [ any Collection name ] is not found locally , while i installed @iconify/json","2024-07-20T22:05:41Z","https://github.com/nuxt/icon/issues/194",0.748288,{"description":3294,"labels":3295,"number":3288,"owner":3193,"repository":3299,"state":3220,"title":3300,"updated_at":3301,"url":3302,"score":3292},"### 🆒 Your use case\n\nDepending on the type of device or browser agent, some scripts are not needed and only affect the results, e.g. in pagespeed negatively.\r\n\r\nIn the example below, I created a code that loads analytical scripts only if the user agent is not a crawler. I used the `@nuxtjs/device` module for this\r\n\r\n```js\r\nconst { isCrawler } = useDevice()\r\n\r\nif (!isCrawler) {\r\n\tuseScriptXPixel({ id: 'xx' })\r\n\tuseScriptClarity({ id: 'xx' })\r\n\tuseScriptMetaPixel({ id: 'xx' })\r\n\tuseScriptGoogleAnalytics({ id: 'G-xx' })\r\n\tuseScriptCloudflareWebAnalytics({ token: 'xx' })\r\n\r\n\tuseScript('https://cdn.xx.net/storage/xx/client.js', {\r\n\t\tbundle: true,\r\n\t})\r\n}\r\n\r\n```\n\n### 🆕 The solution you'd like\n\nIt would be nice to have a direct option to load scripts depending on the device based on:\r\n\r\n```js\r\nuseScript('https://scripts.com/script.js', {\r\n\tdevice: 'desktop|mobile'\r\n})\r\n```\n\n### 🔍 Alternatives you've considered\n\n_No response_\n\n### ℹ️ Additional info\n\n_No response_",[3296],{"name":3297,"color":3298},"enhancement","a2eeef","scripts","Scripts loaded depending on \"device\"","2024-08-09T09:41:46Z","https://github.com/nuxt/scripts/issues/194",["Reactive",3304],{},["Set"],["ShallowReactive",3307],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f7VHypw8sA5I1pX4bErsLA-G0DTseQquOjxB9yHBaMMQ":-1},"/nuxt/ui/3599"]