\n \u003Cspan class=\"flex items-center gap-2 font-semibold text-lg logo\">example\u003C/span>\n \u003C/div>\n \u003C/template>\n \u003CUNavigationMenu\n orientation=\"vertical\"\n :items=\"links\"\n />\n \u003Cdiv class=\"flex-1\" />\n \u003CUNavigationMenu\n orientation=\"vertical\"\n :items=\"footerLinks\"\n />\n \u003CUSeparator class=\"sticky bottom-0\" />\n \u003Ctemplate #footer>\n \u003Cspan class=\"text-xs text-neutral-500 tracking-tight\">Version {{ useRuntimeConfig().public.version }}\u003C/span>\n \u003C/template>\n \u003C/UDashboardSidebar>\n\n```\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2931,2932,2933],{"name":2899,"color":2900},{"name":2871,"color":2872},{"name":2934,"color":2935},"pro","5BD3CB",3549,"closed","injection \"Symbol(nuxt-ui.locale-context)\" not found","2025-03-18T11:12:44Z","https://github.com/nuxt/ui/issues/3549",0.68109626,{"description":2943,"labels":2944,"number":2948,"owner":2874,"repository":2875,"state":2937,"title":2949,"updated_at":2950,"url":2951,"score":2952},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.11.0\n- Nuxt Version: 3.16.0\n- CLI Version: 3.22.5\n- Nitro Version: 2.11.6\n- Package Manager: pnpm@10.2.1\n- Builder: -\n- User Config: devtools, modules, css, future, compatibilityDate\n- Runtime Modules: @nuxt/ui@3.0.0, @nuxt/eslint@1.2.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.16.0\n\n### Reproduction\n\nhttps://github.com/deetz99/ui3-layer-test\n\n**Nuxt UI 2 working as expected**\nhttps://github.com/deetz99/ui2-layer-test\n\n### Description\n\nTailwind classes aren't resolved when using layers.\n\nAs seen in the repro, when using `pnpm dev` to run the .playground, the header, footer and layout styles are missing. \n\nUButton is still rendered correctly with the custom blue in the layer main.css file.\n\n`npx nuxi dev` (run the layer) renders the header, footer and layout correctly.\n\nAm I missing something here?\n\n## pnpm dev\n\n\u003Cimg width=\"1720\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/245bae83-2c86-42d1-a883-e472da30e6f7\" />\n\n## npx nuxi dev\n\n\u003Cimg width=\"1717\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/c362da21-f5f9-4c7d-a91c-f60bf6de9c0b\" />\n\n### Additional context\n\nThe classes are recognized in the .playground it seems. If I redefine the header, footer and layout in the playground they are displayed correctly. \n\n[header/footer/layout added to .playground](https://github.com/deetz99/ui3-layer-test/tree/test)\n\nIt seems that the styles aren't applied to the components that come from the layer.\n\n### Logs\n\n```shell-script\n\n```",[2945,2946,2947],{"name":2899,"color":2900},{"name":2871,"color":2872},{"name":2888,"color":2889},3544,"Tailwind classes missing when using layers","2025-03-14T19:00:15Z","https://github.com/nuxt/ui/issues/3544",0.68498933,{"description":2954,"labels":2955,"number":2961,"owner":2874,"repository":2875,"state":2937,"title":2962,"updated_at":2963,"url":2964,"score":2965},"### Description\n\nIm using a prefix in nuxt.ui.config for nuxtui components\n```\n // nuxt ui settings\n ui: {\n colorMode: false, // disable light dark\n prefix: \"Nuxtui\", // component name prefix\n },\n```\n\nNow when I use the code from the table documentation (https://ui3.nuxt.dev/components/table#columns)\nI am getting a warning that UAvatar (which is linked to UBadge somehow) should be defined as custom Element.\n\n\n\n```\nconst nuxtuiBadge = resolveComponent(\"NuxtuiBadge\");\n\n....\n\ncell: ({ row }) => {\n const color = {\n true: \"success\" as const,\n false: \"error\" as const,\n }[row.getValue(\"isActive\") as string];\n\n return h(\n nuxtuiBadge,\n { class: \"capitalize\", variant: \"subtle\", color },\n () => (row.getValue(\"isActive\") ? \"Aktiv\" : \"Inaktiv\")\n );\n},\n\n....\n```\n\n\nDefining UAvatar as a custom element in nuxt.config solves the warning but isnt it a bug?",[2956,2959,2960],{"name":2957,"color":2958},"duplicate","cfd3d7",{"name":2868,"color":2869},{"name":2871,"color":2872},3218,"UAvatar warning when using nuxtui prefix, UBadge and h in table cell","2025-02-01T11:31:15Z","https://github.com/nuxt/ui/issues/3218",0.7060635,{"description":2967,"labels":2968,"number":2971,"owner":2874,"repository":2875,"state":2937,"title":2972,"updated_at":2973,"url":2974,"score":2975},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v20.12.0\n- Nuxt Version: 3.15.4\n- CLI Version: 3.21.1\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@10.4.1\n- Builder: -\n- User Config: extends, modules, $production, devtools, app, css, site, runtimeConfig, sourcemap, future, experimental, compatibilityDate, nitro, eslint, linkChecker, sitemap\n- Runtime Modules: @nuxt/ui-pro@3.0.0-alpha.13, @nuxtjs/seo@2.1.1, @nuxt/content@3.1.1, @sentry/nuxt/module@8.55.0\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.13\n\n### Reproduction\n\nNo reproduction is needed. Prop.state is mutated.\n\n### Description\n\nThe current implementation of the Form component has two significant issues:\n\n\n1. **Direct Prop Mutation**: The component directly mutates its `state` prop, which violates Vue's fundamental rules about prop mutation. From Vue's documentation: [https://vuejs.org/guide/components/props.html#one-way-data-flow](https://vuejs.org/guide/components/props.html#one-way-data-flow)\n> \"All props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This prevents child components from accidentally mutating the parent's state, which can make your app's data flow harder to understand.\"\n\n2. **Breaks Immutable State Patterns**: The direct mutation approach is incompatible with modern state management patterns that rely on immutable state updates.\n\nThe problematic code is in the `_validate` function:\n```typescript\nif (opts.transform) {\n Object.assign(props.state, transformedState.value)\n}\n\n```\n\nhttps://github.com/nuxt/ui/blob/v3/src/runtime/components/Form.vue\n\nLine 182",[2969,2970],{"name":2899,"color":2900},{"name":2871,"color":2872},3354,"Form component violates Vue prop mutation rules and breaks immutable state patterns","2025-03-08T12:22:25Z","https://github.com/nuxt/ui/issues/3354",0.7215742,{"description":2977,"labels":2978,"number":2981,"owner":2874,"repository":2875,"state":2937,"title":2982,"updated_at":2983,"url":2984,"score":2985},"### Description\n\nI am new using Nuxt UI, and I am loving it.\nI personally believe buttons look better when they are wider than taller, therefore I like to add more padding in the x axis, but I don't want to do this for each button.\n\nI am currently doing it like this:\n\n```html\n\u003CUButton\n to=\"/login\"\n size=\"xl\"\n color=\"warning\"\n variant=\"solid\"\n class=\"font-semibold px-4\"\n >\n Iniciar sesión\n \u003C/UButton>\n```\n\nbut I don't know how to add the option for all buttons.\nI tried doing this in the app.config.ts:\n\n```js\nui: {\n button: {\n slots: {\n base: 'px-4 cursor-pointer'\n },\n}\n \n```\n\nand the cursor-pointer worked, but the px-4 didn't work. Any idea on how to make this work?",[2979,2980],{"name":2868,"color":2869},{"name":2871,"color":2872},3646,"How do I change the padding of all buttons globally?","2025-03-24T01:29:59Z","https://github.com/nuxt/ui/issues/3646",0.7295665,["Reactive",2987],{},["Set"],["ShallowReactive",2990],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fVJh1fKj5So0kUzIoI4gthHQBE51LQyaaipRAbQ4sDo8":-1},"/nuxt/ui/3220"]