\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```",[2867,2870],{"name":2868,"color":2869},"bug","d73a4a",{"name":2871,"color":2872},"triage","ffffff",3583,"nuxt","ui","open","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.7038092,{"description":2882,"labels":2883,"number":2889,"owner":2874,"repository":2875,"state":2876,"title":2890,"updated_at":2891,"url":2892,"score":2893},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.17.0\n- Nuxt Version: 3.13.2\n- CLI Version: 3.14.0\n- Nitro Version: 2.9.7\n- Package Manager: pnpm@8.12.1\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Version\n\nnuxt/ui-pro 1.4.3\n\n### Reproduction\n\n```ts\n// package.json\n\"@nuxt/ui-pro\": \"^1.4.3\",\n\"nuxt\": \"^3.13.2\",\n```\n\n\n### Description\n\nThe property `class` in a link object seems not to be used by `UHeaderLinks` or cannot override UI config from prop or the app.config.ts file.\n\nProperty `icon` is not used on the parent object but appears for children.\n\n\n\n```vue\n\u003Cscript setup lang=\"ts\">\n const links = [\n {\n label: 'Foo',\n to: '/foo',\n icon: 'i-mdi-car',\n },\n {\n label: 'Bar',\n to: '/bar',\n icon: 'i-mdi-star',\n class: 'text-red-500 italic',\n },\n {\n label: 'Baz',\n children: [\n {\n label: 'Baz Foo',\n to: '/foo',\n icon: 'i-mdi-car',\n class: 'text-red-500 italic',\n },\n {\n label: 'Baz Bar',\n to: '/bar',\n icon: 'i-mdi-star',\n class: 'text-red-500 italic',\n },\n ],\n },\n ]\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUHeader>\n \u003Ctemplate #logo> ... \u003C/template>\n \u003Ctemplate #center>\n \u003CUHeaderLinks\n :links=\"links\"\n :ui=\"{\n wrapper: 'hidden lg:flex flex-row flex-nowrap items-center gap-x-8',\n }\"\n />\n \u003C/template>\n\n \u003Ctemplate #panel>\n \u003Cdiv class=\"flex h-full content-center pt-[130px]\">\n \u003CUNavigationTree id=\"navtree\" :links=\"links\" default-open />\n \u003C/div>\n \u003C/template>\n \u003C/UHeader>\n\u003C/template>\n```\n\n### Workaround \nFor classes: split links in multiple UHeaderLinks with custom ui prop.\n\n\n\n```vue\n\u003Ctemplate #center>\n \u003Cdiv class=\"flex flex-row flex-nowrap gap-5\">\n \u003CUHeaderLinks\n :links=\"linksA\"\n :ui=\"{\n wrapper: 'hidden lg:flex flex-row flex-nowrap items-center gap-x-8',\n }\"\n />\n \u003CUHeaderLinks\n :links=\"linksB\"\n :ui=\"{\n wrapper: 'hidden lg:flex flex-row flex-nowrap items-center gap-x-8',\n inactive: 'hover:text-primary text-red-500 italic',\n default: {\n popover: {\n ui: {\n wrapper: 'text-red-500 italic',\n },\n },\n },\n }\"\n />\n \u003C/div>\n\u003C/template>\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2884,2885,2888],{"name":2868,"color":2869},{"name":2886,"color":2887},"pro","5BD3CB",{"name":2871,"color":2872},2306,"HeaderLinks: properties class and icon has no effects","2025-02-17T00:12:08Z","https://github.com/nuxt/ui/issues/2306",0.72513425,{"description":2895,"labels":2896,"number":2899,"owner":2874,"repository":2875,"state":2876,"title":2900,"updated_at":2901,"url":2902,"score":2903},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.18.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.16.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.9.1\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@2.19.2, @sidebase/nuxt-auth@0.9.4, @nuxt/image@1.8.1\n- Build Modules: -\n\n\n### Version\n\nv2.19.2\n\n### Reproduction\n\nhttps://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io\n\n\n### Description\n\nThis is the code from stackblitz, but it illustrates the problem (preview above). Basically, I am following the instructions for setting certain columns to have a maximum width, but UTable doesn't seem to be following them. If it's an implementation issue on my part, my apologies, but I've stared at this for a couple of days and I can't find any reason why I can't get the cell data to wrap.\n\n\u003Ctemplate>\n \u003CUContainer class=\"min-h-screen flex items-center\">\n \u003CUCard\n class=\"flex-1\"\n :ui=\"{\n background: 'bg-gray-50 dark:bg-gray-800/50',\n ring: 'ring-1 ring-gray-300 dark:ring-gray-700',\n divide: 'divide-y divide-gray-300 dark:divide-gray-700',\n header: { base: 'font-bold' },\n }\"\n >\n \u003Ctemplate #header> Welcome to the playground! \u003C/template>\n\n \u003Cp class=\"text-gray-500 dark:text-gray-400\">Try your components here!\u003C/p>\n \u003C/UCard>\n \u003CUTable :rows=\"data\" :columns=\"columns\">\n \u003C/UTable>\n \u003C/UContainer>\n\u003C/template>\n\n\u003Cscript setup>\nconst columns = [\n {\n key: \"name\",\n label: \"Name\",\n sortable: true,\n },\n {\n key: \"address\",\n label: \"Address\",\n rowClass: \"max-w-[200px] whitespace-normal break-word\",\n width: 200\n },\n {\n key: \"description\",\n label: \"Description\",\n rowClass: \"max-w-[200px] whitespace-normal break-word\",\n width: 200\n },];\n\n const data = [\n {\n name: \"Line 1 Name\",\n address: \"Line 1 - 123 Sesame Street, Anytown USA\",\n description: \"This is a relatively short description, but should probably wrap in any case.\"\n },\n {\n name: \"Line 2 Name\",\n address: \"Line 2 - a really really really really really really really really really really Loong address\",\n description: \"This is a really really really really really really really really really really really really really long description, and needs to be wrapped.\"\n}\n ]\n\u003C/script>\n\n\u003Cstyle>\nbody {\n @apply antialiased font-sans text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-900;\n}\n\u003C/style>\n\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2897,2898],{"name":2868,"color":2869},{"name":2871,"color":2872},2856,"UTable cell content refuses to wrap","2024-12-06T23:25:36Z","https://github.com/nuxt/ui/issues/2856",0.72517484,{"description":2905,"labels":2906,"number":2926,"owner":2874,"repository":2874,"state":2876,"title":2927,"updated_at":2928,"url":2929,"score":2930},"### Environment\r\n\r\n- Operating System: `Linux`\r\n- Node Version: `v18.16.1`\r\n- Nuxt Version: `3.5.2`\r\n- Nitro Version: `2.4.1`\r\n- Package Manager: `npm@9.5.1`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\r\n### Reproduction\r\n\r\nhttps://github.com/phanect/repro-nuxt-scss-browserback\r\n\r\nI'm attaching the reproduction as a GitHub repository because this issue was not reproduced on Stackblitz.\r\nIf you disable the cache using DevTools, this issue is not reproduced.\r\n\r\n### Describe the bug\r\n\r\nStep to reproduce:\r\n\r\n1. Clone the repro and run the app:\r\n\r\n```shell\r\n$ git clone https://github.com/phanect/repro-nuxt-scss-browserback.git\r\n$ cd repro-nuxt-scss-browserback\r\n$ npm ci\r\n$ npm run dev\r\n```\r\n2. Open http://localhost:3000/\r\n3. Click the link \"Go to another page\" to move to http://localhost:3000/another/\r\n4. Press the browser back button to go back to http://localhost:3000/\r\n\r\nExpected: The link text \"Go to another page\" is properly shown.\r\nActual: An error message \"500 Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/pages/index.vue?t=1685504873151\" is shown.\r\nIn the browser console, some error messages are shown:\r\n\r\n```\r\nindex.vue:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of \"text/css\". Strict MIME type checking is enforced for module scripts per HTML spec.\r\nvue-router.js:201 [Vue Router warn]: uncaught error during route navigation:\r\nvue-router.js:2663 TypeError: Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/pages/index.vue?t=1685504873151\r\nnuxt.js:94 [nuxt] error caught during app initialization TypeError: Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/pages/index.vue?t=1685504873151\r\nvue-router.js:201 [Vue Router warn]: Unexpected error when starting the router: TypeError: Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/pages/index.vue?t=1685504873151\r\nnuxt.js:94 [nuxt] error caught during app initialization TypeError: Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/pages/index.vue?t=1685504873151\r\nchunk-3Q27KRJ5.js:1358 \u003CSuspense> is an experimental feature and its API will likely change.\r\nchunk-3Q27KRJ5.js:97 [Vue warn]: Hydration node mismatch:\r\n- Client vnode: div \r\n- Server rendered DOM: \r\n (start of fragment) \r\n at \u003CErrorDev statusCode=500 statusMessage=\"Internal Server Error\" description=\"Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/pages/index.vue?t=1685504873151\" ... > \r\n at \u003CAsyncComponentWrapper statusCode=500 statusMessage=\"Internal Server Error\" description=\"Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/pages/index.vue?t=1685504873151\" ... > \r\n at \u003CNuxtErrorPage key=0 error= TypeError: Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/pages/index.vue?t=1685504873151 > \r\n at \u003CAsyncComponentWrapper key=0 error= TypeError: Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/pages/index.vue?t=1685504873151 > \r\n at \u003CNuxtRoot>\r\nchunk-3Q27KRJ5.js:97 [Vue warn]: Hydration children mismatch in \u003Cdiv>: server rendered element contains fewer child nodes than client vdom. \r\n at \u003CErrorDev statusCode=500 statusMessage=\"Internal Server Error\" description=\"Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/pages/index.vue?t=1685504873151\" ... > \r\n at \u003CAsyncComponentWrapper statusCode=500 statusMessage=\"Internal Server Error\" description=\"Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/pages/index.vue?t=1685504873151\" ... > \r\n at \u003CNuxtErrorPage key=0 error= TypeError: Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/pages/index.vue?t=1685504873151 > \r\n at \u003CAsyncComponentWrapper key=0 error= TypeError: Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/pages/index.vue?t=1685504873151 > \r\n at \u003CNuxtRoot>\r\n```\r\n\r\n(These error messages are produced on Google Chrome 114.0.5735.90. On Firefox, similar error messages are produced too.)\r\n\r\n### Additional context\r\n\r\nThis is probably caused by CSS.\r\nIf you remove [`\u003Cstyle> block`](https://github.com/phanect/repro-nuxt-scss-browserback/blob/main/pages/index.vue#L7-L11) from index.vue, this error is not raised.\r\n\r\nI have never experienced this issue when I run the production server (`node .output/server/index.mjs`).\r\n\r\nBrowser: Google Chrome 114.0.5735.90 (64bit)\r\nOS: KDE neon (an Ubuntu-based Linux distribution)\r\n\r\n### Logs\r\n\r\n_No response_",[2907,2910,2913,2916,2919,2920,2923],{"name":2908,"color":2909},"good first issue","fbca04",{"name":2911,"color":2912},"workaround available","11376d",{"name":2914,"color":2915},"pending triage","E99695",{"name":2917,"color":2918},"dx","C39D69",{"name":2868,"color":2869},{"name":2921,"color":2922},"vite","3574D1",{"name":2924,"color":2925},"possible regression","B90A42",15723,"`\u003Cstyle>` block causes error on browser back on `nuxt dev`","2025-05-08T19:59:56Z","https://github.com/nuxt/nuxt/issues/15723",0.726328,{"description":2932,"labels":2933,"number":2934,"owner":2874,"repository":2935,"state":2876,"title":2936,"updated_at":2937,"url":2938,"score":2939},"Hi, hope you're all doing well!\r\n\r\nI ran into an issue using `@nuxt/ui` which now uses `@nuxt/icon` under the hood (used to work when icon collection names could be specified as nuxt/ui module args even tho i had to add a ts-ignore as it wasn't referenced in the enum type), I am using a custom iconify collection i built which goes by\r\n```json filename=\"package.json\"\r\n\"@iconify-json/as\": \"npm:@my-org-name/my-icon-collection@^0.0.2\",\r\n```\r\nin my package.json which isn't referenced in\r\nhttps://github.com/nuxt/icon/blob/main/src/collection-names.ts\r\nthus making it uncompatible with `@nuxt/icon`.\r\nI think the issue comes from the usage of `collectionNames` there (as it seems we only values are only read if they are part of the underlying array):\r\nhttps://github.com/nuxt/icon/blob/cc14fe49b19fce023ba6f049984317492043c9ab/src/collections.ts#L72-L73\r\nWould it be possible further expand the compatibility to include custom collections? (and eventually check if these are installed print an error on the logger if it isn't the case)\r\n\r\nNOTE: It seems to work when using this configuration (note SSR isn't set to false which is a constraint I have)\r\n```ts filename=\"nuxt.config.ts\"\r\nicon: {\r\n serverBundle: {\r\n collections: [\r\n 'as'\r\n ]\r\n }\r\n}\r\n```\r\nbut it the specific project is using this piece of config\r\n```ts filename=\"nuxt.config.ts\"\r\n[...]\r\nssr: false, // SSR forced to false\r\nicon: {\r\n provider: 'server', // Tried with and without this\r\n serverBundle: {\r\n collections: [\r\n 'as'\r\n ]\r\n }\r\n}\r\n```\r\n\r\nSorry if it is a bit long, I tried my best to keep it pleasant to read though. Thank you in advance! :)\r\n",[],252,"icon","Custom collections aren't recognised","2024-09-10T10:57:04Z","https://github.com/nuxt/icon/issues/252",0.7270377,{"description":2941,"labels":2942,"number":2947,"owner":2874,"repository":2875,"state":2948,"title":2949,"updated_at":2950,"url":2951,"score":2952},"### Environment\n\nThe website - https://ui.nuxt.com/getting-started\n\n### Version\n\nmain\n\n### Reproduction\n\nhttps://ui.nuxt.com/getting-started\n\n### Description\n\nNone of the children pages on the nuxt ui site have worked since updating to version 1.4.1 from the 1.3 edge version. \n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2943,2944],{"name":2868,"color":2869},{"name":2945,"color":2946},"documentation","0075ca",2237,"closed","Couldn't resolve component \"default\" at \"/:slug\"","2024-10-02T14:22:51Z","https://github.com/nuxt/ui/issues/2237",0.65736157,{"description":2954,"labels":2955,"number":2960,"owner":2874,"repository":2875,"state":2948,"title":2961,"updated_at":2962,"url":2963,"score":2964},"### Environment\n\n- Operating System: Linux\n- Node Version: v18.20.3\n- Nuxt Version: 3.13.2\n- CLI Version: 3.14.0\n- Nitro Version: 2.9.7\n- Package Manager: npm@10.2.3\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Version\n\n2.18.6\n\n### Reproduction\n\nhttps://stackblitz.com/~/github.com/aloulouamine/nuxt-ui-select-menu-issue\n\n### Description\n\nSelectMenu with paginated search has an issue with default count placeholder.\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2956,2957],{"name":2868,"color":2869},{"name":2958,"color":2959},"duplicate","cfd3d7",2313,"SelectMenu paginated search count issue","2024-10-06T17:49:40Z","https://github.com/nuxt/ui/issues/2313",0.6860478,{"description":2966,"labels":2967,"number":2974,"owner":2874,"repository":2875,"state":2948,"title":2975,"updated_at":2976,"url":2977,"score":2978},"### Description\n\nNuxt UI should have the potential to open native links in a Nuxt UI Modal by simply adding a certain `modal` parameter in [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link).\n\n`\u003CNuxtLink to=\"/about\" modal>About page shown in modal but can also be opened natively (e.g. new tab)\u003C/NuxtLink>`\n\nThe link should still be a native link with progressive enhancement, so _if users would like to open the URL in a new tab, they can do_! If not, it will open the content in a modal.\n\nThat would be great DX and UX! 🎉\n\nThe `modal` property is just one possible solution, maybe there's even a better one using a native HTML property like `rel=\"modal\"`, we should discuss that.\n\nIn future versions there might be further control parameters to override the defaults for\n\n- modal size\n- modal style\n- modal opacity\n- ...\n\nBut let's start simple.\n\nSomething similar was done here, but I think this should really be part of Nuxt UI or even Nuxt Core.\nhttps://nuxt-pages-plus.pages.dev/components/plus-modal-link\n\n### Additional context\n\n_No response_",[2968,2971],{"name":2969,"color":2970},"enhancement","a2eeef",{"name":2972,"color":2973},"v3","49DCB8",3298,"Enhance NuxtLink to open in Modal using a \"modal\" property","2025-03-08T12:21:53Z","https://github.com/nuxt/ui/issues/3298",0.68670255,{"description":2980,"labels":2981,"number":2984,"owner":2874,"repository":2875,"state":2948,"title":2985,"updated_at":2986,"url":2987,"score":2988},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.5.1\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.14.2\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@2.19.2\n- Build Modules: -\n\n### Version\n\n2.19.2\n\n### Reproduction\n\n- create blank nuxt project with nuxt-ui module\n- add to page some buttons\n```\n\u003Cdiv>\n \u003CUButton icon=\"i-heroicons:plus-20-solid\">Add\u003C/UButton>\n \u003CUButton icon=\"ic:baseline-minus\">Remove\u003C/UButton>\n \u003CUButton>Clear\u003C/UButton>\n\u003C/div>\n```\n\n### Description\n\nButtons with icons (no matter icon set) jumping up raltive to clean text button\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2982,2983],{"name":2868,"color":2869},{"name":2958,"color":2959},2805,"UButton icon breaks button position","2024-12-03T11:21:27Z","https://github.com/nuxt/ui/issues/2805",0.70351833,{"description":2990,"labels":2991,"number":2994,"owner":2874,"repository":2875,"state":2948,"title":2995,"updated_at":2996,"url":2997,"score":2998},"### Environment\n\nOperating System: Windows_NT\nNode Version: v20.18.0\nNuxt Version: -\nCLI Version: 3.14.0\nNitro Version: -\nPackage Manager: unknown\nBuilder: -\nUser Config: -\nRuntime Modules: -\nBuild Modules: -\n\n### Version\n\nv3.0.0-alpha.6\n\n### Reproduction\n\nCannot use v3 on stackblitz so no repo.\n\n### Description\n\nThere is no code example for the `validate-on` prop. Like how do I stop blur,input and change validations?\nhttps://ui3.nuxt.dev/components/form#input-events\n\nSearched a bit on docs github repository code and I think it is something like this:\n```\n :validate-on=\"[]\" // No validation until manual trigger: 'validate' prop\n :validate-on=\"['blur']\" // Only validate on blur(or manually)\n :validate-on=\"['blur','change','input']\" // Validate on all\n```\n\nWhen you type :validate-on=\"[]\" it suggests but I didn't know if i had to put `[]`\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2992,2993],{"name":2868,"color":2869},{"name":2972,"color":2973},2371,"[Form] Input events validate-on code example missing.","2024-10-23T20:25:52Z","https://github.com/nuxt/ui/issues/2371",0.7071447,["Reactive",3000],{},["Set"],["ShallowReactive",3003],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fOT6Hb_SgjZIp-_U4zI2It3i9PedhzXf01ploUIjQBP8":-1},"/nuxt/ui/2245"]