\n\u003C/svg>`",[],"nuxt","icon","open","Some local SVGs cannot be loaded","2025-03-30T07:43:06Z","https://github.com/nuxt/icon/issues/382",0.461912,{"description":2875,"labels":2876,"number":2877,"owner":2867,"repository":2868,"state":2869,"title":2878,"updated_at":2879,"url":2880,"score":2881},"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,"[feature request] Allow aliasing entire collection","2025-02-21T20:10:51Z","https://github.com/nuxt/icon/issues/362",0.70941156,{"description":2883,"labels":2884,"number":2891,"owner":2867,"repository":2892,"state":2869,"title":2893,"updated_at":2894,"url":2895,"score":2896},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v18.20.7`\n- Nuxt Version: `3.14.1592`\n- CLI Version: `3.15.0`\n- Nitro Version: `2.10.4`\n- Package Manager: `yarn@1.22.22`\n- Builder: `-`\n- User Config: `default`\n- Runtime Modules: `@nuxt/ui@2.19.2`, `@artmizu/nuxt-prometheus@2.4.0`, `@nuxt/icon@1.10.3`\n- Build Modules: `-`\n\n### Version\n\nv2.21.1\n\n### Reproduction\n\nhttps://ui2.nuxt.com/components/select-menu#control-the-query\n\nTry to select `Wade` in the query input with mouse or trackpad \n\u003Cimg width=\"494\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/a0e90d62-aabb-4d40-9d8d-a6fed67fee02\" />\n\nBrowser: `Google Chrome Version 134.0.6998.89 (Official Build) (arm64)`\n\nAlso reproduced on `Safari Version 18.3.1 (20620.2.4.11.6)`\n\n### Description\n\nUser may want to copy the text in the query input of a `select-menu` component by moving cursor around text, now it's unable to do it without a keyboard (`Shift + left/right arrow` or `Cmd/Ctrl + A` to select all).\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2885,2888],{"name":2886,"color":2887},"bug","d73a4a",{"name":2889,"color":2890},"triage","ffffff",3583,"ui","Accessibility: unable to select text in the query input of a select-menu","2025-03-17T00:34:07Z","https://github.com/nuxt/ui/issues/3583",0.71570724,{"description":2898,"labels":2899,"number":2907,"owner":2867,"repository":2892,"state":2869,"title":2908,"updated_at":2909,"url":2910,"score":2911},"### For what version of Nuxt UI are you suggesting this?\n\nv3.0.0-alpha.x\n\n### Description\n\nHello everyone, I’d like to discuss the possibility of setting `props` by default from `AppConfig`. Currently, it’s very convenient that we can configure the theme through the config. It would be great to have a similar option for props. Previously, @benjamincanac mentioned [here](https://github.com/nuxt/ui/issues/1289#issuecomment-2480556540) that this is not currently planned.\n\nMy proposal is simple: wrap all `withDefaults` in our own implementation. This way, we can define props without making significant changes to the code.\n\n## What it could look like\n\nLet’s look at the `Accordion.vue` component. At the moment, its props look like this:\n```ts\nconst props = withDefaults(defineProps\u003CAccordionProps\u003CT>>(), {\n type: 'single',\n collapsible: true,\n labelKey: 'label'\n})\n```\nLet’s assume our wrapper is called `withUiDefaults`. Then the code would look like this:\n```diff\n-const props = withDefaults(defineProps\u003CAccordionProps\u003CT>>(), {\n+const props = withUiDefaults(defineProps\u003CAccordionProps\u003CT>>(), {\n type: 'single',\n collapsible: true,\n labelKey: 'label'\n})\n```\nThe implementation of `withUiDefaults` is quite simple:\n```ts\nfunction withUiDefaults(props, defaults) {\n const defaultFromConfig = {}\n\n return withDefaults(props, {\n ...defaults,\n ...defaultFromConfig\n })\n}\n``` \n\n## Issues I See\n\n1) **Typing `AppConfig` might be challenging** \n We would need to somehow generate types based on the components. \n **My opinion:** I think we can retrieve this using `vue-component-meta` during the UI build stage. So, in my opinion, this isn’t a significant problem.\n\n2) **Developers might set `modelValue` or other critical props by default** \n **My opinion:** In such cases, we can log a warning to the console. Additionally, developers should understand which props they are overriding. We won’t be able to cover all edge cases, but I don’t think we need to.\n\n### Additional context\n\n_No response_",[2900,2903,2906],{"name":2901,"color":2902},"enhancement","a2eeef",{"name":2904,"color":2905},"v3","49DCB8",{"name":2889,"color":2890},2662,"Override default props from `AppConfig`","2024-11-17T08:30:46Z","https://github.com/nuxt/ui/issues/2662",0.7204173,{"description":2913,"labels":2914,"number":2918,"owner":2867,"repository":2892,"state":2869,"title":2919,"updated_at":2920,"url":2921,"score":2922},"### Description\n\nHow to configure Nuxt Color Mode in Nuxt UI so that it does not inject color styles for all Nuxt UI components using inline styles",[2915],{"name":2916,"color":2917},"question","d876e3",3394,"implement csp, sty-src with nonce","2025-02-25T10:13:42Z","https://github.com/nuxt/ui/issues/3394",0.72193277,{"description":2924,"labels":2925,"number":2933,"owner":2867,"repository":2934,"state":2869,"title":2935,"updated_at":2936,"url":2937,"score":2938},"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?",[2926,2929,2930],{"name":2927,"color":2928},"documentation","0075ca",{"name":2901,"color":2902},{"name":2931,"color":2932},"vitest-environment","b60205",544,"test-utils","mocking plugins used within nuxt","2024-07-23T12:17:21Z","https://github.com/nuxt/test-utils/issues/544",0.7233209,{"description":2940,"labels":2941,"number":2945,"owner":2867,"repository":2892,"state":2869,"title":2946,"updated_at":2947,"url":2948,"score":2949},"### For what version of Nuxt UI are you suggesting this?\n\nv3.0.0-alpha.x\n\n### Description\n\nUTabs documentation could benefit from an example of how to use it to display nested pages. An example use case could be a profile page with tabs for profile information and settings, where navigating through each would lead to a sub-page (profile information being in /profile, and settings being in /profile/settings)\n\n### Additional context\n\n_No response_",[2942,2943,2944],{"name":2901,"color":2902},{"name":2904,"color":2905},{"name":2889,"color":2890},2872,"[v3 docs]: example for nested pages with UTabs","2024-12-16T09:46:36Z","https://github.com/nuxt/ui/issues/2872",0.7271224,{"description":2951,"labels":2952,"number":2955,"owner":2867,"repository":2892,"state":2956,"title":2957,"updated_at":2958,"url":2959,"score":2960},"### 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```",[2953,2954],{"name":2886,"color":2887},{"name":2904,"color":2905},3513,"closed","Nuxt 3.16.0 - ships with @unhead2","2025-03-10T08:49:36Z","https://github.com/nuxt/ui/issues/3513",0.67907286,{"description":2962,"labels":2963,"number":2970,"owner":2867,"repository":2867,"state":2956,"title":2971,"updated_at":2972,"url":2973,"score":2974},"### Describe the feature\n\nWhen using `nuxi generate`, the output is missing a `.nojekyll` file. Since the `_nuxt/` directory (and many other files) are prefixed with an underscore, they are ignored by Jekyll builds.\r\n\r\nFor example, on GitHub Pages, these files will 404 and the site will become unusable:\r\n\r\n\r\n\r\nNuxt 2 used to create this file during `nuxt generate`:\r\nhttps://github.com/nuxt/nuxt.js/blob/00c3b95ab36d6d72c3f2737a3d0cc821228eddb5/packages/generator/src/generator.js#L274\r\n\r\nStack Overflow question documenting the issue and solution:\r\nhttps://stackoverflow.com/questions/71951915/nuxt3-nuxt-directory-not-found-404-on-github-pages\r\n\n\n### Additional information\n\n- [X] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://v3.nuxtjs.org/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/framework/discussions) and [issues](https://github.com/nuxt/framework/issues).",[2964,2967],{"name":2965,"color":2966},"3.x","29bc7f",{"name":2968,"color":2969},"pending triage","E99695",12575,"Add option to create .nojekyll file when generating static site","2023-01-19T16:06:42Z","https://github.com/nuxt/nuxt/issues/12575",0.6942208,{"description":2976,"labels":2977,"number":2980,"owner":2867,"repository":2892,"state":2956,"title":2981,"updated_at":2982,"url":2983,"score":2984},"### 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```",[2978,2979],{"name":2916,"color":2917},{"name":2904,"color":2905},2772,"@apply Tailwind CSS class in a component's `\u003Cstyle>` tag","2024-12-09T11:14:28Z","https://github.com/nuxt/ui/issues/2772",0.704618,["Reactive",2986],{},["Set"],["ShallowReactive",2989],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fYqV0t0t05eNgfqdbOfd2sWeXHtENQR5AskNq7E5C8r4":-1},"/nuxt/fonts/382"]