` component, but it doesn’t work.\n",[],365,"icon","Is there a way to change the viewBox attribute of an SVG element?","2025-03-05T19:09:39Z","https://github.com/nuxt/icon/issues/365",0.8055357,{"description":3172,"labels":3173,"number":3181,"owner":3155,"repository":3156,"state":3182,"title":3183,"updated_at":3184,"url":3185,"score":3186},"### Description\n\nThere is currently no easy way to know what state the modal is in. Adding a `toggle` method would make life very much easier.\n\nI'm willing to make a PR\n\n### Additional context\n\n_No response_",[3174,3177,3178],{"name":3175,"color":3176},"enhancement","a2eeef",{"name":3149,"color":3150},{"name":3179,"color":3180},"triage","ffffff",3720,"closed","feat: add toogle for useOverlay","2025-04-09T15:26:14Z","https://github.com/nuxt/ui/issues/3720",0.73051274,{"description":3188,"labels":3189,"number":3190,"owner":3155,"repository":3191,"state":3182,"title":3192,"updated_at":3193,"url":3194,"score":3195},"### Environment\n\nhttps://nuxt.com/\n\n### Reproduction\n\nUse Google and Firefox to open https://nuxt.com/, and you can find that the automatic recognition on Firefox is wrong, showing the dark mode\r\n\r\n\r\n\n\n### Describe the bug\n\nfirefox Developer Edition 131.0b5\r\nAnd how to turn off dark mode?\r\nI tried but it didn't work\r\ncolorMode: {\r\n preference: 'light'\r\n},\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[],1663,"nuxt.com","Dark mode does not work properly on Firefox Developer Edition","2024-11-21T01:08:22Z","https://github.com/nuxt/nuxt.com/issues/1663",0.73566586,{"description":3197,"labels":3198,"number":3203,"owner":3155,"repository":3156,"state":3182,"title":3204,"updated_at":3205,"url":3206,"score":3207},"### 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?",[3199,3202],{"name":3200,"color":3201},"question","d876e3",{"name":3149,"color":3150},3646,"How do I change the padding of all buttons globally?","2025-03-24T01:29:59Z","https://github.com/nuxt/ui/issues/3646",0.7515749,{"description":3209,"labels":3210,"number":3218,"owner":3155,"repository":3156,"state":3182,"title":3219,"updated_at":3220,"url":3221,"score":3222},"### Environment\n\n❯ npx nuxi info\nWorking directory: /Users/devin/repos/projects/_websites/serp.co_/serp.co 8:19:26 PM\nNuxt project info: (copied to clipboard) 8:19:26 PM\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v23.2.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.17.1\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.10.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.10, @nuxtjs/html-validator@1.8.2, @nuxt/image@1.8.1, @nuxt/eslint@0.6.2, @nuxtjs/seo@2.0.0-rc.23, @nuxtjs/sitemap@7.0.0, nuxt-multi-cache@3.4.0, nuxt-security@2.1.5, @nuxt/scripts@0.9.5, nuxt-link-checker@4.0.4\n- Build Modules: -\n------------------------------\n\n 8:19:26 PM\n👉 Report an issue: https://github.com/nuxt/nuxt/issues/new?template=bug-report.yml\n👉 Suggest an improvement: https://github.com/nuxt/nuxt/discussions/new\n👉 Read documentation: https://nuxt.com\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n\"@nuxt/ui\": \"3.0.0-alpha.10\",\n\n### Reproduction\n\nmy website is using nuxt + nuxt UI / pro\n\nthis is the page screenshot from my iphone:\n\n\n\nthis is the page screenshot from browse:\n\n\u003Cimg width=\"758\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/d0d27577-22b8-40bb-ad4d-8a3841eddfcc\" />\n\n\n**questions**\n\n1. is there something i am forgetting to add to my nuxt config or my page level code that is causing this problem? and how to i fix / test for it?\n2. why would there be a difference in the page on the actual phone vs. in the browser dev tools?\n\n\n// page code:\n\n```js\n\u003Ctemplate>\n \u003Cdiv v-if=\"data\">\n \u003Cmultipage-header\n :name=\"data.name\"\n :one-liner=\"data.oneLiner\"\n :sections=\"sections\"\n class=\"bg-background sticky top-0 z-10 transition-all duration-300\"\n :image=\"data.logo\"\n :serply_link=\"data.serplyLink\"\n />\n\n \u003C!-- Main content with grid -->\n \u003Csection class=\"mx-auto max-w-7xl p-4 md:p-6 lg:p-8\">\n \u003Cdiv class=\"grid gap-6 lg:grid-cols-3\">\n \u003C!-- Main Content (70%) -->\n \u003Cdiv class=\"lg:col-span-2\">\n \u003C!-- Overview Section -->\n \u003Ccompany-overview\n v-if=\"data.excerpt\"\n id=\"overview\"\n :company=\"data\"\n class=\"scroll-mt-60\"\n />\n\n \u003C!-- Article Section -->\n \u003Csection\n v-if=\"data.article\"\n class=\"prose dark:prose-invert mt-[-25px]\"\n >\n \u003Cdiv id=\"article\" class=\"mb-8\" v-html=\"data.article\">\u003C/div>\n \u003C/section>\n\n \u003C!-- Features Section -->\n \u003Csection v-if=\"data.features\" class=\"mb-12 space-y-4\">\n \u003Ch2 id=\"features\" class=\"mb-4 scroll-mt-60 text-3xl font-bold\">\n {{ data.name }} Features\n \u003C/h2>\n \u003Carticle v-for=\"feature in data.features\" :key=\"feature.item\">\n \u003Ch3 class=\"mb-2 text-lg font-bold\">{{ feature.item }}\u003C/h3>\n \u003Cp>{{ feature.description }}\u003C/p>\n \u003C/article>\n \u003C/section>\n\n \u003C!-- FAQs Section -->\n \u003Csection v-if=\"faqItems && faqItems.length\" id=\"faqs\" class=\"mb-12\">\n \u003Ch2 class=\"mb-4 scroll-mt-60 text-3xl font-bold\">FAQ\u003C/h2>\n \u003Cu-accordion type=\"multiple\" :items=\"faqItems\" />\n \u003C/section>\n\n \u003C!-- Alternatives -->\n \u003Csection v-if=\"data.alternatives\" class=\"mb-12 p-4\">\n \u003Ch2 id=\"alternatives\" class=\"mb-4 scroll-mt-60 text-3xl font-bold\">\n {{ data.name }} Alternatives\n \u003C/h2>\n \u003Cul class=\"list-disc pl-4\">\n \u003Cli v-for=\"alternative in data.alternatives\" :key=\"alternative\">\n {{ alternative }}\n \u003C/li>\n \u003C/ul>\n \u003C/section>\n \u003C/div>\n\n \u003C!-- Sidebar (30%) -->\n \u003Caside\n v-if=\"\n (data.screenshots && data.screenshots.length) ||\n (data.categories && data.categories.length)\n \"\n class=\"space-y-6 lg:col-span-1\"\n >\n \u003C!-- Left Column: Media Gallery -->\n \u003Cmedia-gallery\n v-if=\"data.screenshots && data.screenshots.length\"\n :company=\"data\"\n />\n\n \u003C!-- Categories -->\n \u003Csection\n v-if=\"data.categories && data.categories.length\"\n class=\"gap-2\"\n >\n \u003Cs-pill base-slug=\"reviews/best\" :items=\"data.categories\" />\n \u003C/section>\n \u003C/aside>\n \u003C/div>\n \u003C/section>\n \u003C/div>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nconst route = useRoute();\nconst router = useRouter();\nconst { slug } = route.params;\n\nconst data = await useCompany(`${slug}`);\nif (!data) {\n router.push('/404');\n}\n\nconst faqItems = computed(() => {\n if (!data?.faqs) return [];\n\n return data?.faqs.map((faq) => ({\n label: faq.question,\n content: faq.answer\n }));\n});\n\nconst sections = computed(() => {\n const sectionTitles: string[] = [];\n\n sectionTitles.push('Overview');\n\n if (data?.features) {\n sectionTitles.push('Features');\n }\n if (faqItems.value && faqItems.value.length) {\n sectionTitles.push('FAQ');\n }\n\n if (data?.alternatives) {\n sectionTitles.push('Alternatives');\n }\n\n return sectionTitles;\n});\n\nuseSeoMeta({\n title: computed(() =>\n data?.name\n ? `${data.name} - Reviews, Pricing, Features`\n : 'Company Information'\n )\n});\n\u003C/script>\n```\n",[3211,3214,3217],{"name":3212,"color":3213},"bug","d73a4a",{"name":3215,"color":3216},"needs reproduction","CB47CF",{"name":3149,"color":3150},3168,"mobile responsiveness issues","2025-03-28T17:34:56Z","https://github.com/nuxt/ui/issues/3168",0.7599571,{"description":3224,"labels":3225,"number":3230,"owner":3155,"repository":3156,"state":3182,"title":3231,"updated_at":3232,"url":3233,"score":3234},"### Description\n\nI have a Slideover with some checkboxes from a 3rd party library. Whenever I close the slideover all values are lost. \r\n\r\nUsing just headless UI I can solve this by using `:unmount=\"false\"` on the `Dialog` and `TransitionRoot` but can't find anything similar on the slideover.\r\n\r\nDid I miss something here?\r\n\r\n\r\nCheers",[3226,3227],{"name":3200,"color":3201},{"name":3228,"color":3229},"upstream","78bddb",1357,"Slideover loosing state","2025-03-28T17:28:27Z","https://github.com/nuxt/ui/issues/1357",0.76886904,{"description":3236,"labels":3237,"number":3240,"owner":3155,"repository":3156,"state":3182,"title":3241,"updated_at":3242,"url":3243,"score":3244},"### 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```",[3238,3239],{"name":3212,"color":3213},{"name":3149,"color":3150},2649,"breadcrumb HTML validation errors","2024-11-15T08:53:33Z","https://github.com/nuxt/ui/issues/2649",0.7736568,{"description":3246,"labels":3247,"number":3248,"owner":3155,"repository":3191,"state":3182,"title":3249,"updated_at":3250,"url":3251,"score":3252},"Lag on pitch to zoom https://www.notion.so/nuxt/Lag-on-pitch-to-zoom-01e68fe5383b4e1b8748f0e9b76a90df",[],1095,"[Review] Perf","2023-10-10T14:45:06Z","https://github.com/nuxt/nuxt.com/issues/1095",0.7785196,{"description":3254,"labels":3255,"number":3258,"owner":3155,"repository":3156,"state":3182,"title":3259,"updated_at":3260,"url":3261,"score":3262},"### Environment\n\n Operating System: Linux\n- Node Version: v20.15.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.7.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxtjs/i18n@9.1.1, @nuxt/ui@3.0.0-alpha.10, @pinia/nuxt@0.9.0, nuxt-viewport@2.2.0, @nuxthub/core@0.8.7, nuxt-auth-utils@0.5.6, @nuxt/fonts@0.10.3\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.10\n\n### Reproduction\n\n```vue\n//dont work\n\u003CUSelect variant=\"none\" class=\"w-full\" label-key=\"name\" value-key=\"id\" multiple\n @update:model-value=\"testFunctionArray\" @change=\"testFunctionArray\"\n v-model=\"row.original.permissionsModel\" :items=\"permissions\">\n\u003C/USelect>\n```\n\n```vue\n//work fine\n\u003CUSelect variant=\"none\" class=\"w-full\" label-key=\"name\" value-key=\"id\"\n @update:model-value=\"testFunction\" @change=\"testFunction\"\n v-model=\"row.original.permissionModel\" :items=\"permissions\">\n\u003C/USelect>\n```\n\n### Description\n\n`testFunctionArray` is never called if multiple prop is set to true\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3256,3257],{"name":3212,"color":3213},{"name":3149,"color":3150},2953,"USelect with multiple prop does not trigger event when model-value change","2025-01-25T13:12:19Z","https://github.com/nuxt/ui/issues/2953",0.7834292,["Reactive",3264],{},["Set"],["ShallowReactive",3267],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$frR6CJ8APXDG2Hio47hwVT_YhGKPzZ8ROs7ZifLvPP-c":-1},"/nuxt/nuxt.com/1838"]