\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.68578136,{"description":2882,"labels":2883,"number":2884,"owner":2874,"repository":2885,"state":2876,"title":2886,"updated_at":2887,"url":2888,"score":2889},"Hello\nIn your playground where is a possibility to set `mode: css` and image span will have `--svg` variable which could be used as value for `mask-image`\nIn `getIconCss` method there is property `mode: mask` which can return this variable\nhttps://iconify.design/docs/libraries/utils/get-icon-css.html#geticoncss\n\nIn latest `@nuxt/icon` svg content in `mode: css` always uses as `background-image` value/\n\nCan you add property which allows to get `--svg` variable which could be used as value for `mask-image`?",[],367,"icon","Use css icon data as mask-image","2025-03-12T12:15:51Z","https://github.com/nuxt/icon/issues/367",0.6979445,{"description":2891,"labels":2892,"number":2893,"owner":2874,"repository":2885,"state":2876,"title":2894,"updated_at":2895,"url":2896,"score":2897},"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.7007552,{"description":2899,"labels":2900,"number":2907,"owner":2874,"repository":2908,"state":2909,"title":2910,"updated_at":2911,"url":2912,"score":2913},"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",[2901,2904],{"name":2902,"color":2903},"enhancement","a2eeef",{"name":2905,"color":2906},"provider","1161A4",65,"fonts","closed","feat: fontsource provider","2024-03-20T13:12:12Z","https://github.com/nuxt/fonts/issues/65",0.58292013,{"description":2915,"labels":2916,"number":2917,"owner":2874,"repository":2918,"state":2909,"title":2919,"updated_at":2920,"url":2921,"score":2922},"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.5953583,{"description":2924,"labels":2925,"number":2929,"owner":2874,"repository":2918,"state":2909,"title":2930,"updated_at":2931,"url":2932,"score":2933},"Similar to https://github.com/nuxt/scripts/issues/30, this will block the public announcement.\r\n\r\nThese are several items that should be completed for the public release of the module. Any contributions are more than welcome.\r\n\r\n## Outstanding Issues\r\n\r\n- [x] https://github.com/nuxt/scripts/issues?q=sort%3Aupdated-desc+is%3Aissue+is%3Aopen+label%3Apre-announce++label%3Abug\r\n\r\n## Nuxt\r\n\r\n- [x] Nuxt Script bindings\r\n- [x] Create a module on [nuxt/modules](https://github.com/nuxt/modules): https://github.com/nuxt/modules/pull/953\r\n\r\n## [Documentation](https://scripts.nuxt.com/)\r\n\r\n### **Content** \r\n\r\n- [x] Review all content, fix typos, grammar etc\r\n- [x] Blog article introducing Nuxt Scripts\r\n- [x] Rewrite confetti tutorial for home page usage\r\n- [x] https://github.com/nuxt/scripts/issues/69\r\n\r\n### :warning: **Breaking Changes**\r\n\r\n- https://github.com/nuxt/scripts/commit/038d891502c5c5c945c59f42031095ddf43433e1\r\n- https://github.com/nuxt/scripts/commit/6abc6a2ba5997a99a50dd8133c8b88fcd0ed4daf\r\n- https://github.com/nuxt/scripts/commit/d32e0d88f88def586dd24969667ddfbe3a50544f\r\n- https://github.com/nuxt/scripts/commit/74235272a480d4d8928327d5760e0ce277f05c53\r\n\r\n### **Home Page**\r\n\r\n- [x] Add 1-2 \"feature\" (problem / solution) elements to the home page, \r\n\r\n## Nuxt Scripts\r\n\r\n### Tests\r\n\r\n- [x] e2e Bundling tests\r\n - [x] registry script\r\n\r\n### Module Integrations\r\n\r\n- [x] https://github.com/nuxt-modules/turnstile/pull/306 - Provides a sanity check that the API can support module integrations\r\n\r\n\r\n",[2926],{"name":2927,"color":2928},"pre-announce","c2e0c6",47,"Public Announce Tasks","2024-08-16T13:00:58Z","https://github.com/nuxt/scripts/issues/47",0.64438814,{"description":2935,"labels":2936,"number":2941,"owner":2874,"repository":2875,"state":2909,"title":2942,"updated_at":2943,"url":2944,"score":2945},"### Environment\n\n\n\nI get this error anytime I try and use \u003CUInput /> even without any other code.\n\n### Version\n\nv3.0.0-alpha.5\n\n### Reproduction\n\n`\u003Ctemplate>\n \u003CUContainer>\n \u003CUForm :schema=\"schema\" :state=\"state\" class=\"space-y-4\" @submit=\"onSubmit\">\n \u003CUFormField label=\"Code\" name=\"Code\"\n >\u003CUInput v-model=\"state.code\" />\n \u003C/UFormField>\n \u003C/UForm>\n \u003C/UContainer>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport { z } from 'zod';\nimport type { FormSubmitEvent } from '#ui/types';\n\nconst supabase = useSupabaseClient();\nconst toast = useToast();\n\n//Form\nconst schema = z.object({\n code: z.string().min(3),\n});\n\ntype Schema = z.output\u003Ctypeof schema>;\n\nconst state = reactive\u003CPartial\u003CSchema>>({\n code: undefined,\n});\n\nasync function onSubmit(event: FormSubmitEvent\u003CSchema>) {\n toast.add({\n title: 'Success',\n description: 'The form has been submitted.',\n color: 'success',\n });\n console.log(event.data);\n}\n\u003C/script>\n`\n\n### Description\n\nUInput causes an error\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2937,2938],{"name":2868,"color":2869},{"name":2939,"color":2940},"v3","49DCB8",2349,"UInput causes error","2024-10-10T14:15:25Z","https://github.com/nuxt/ui/issues/2349",0.6553343,{"description":2947,"labels":2948,"number":2953,"owner":2874,"repository":2875,"state":2909,"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```",[2949,2952],{"name":2950,"color":2951},"question","d876e3",{"name":2939,"color":2940},2772,"@apply Tailwind CSS class in a component's `\u003Cstyle>` tag","2024-12-09T11:14:28Z","https://github.com/nuxt/ui/issues/2772",0.65724564,{"description":2959,"labels":2960,"number":2961,"owner":2874,"repository":2885,"state":2909,"title":2962,"updated_at":2963,"url":2964,"score":2965},"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.6680242,{"description":2967,"labels":2968,"number":2969,"owner":2874,"repository":2885,"state":2909,"title":2970,"updated_at":2971,"url":2972,"score":2973},"I have this kind of template:\n```\n \u003Cspan>\n \u003CIcon\n v-show=\"!searching\"\n name=\"i-heroicons-magnifying-glass-20-solid\" />\n \u003CIcon\n v-show=\"searching\"\n name=\"i-heroicons-arrow-path-20-solid\"\n class=\"animate-spin\"\n />\u003C/span>\n```\n\nSo, it should show `magnifying-glass` when not searching and `arrow-path` when searching. This does not work. Depending on if the view was loaded during navigation or page load it does not change or there a both. With `v-if` it works fine.\n\nHere is a reproduction with `nuxt-ui`:\nhttps://stackblitz.com/edit/nuxt-ui-7zcwsg?file=app.vue,package.json\n\nAnd here is a reproduction from `nuxt-icon-playground`:\nhttps://stackblitz.com/edit/nuxt-icon-playground-odkjmz?file=app.vue,package.json\n\nIt works with 1.7.6 but not 1.8.0 onwards. Could this be related to #300 ?\n\n---\n```\n❯ npx nuxt info\nWorking directory: /home/projects/nuxt-ui \nNuxt project info: \n\n------------------------------\n- Operating System: Linux\n- Node Version: v18.20.3\n- Nuxt Version: 3.14.159\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@8.15.6\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@2.19.2\n- Build Modules: -\n------------------------------\n```\n",[],301,"Issue with v-show on icons in 1.8.1 or 1.8.0","2024-11-20T15:03:29Z","https://github.com/nuxt/icon/issues/301",0.6719423,["Reactive",2975],{},["Set"],["ShallowReactive",2978],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fgHp0PJPWI7QQrr5u5KdkYIfXfZMuiBITJdmE-6RgQ90":-1},"/nuxt/icon/307"]