\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.67953765,{"description":2882,"labels":2883,"number":2884,"owner":2874,"repository":2885,"state":2876,"title":2886,"updated_at":2887,"url":2888,"score":2889},"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,"icon","[feature request] Allow aliasing entire collection","2025-02-21T20:10:51Z","https://github.com/nuxt/icon/issues/362",0.69736177,{"description":2891,"labels":2892,"number":2893,"owner":2874,"repository":2885,"state":2876,"title":2894,"updated_at":2895,"url":2896,"score":2897},"### Environment\n\n\n------------------------------\n- Operating System: Windows_NT\n- Node Version: v22.9.0\n- Nuxt Version: 3.13.2\n- CLI Version: 3.14.0\n- Nitro Version: 2.9.7\n- Package Manager: yarn@4.5.1\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n------------------------------\n\n\n### Reproduction\n\nI haven't changed the code itself, but uninstalled some dependencies and updated everything to latest.\n\nModules used:\n\n```\n modules: [\n \"@unocss/nuxt\",\n \"@nuxt/content\",\n \"@vueuse/nuxt\",\n \"@nuxt/fonts\",\n // @ts-ignore\n \"@nuxtjs/seo\",\n \"@nuxt/icon\",\n \"nuxt-umami\"\n ],\n```\n\nDependencies upgraded:\n\n\n\n\n\n\nTransitive deps of \"@nuxt/icon\"\n\n\n\nI've tried it with and without the icon config in nuxt.config.ts with no effect\n\n### Describe the bug\n\nI`m suddenly getting this error after upgrading a few dependencies and the site is not loading anymore.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```\nCannot read properties of undefined (reading 'provider')\nStacktrace\nsetup\n@nuxt/icon/dist/runtime/plugin.js:16:17\n(anonymous)\n./C:/Users/MyPC/Workspace/my-project/apps/my-app/virtual:nuxt:C:/Users/MyPC/Workspace/my-project/apps/my-app/.nuxt/plugins/server.mjs:77:89\nModule.executeAsync\nunctx/dist/index.mjs:111:19\nsetup\n./C:/Users/MyPC/Workspace/my-project/apps/my-app/virtual:nuxt:C:/Users/MyPC/Workspace/my-project/apps/my-app/.nuxt/plugins/server.mjs:77:65\n(anonymous)\nnuxt/dist/app/nuxt.js:146:60\nfn\nnuxt/dist/app/nuxt.js:228:44\nObject.callAsync\nunctx/dist/index.mjs:68:55\n(anonymous)\nnuxt/dist/app/nuxt.js:231:56\nObject.runWithContext\n@vue/runtime-core/dist/runtime-core.cjs.js:3940:18\ncallWithNuxt\nnuxt/dist/app/nuxt.js:231:24\n```\n\nBesides these logs from the devtools plugins I see nothing in the actual logs, even with debug and dev flag",[],293,"Cannot read properties of undefined (reading 'provider') - nuxt apps not starting anymore","2024-11-04T12:44:48Z","https://github.com/nuxt/icon/issues/293",0.70206267,{"description":2899,"labels":2900,"number":2910,"owner":2874,"repository":2911,"state":2876,"title":2912,"updated_at":2913,"url":2914,"score":2915},"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?",[2901,2904,2907],{"name":2902,"color":2903},"documentation","0075ca",{"name":2905,"color":2906},"enhancement","a2eeef",{"name":2908,"color":2909},"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.7144979,{"description":2917,"labels":2918,"number":2919,"owner":2874,"repository":2885,"state":2920,"title":2921,"updated_at":2922,"url":2923,"score":2924},"My folder structure looks the same as it is described in the documentation (https://nuxt.com/modules/icon#custom-local-collections):\n\n`assets/my-icons/photogrammetry.svg`\n\nHowever, I load content from a json file:\n\n```json\n{\n \"data\": {\n \"0\": {\n \"title\": \"Video- & Photography\",\n \"icon\": \"my-icon:photogrammetry\",\n \"iconColor\": \"text-cyan-400\",\n [...]\n },\n```\n\n... into the component:\n\n```vue\n\u003Cscript setup>\nimport services from \"/public/jsons/services.json\"\n...\n\u003C/script>\n\n\u003Ctemplate>\n[...]\n \u003Cdiv class=\"[ card ] absolute\" :class=\"service.iconColor\">\n \u003CIcon :name=\"service.icon\" :color=\"service.iconColor\" size=\"10rem\" />\n \u003C/div>\n[...]\n\u003C/template>\n```\n\nThe icon (which is and remains black) does not accept any color, while any standard implementation (icon from a downloaded icon set like mdi) does indeed change the color of an icon.\n\n(Just in case this is not an error: What kind of \"treatment\" do I have to apply to make my icon accept color?)",[],307,"closed","custom local collections do not accept props like color","2024-11-23T10:19:42Z","https://github.com/nuxt/icon/issues/307",0.666221,{"description":2926,"labels":2927,"number":2934,"owner":2874,"repository":2875,"state":2920,"title":2935,"updated_at":2936,"url":2937,"score":2938},"### Description\n\nHi there,\n\nI'd like to know, how to deal with paginated data that comes from the used API, e.g. a Laravel resource response.\n\n```\n{\n \"current_page\": 1,\n \"data\": [\n {\n \"id\": \"1\",\n \"name\": \"Foo\",\n \"created_at\": \"2025-04-01T11:46:21+00:00\"\n },\n {\n \"id\": \"2\",\n \"name\": \"Bar\",\n \"created_at\": \"2025-04-01T11:46:21+00:00\"\n },\n ],\n \"first_page_url\": \"https:\\/\\/api.example.test\\/test?page%5Bsize%5D=30&page%5Bnumber%5D=1\",\n \"from\": 1,\n \"last_page\": 14,\n \"last_page_url\": \"https:\\/\\/api.example.test\\/test?page%5Bsize%5D=30&page%5Bnumber%5D=14\",\n \"links\": [\n {\n \"url\": null,\n \"label\": \"« Previous\",\n \"active\": false\n },\n {\n \"url\": \"https:\\/\\/api.example.test\\/test?page%5Bsize%5D=30&page%5Bnumber%5D=1\",\n \"label\": \"1\",\n \"active\": true\n },\n {\n \"url\": \"https:\\/\\/api.example.test\\/test?page%5Bsize%5D=30&page%5Bnumber%5D=2\",\n \"label\": \"2\",\n \"active\": false\n },\n {\n \"url\": \"https:\\/\\/api.example.test\\/test?page%5Bsize%5D=30&page%5Bnumber%5D=3\",\n \"label\": \"3\",\n \"active\": false\n },\n {\n \"url\": \"https:\\/\\/api.example.test\\/test?page%5Bsize%5D=30&page%5Bnumber%5D=4\",\n \"label\": \"4\",\n \"active\": false\n },\n {\n \"url\": \"https:\\/\\/api.example.test\\/test?page%5Bsize%5D=30&page%5Bnumber%5D=5\",\n \"label\": \"5\",\n \"active\": false\n },\n {\n \"url\": \"https:\\/\\/api.example.test\\/test?page%5Bsize%5D=30&page%5Bnumber%5D=6\",\n \"label\": \"6\",\n \"active\": false\n },\n {\n \"url\": \"https:\\/\\/api.example.test\\/test?page%5Bsize%5D=30&page%5Bnumber%5D=7\",\n \"label\": \"7\",\n \"active\": false\n },\n {\n \"url\": \"https:\\/\\/api.example.test\\/test?page%5Bsize%5D=30&page%5Bnumber%5D=8\",\n \"label\": \"8\",\n \"active\": false\n },\n {\n \"url\": \"https:\\/\\/api.example.test\\/test?page%5Bsize%5D=30&page%5Bnumber%5D=9\",\n \"label\": \"9\",\n \"active\": false\n },\n {\n \"url\": \"https:\\/\\/api.example.test\\/test?page%5Bsize%5D=30&page%5Bnumber%5D=10\",\n \"label\": \"10\",\n \"active\": false\n },\n {\n \"url\": null,\n \"label\": \"...\",\n \"active\": false\n },\n {\n \"url\": \"https:\\/\\/api.example.test\\/test?page%5Bsize%5D=30&page%5Bnumber%5D=13\",\n \"label\": \"13\",\n \"active\": false\n },\n {\n \"url\": \"https:\\/\\/api.example.test\\/test?page%5Bsize%5D=30&page%5Bnumber%5D=14\",\n \"label\": \"14\",\n \"active\": false\n },\n {\n \"url\": \"https:\\/\\/api.example.test\\/test?page%5Bsize%5D=30&page%5Bnumber%5D=2\",\n \"label\": \"Next »\",\n \"active\": false\n }\n ],\n \"next_page_url\": \"https:\\/\\/api.example.test\\/test?page%5Bsize%5D=30&page%5Bnumber%5D=2\",\n \"path\": \"https:\\/\\/api.example.test\\/test\",\n \"per_page\": 30,\n \"prev_page_url\": null,\n \"to\": 30,\n \"total\": 394\n}\n```\n\nI am a bit intimidated by the TanStack API.",[2928,2931],{"name":2929,"color":2930},"question","d876e3",{"name":2932,"color":2933},"v3","49DCB8",3776,"Use UTable with paginated data, which comes from API","2025-04-04T13:04:05Z","https://github.com/nuxt/ui/issues/3776",0.66834146,{"description":2940,"labels":2941,"number":2942,"owner":2874,"repository":2943,"state":2920,"title":2944,"updated_at":2945,"url":2946,"score":2947},"Docs: https://posthog.com/docs/libraries/js\r\n\r\nFor reference this is how I currently instrument it:\r\n\r\n```\r\nimport { Capacitor } from '@capacitor/core'\r\nimport { posthog } from 'posthog-js'\r\nimport { appVersion } from '~/shared/version'\r\n\r\nexport default defineNuxtPlugin({\r\n name: 'analytics',\r\n setup() {\r\n if (import.meta.env.TEST) {\r\n return\r\n }\r\n\r\n const config = useRuntimeConfig()\r\n const router = useRouter()\r\n\r\n if (config.public.analyticsReportingEnabled) {\r\n posthog.init(config.public.posthog.dsn, {\r\n capture_pageview: false,\r\n capture_pageleave: true,\r\n api_host: config.public.posthog.apiHost,\r\n disable_session_recording: true,\r\n advanced_disable_decide: true,\r\n advanced_disable_feature_flags: true,\r\n advanced_disable_feature_flags_on_first_load: true,\r\n enable_recording_console_log: false,\r\n autocapture: false\r\n })\r\n\r\n posthog.register({\r\n environment: config.public.appEnvironment,\r\n countryCode: config.public.appCountryCode,\r\n release: appVersion,\r\n platform: Capacitor.getPlatform(),\r\n native: Capacitor.isNativePlatform()\r\n })\r\n\r\n router.afterEach(to => {\r\n posthog.capture('$pageview', {\r\n $current_url: to.fullPath\r\n })\r\n })\r\n }\r\n\r\n return {\r\n provide: {\r\n analytics: posthog\r\n }\r\n }\r\n }\r\n})\r\n```\r\n\r\nand after the user has logged in or we detect they are already logged in on page load:\r\n\r\n```\r\nthis.analytics.identify(userId, {\r\n email\r\n roles\r\n})\r\n ```\r\n \r\n Thanks!\r\n\r\n",[],206,"scripts","Suggestion: Posthog [analytics]","2024-09-03T16:06:49Z","https://github.com/nuxt/scripts/issues/206",0.67818,{"description":2949,"labels":2950,"number":2953,"owner":2874,"repository":2875,"state":2920,"title":2954,"updated_at":2955,"url":2956,"score":2957},"### 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```",[2951,2952],{"name":2929,"color":2930},{"name":2932,"color":2933},2772,"@apply Tailwind CSS class in a component's `\u003Cstyle>` tag","2024-12-09T11:14:28Z","https://github.com/nuxt/ui/issues/2772",0.68030316,{"description":2959,"labels":2960,"number":2965,"owner":2874,"repository":2966,"state":2920,"title":2967,"updated_at":2968,"url":2969,"score":2970},"I've explored other font providers, looks like `fontsource` is also quite promising.\r\n\r\nCurrently most of its fonts are from Google Fonts, along with some icons and some other fonts. It's also the service that Cloudflare Fonts is fetching from.\r\n\r\n@danielroe Would you like to include this font provider? If so, I'd like to work on it.\r\n\r\nDocs: https://fontsource.org/docs",[2961,2962],{"name":2905,"color":2906},{"name":2963,"color":2964},"provider","1161A4",65,"fonts","feat: fontsource provider","2024-03-20T13:12:12Z","https://github.com/nuxt/fonts/issues/65",0.6803974,{"description":2972,"labels":2973,"number":2974,"owner":2874,"repository":2885,"state":2920,"title":2975,"updated_at":2976,"url":2977,"score":2978},"After installing an `@iconify-json/*` package (`@iconify-json/mdi` in my scenario), the following error gets spit out when the `/api/_nuxt_icon/:collection` endpoint is called\r\n\r\n\r\n\r\nIt seems to be caused by the dynamic import missing the json import attribute on line 120 of `module.ts` https://github.com/nuxt/icon/blob/85a0e7b940725561f35656d75a99179f88cecef8/src/module.ts#L120 \r\n\r\nAdding `{ with: { type: 'json' } }` as a second parameter resolves the error for me:\r\n\r\n```js\r\nimport('@iconify-json/${collection}/icons.json', { with: { type: 'json' } }).then(m => m.default)`\r\n```",[],186,"Locally installed `@iconify-json/*` packages result in 'needs an import attribute of type \"json\"' error","2024-07-15T15:35:07Z","https://github.com/nuxt/icon/issues/186",0.6849206,["Reactive",2980],{},["Set"],["ShallowReactive",2983],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fkXVVNChlXL19C6qtpklWKL70kBzL8V-3JMjTMPFDlaM":-1},"/nuxt/icon/301"]