` 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":2920,"labels":2921,"number":2925,"owner":2874,"repository":2926,"state":2876,"title":2927,"updated_at":2928,"url":2929,"score":2930},"### Environment\n\n------------------------------\n- Operating System: Linux\n- Node Version: v18.20.3\n- Nuxt Version: 3.16.1\n- CLI Version: 3.23.1\n- Nitro Version: 2.11.7\n- Package Manager: pnpm@8.15.6\n- Builder: -\n- User Config: compatibilityDate, devtools, modules\n- Runtime Modules: @nuxt/test-utils/module@3.17.2\n- Build Modules: -\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/~/github.com/olada/nuxt-starter-enej2mm2\n\n### Describe the bug\n\n## Use Case\n\nUse Case is to write a test for a plugin which provides a custom fetch method.\n\nThe custom fetch (which is pretty much the same as [the one in the \"official\" nuxt recipe](https://nuxt.com/docs/guide/recipes/custom-usefetch)) registers\na response interceptor which redirects to /login using Nuxt's `navigateTo`-method when the api responds with a 401 UNAUTHORIZED status.\n\n## The issue\n\nTo make sure that the functionality works, I want to verify it with a test.\nFor this purpose, I want to use the real `$api` method which is provided by the plugin.\n\nIn the test, I want to be able to verify that the navigation is correctly invoked.\n\nFor that purpose, I want to verify that the navigateTo-mock was invoked with the correct parameters.\n\nHowever, it seems that the mock is not being \"injected\" correctly because I receive following error message from vitest.\n\n```\n ❯ plugins/__tests__/customFetch-with-navigateTo-mock.nuxt.spec.ts (1 test | 1 failed) 13ms\n × Custom Open Fetch with mocked navigateTo > should redirect when fetch not successful and status is 401 12ms\n → expected \"spy\" to be called at least once\n\n⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯\n\n FAIL plugins/__tests__/customFetch-with-navigateTo-mock.nuxt.spec.ts > Custom Open Fetch with mocked navigateTo > should redirect when fetch not successful and status is 401\nAssertionError: expected \"spy\" to be called at least once\n ❯ eval plugins/__tests__/customFetch-with-navigateTo-mock.nuxt.spec.ts:35:3\n 33| })).rejects.toThrowError();\n 34| \n 35| expect(navigateToMock).toHaveBeenCalled();\n | ^\n 36| });\n 37| });\n\n⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯\n\n\n Test Files 1 failed (1)\n Tests 1 failed (1)\n Start at 14:37:37\n Duration 592ms\n```\n\nShould mocking the navigateTo method not be possible in such scenario? Or is it because of that `nuxtApp.runWithContext` which makes this a different story?\n\nShould plugins be tested in a completely different way?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2922],{"name":2923,"color":2924},"pending triage","5D08F5",1206,"test-utils","Cannot mock navigateTo in test with nuxt environment","2025-03-24T14:18:51Z","https://github.com/nuxt/test-utils/issues/1206",0.8060124,{"description":2932,"labels":2933,"number":2937,"owner":2874,"repository":2875,"state":2938,"title":2939,"updated_at":2940,"url":2941,"score":2942},"### 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_",[2934,2935,2936],{"name":2868,"color":2869},{"name":2888,"color":2889},{"name":2871,"color":2872},3720,"closed","feat: add toogle for useOverlay","2025-04-09T15:26:14Z","https://github.com/nuxt/ui/issues/3720",0.73051274,{"description":2944,"labels":2945,"number":2946,"owner":2874,"repository":2947,"state":2938,"title":2948,"updated_at":2949,"url":2950,"score":2951},"### 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":2953,"labels":2954,"number":2959,"owner":2874,"repository":2875,"state":2938,"title":2960,"updated_at":2961,"url":2962,"score":2963},"### 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?",[2955,2958],{"name":2956,"color":2957},"question","d876e3",{"name":2888,"color":2889},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":2965,"labels":2966,"number":2972,"owner":2874,"repository":2875,"state":2938,"title":2973,"updated_at":2974,"url":2975,"score":2976},"### 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",[2967,2968,2971],{"name":2902,"color":2903},{"name":2969,"color":2970},"needs reproduction","CB47CF",{"name":2888,"color":2889},3168,"mobile responsiveness issues","2025-03-28T17:34:56Z","https://github.com/nuxt/ui/issues/3168",0.7599571,{"description":2978,"labels":2979,"number":2984,"owner":2874,"repository":2875,"state":2938,"title":2985,"updated_at":2986,"url":2987,"score":2988},"### 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",[2980,2981],{"name":2956,"color":2957},{"name":2982,"color":2983},"upstream","78bddb",1357,"Slideover loosing state","2025-03-28T17:28:27Z","https://github.com/nuxt/ui/issues/1357",0.76886904,["Reactive",2990],{},["Set"],["ShallowReactive",2993],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$frR6CJ8APXDG2Hio47hwVT_YhGKPzZ8ROs7ZifLvPP-c":-1},"/nuxt/nuxt.com/1838"]