\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":2885,"color":2886},{"name":2909,"color":2910},{"name":2934,"color":2935},"pro","5BD3CB",3549,"injection \"Symbol(nuxt-ui.locale-context)\" not found","2025-03-18T11:12:44Z","https://github.com/nuxt/ui/issues/3549",0.67922795,{"description":2942,"labels":2943,"number":2945,"owner":2874,"repository":2875,"state":2912,"title":2946,"updated_at":2947,"url":2948,"score":2949},"Currently, portal components (modals, popovers, etc.) are directly attached to the root of the body. It would be beneficial to allow specifying their destination within the configuration .This would provide greater control over rendering order and potential styling conflicts, especially in complex applications with open shadow Dom. \n\nFor instance, a developer might want to render a modal within a specific container to inherit styles or avoid interference with other elements on the page (I currently using Nuxt ui as a web component withing WordPress). \n\nThe proposed configuration option could be a CSS selector string, allowing for flexible targeting of any existing element in the DOM defaulting to 'body'. ",[2944],{"name":2909,"color":2910},3687,"Allow specify portal destination for all portaled components","2025-04-21T15:42:56Z","https://github.com/nuxt/ui/issues/3687",0.679353,{"description":2951,"labels":2952,"number":2958,"owner":2874,"repository":2875,"state":2912,"title":2959,"updated_at":2960,"url":2961,"score":2962},"### 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?",[2953,2956,2957],{"name":2954,"color":2955},"duplicate","cfd3d7",{"name":2897,"color":2898},{"name":2909,"color":2910},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.68071747,{"description":2964,"labels":2965,"number":2968,"owner":2874,"repository":2875,"state":2912,"title":2969,"updated_at":2914,"url":2970,"score":2971},"### 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",[2966,2967],{"name":2885,"color":2886},{"name":2909,"color":2910},3354,"Form component violates Vue prop mutation rules and breaks immutable state patterns","https://github.com/nuxt/ui/issues/3354",0.7027963,{"description":2973,"labels":2974,"number":2977,"owner":2874,"repository":2875,"state":2912,"title":2978,"updated_at":2979,"url":2980,"score":2981},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v20.11.1\n- Nuxt Version: 3.14.159\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.11.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.8, @nuxtjs/html-validator@1.8.2, @nuxt/image@1.8.1, @nuxt/eslint@0.6.1, @nuxtjs/seo@2.0.0-rc.23\n- Build Modules: -\n------------------------------\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n\"@nuxt/ui\": \"3.0.0-alpha.8\",\n\n### Reproduction\n\n\u003C!-- layouts/default.vue -->\n\u003Ctemplate>\n \u003Cdiv class=\"container mx-auto\">\n \u003Cu-breadcrumb :items=\"items \" />\n \u003Cslot>\u003C/slot>\n \u003C/div>\n\u003C/template>\n\n\n\u003Cscript lang=\"ts\" setup>\nimport { useRoute } from 'vue-router';\n\nconst route = useRoute();\nconst items = useBreadcrumbItems({\n schemaOrg: true,\n});\n\u003C/script>\n\n\n### Description\n\nthis will render the breadcrumbs in a \u003Cdiv> with an aria-label, which is a violation of this rule: https://html-validate.org/rules/aria-label-misuse.html\n\n- Rule ID: aria-label-misuse\n- Category: Accessibility\n- Standards: WCAG 2.2 (A)WCAG 2.1 (A)WCAG 2.0 (A)\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n ERROR HTML validation errors found for /song/justice-genesis-1\n\ninline\n 129:21990 error \"aria-label\" cannot be used on this element aria-label-misuse\n\n✖ 1 problem (1 error, 0 warnings)\n\nMore information:\n https://html-validate.org/rules/aria-label-misuse.html\n\n```",[2975,2976],{"name":2885,"color":2886},{"name":2909,"color":2910},2649,"breadcrumb HTML validation errors","2024-11-15T08:53:33Z","https://github.com/nuxt/ui/issues/2649",0.7173665,["Reactive",2983],{},["Set"],["ShallowReactive",2986],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fyQ0_QJLVSV0TAgfyl_OMM_mHUrDeE9hqel9CZMxWtoA":-1},"/nuxt/ui/3413"]