\n\u003C/template>\n```\n\n\n\n\n\n### Description\n\nName attribute should be `name[]`, not `[name][]`.",[3044,3047,3050],{"name":3045,"color":3046},"bug","d73a4a",{"name":3048,"color":3049},"v3","49DCB8",{"name":3051,"color":3052},"triage","ffffff",2740,"ui","UInputMenu has wrong name attribute when multiple active","2024-11-23T20:48:26Z","https://github.com/nuxt/ui/issues/2740",0.735774,{"description":3060,"labels":3061,"number":3062,"owner":3022,"repository":3063,"state":3024,"title":3064,"updated_at":3065,"url":3066,"score":3067},"It would be nice if you could alias and entire collection instead of just an icon.\n\nRight now I do it this way.\n```ts\nconst createIconAliases = (newPrefix: string, iconifyJson: IconifyJSON) => {\n const exisitngPrefix = iconifyJson.prefix;\n const icons = Object.keys(iconifyJson.icons);\n\n return icons.reduce(\n (object, value) => {\n object[`${newPrefix}:${value}`] = `${exisitngPrefix}:${value}`;\n return object;\n },\n {} as Record\u003Cstring, string>,\n );\n};\n```",[],362,"icon","[feature request] Allow aliasing entire collection","2025-02-21T20:10:51Z","https://github.com/nuxt/icon/issues/362",0.73733956,{"description":3069,"labels":3070,"number":3079,"owner":3022,"repository":3036,"state":3024,"title":3080,"updated_at":3081,"url":3082,"score":3083},"Hey, firstly thank you for making this plugin, it looks very useful :)\r\n\r\nRunning this module seems to run the whole nuxt environment, including the plugins, and we have a plugin that makes a api call. We normally just mock the module where we import the api function but it doesn't seem to work in this case. For example:\r\n```\r\n// somePlugin.ts\r\nimport { fetchProducts } from \"~/service/products\";\r\n\r\nexport default defineNuxtPlugin(async () => {\r\n const products = fetchProducts();\r\n // do something with the products\r\n});\r\n```\r\n\r\n```\r\n// SomeComponent.nuxt.spec.js\r\nimport { describe, it, expect, vi } from \"vitest\";\r\nimport { shallowMount } from \"@vue/test-utils\";\r\nimport SomeComponent from \"../SomeComponent.vue\";\r\n\r\n// trying to mock the products service so that the real api doesn't get called during the plugins\r\nvi.mock(\"~/service/products\");\r\n\r\ndescribe(\"SomeComponent\", async () => {\r\n it(\"Is a Vue instance\", () => {\r\n const wrapper = shallowMount(SomeComponent);\r\n expect(wrapper.vm).toBeTruthy();\r\n });\r\n});\r\n```\r\n\r\nI assume these mocks only work for the component that we are testing and not for the plugins in the nuxt environment for example. Do you have a suggestion about how to solve this?",[3071,3074,3076],{"name":3072,"color":3073},"documentation","0075ca",{"name":3019,"color":3075},"a2eeef",{"name":3077,"color":3078},"vitest-environment","b60205",544,"mocking plugins used within nuxt","2024-07-23T12:17:21Z","https://github.com/nuxt/test-utils/issues/544",0.7424412,{"description":3085,"labels":3086,"number":3091,"owner":3022,"repository":3054,"state":3092,"title":3093,"updated_at":3094,"url":3095,"score":3096},"### 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```",[3087,3090],{"name":3088,"color":3089},"question","d876e3",{"name":3048,"color":3049},2772,"closed","@apply Tailwind CSS class in a component's `\u003Cstyle>` tag","2024-12-09T11:14:28Z","https://github.com/nuxt/ui/issues/2772",0.6939608,{"description":3098,"labels":3099,"number":3102,"owner":3022,"repository":3054,"state":3092,"title":3103,"updated_at":3104,"url":3105,"score":3106},"### 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_",[3100,3101],{"name":3045,"color":3046},{"name":3048,"color":3049},2349,"UInput causes error","2024-10-10T14:15:25Z","https://github.com/nuxt/ui/issues/2349",0.69812226,{"description":3108,"labels":3109,"number":3112,"owner":3022,"repository":3054,"state":3092,"title":3113,"updated_at":3114,"url":3115,"score":3116},"### 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```",[3110,3111],{"name":3045,"color":3046},{"name":3048,"color":3049},3513,"Nuxt 3.16.0 - ships with @unhead2","2025-03-10T08:49:36Z","https://github.com/nuxt/ui/issues/3513",0.7107268,{"description":3118,"labels":3119,"number":3122,"owner":3022,"repository":3054,"state":3092,"title":3123,"updated_at":3124,"url":3125,"score":3126},"### 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",[3120,3121],{"name":3045,"color":3046},{"name":3048,"color":3049},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.71355814,{"description":3128,"labels":3129,"number":3130,"owner":3022,"repository":3063,"state":3092,"title":3131,"updated_at":3132,"url":3133,"score":3134},"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.7183818,["Reactive",3136],{},["Set"],["ShallowReactive",3139],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fxZ5j7XLdEEe218xFpyETHs6LZJRCCD5SZ_kpxDeHaU8":-1},"/nuxt/ui/2365"]