\n\u003C/template>\n\n\u003Cscript setup>\nconst translationField = ref(null)\n\nfunction nextCard() {\n translationField.value.focus() // throws: 'focus is not a function'\n \n nextTick(() => {\n translationField.value.focus() // same error\n })\n\n // below works ok\n nextTick(() => {\n const input = translationField.value?.$el?.querySelector('input')\n if (input) {\n input.focus()\n }\n })\n}\n\u003C/script>\n```\n\n\n### Description\nStandard Vue method of using template ref (for setting a focus, here) throws: 'focus() is not a function'\nIn the above code snippet I included workaround (credits to Sonnet 3.5)\nTried it dozen of times and checked this place to see if it has not been solved earlier.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2863,2866,2869],{"name":2864,"color":2865},"bug","d73a4a",{"name":2867,"color":2868},"v3","49DCB8",{"name":2870,"color":2871},"triage","ffffff",3644,"ui","closed","\u003CUInput> template ref does not work","2025-03-21T13:14:18Z","https://github.com/nuxt/ui/issues/3644",0.67371684,{"description":2880,"labels":2881,"number":2886,"owner":2853,"repository":2873,"state":2874,"title":2887,"updated_at":2888,"url":2889,"score":2890},"### For what version of Nuxt UI are you asking this question?\n\nv3-alpha\n\n### Description\n\nI'm experience problems with the VS Code Tailwind Intellisense plugin. I have used ui v2 without problems so far, but when using v3 it only shows suggestions when a tailwindcss.config.ts is freshly edited, but then after reloading or restarting VS Code, it doesn't work anymore. When it's working, it only shows a few of the classes, but not the most common ones like padding, margin etc..\n\nHas someone experienced the same issue and knows a fix for that? ",[2882,2885],{"name":2883,"color":2884},"question","d876e3",{"name":2867,"color":2868},2424,"V3 Intellisense not working correctly","2024-11-05T21:44:20Z","https://github.com/nuxt/ui/issues/2424",0.6744388,{"description":2892,"labels":2893,"number":2896,"owner":2853,"repository":2873,"state":2874,"title":2897,"updated_at":2898,"url":2899,"score":2900},"### Environment\n\n------------------------------\n- Operating System: Windows_NT\n- Node Version: v20.9.0\n- Nuxt Version: 3.13.1\n- CLI Version: 3.13.1\n- Nitro Version: 2.9.7\n- Package Manager: npm@10.9.0\n- Builder: -\n- User Config: devtools, modules, css, ui, colorMode, compatibilityDate, icon, sourcemap, experimental, nitro, future, pwa, routeRules, spaLoadingTemplate, runtimeConfig\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.9, @vueuse/nuxt@10.11.1, @nuxtjs/mdc@0.6.1, @formkit/auto-animate/nuxt@0.8.2, @vite-pwa/nuxt@0.10.5\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.9\n\n### Reproduction\n\n`style tag`\n\n`Use`\n\n`debug`\n\n\n\n### Description\n\nSorry, I don't know if it's a bad configuration on my part, however the styles in which I use @apply don't work for me.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2894,2895],{"name":2864,"color":2865},{"name":2867,"color":2868},2763,"postcss style not applying","2024-12-05T13:48:59Z","https://github.com/nuxt/ui/issues/2763",0.67875165,{"description":2902,"labels":2903,"number":2909,"owner":2853,"repository":2873,"state":2874,"title":2910,"updated_at":2911,"url":2912,"score":2913},"### Description\n\nBreadcrumb uses Link (and LinkBase) to implement the item rendering and navigation. Link (through LinkBase) in itself supports `onClick` event/prop. Now, passing `onClick` to the breadcrumb item does not go all the way through to the LinkBase, and thus prevents the fine-grained control of the Breadcrumb component.\n\nThe usage would look something like this:\n```\n\u003Ctemplate>\n \u003CUBreadcrumb :items=\"items\" />\n\u003C/template>\n\u003Cscript setup>\nconst items = [\n { label: \"click for one\", onClick: () => alert(\"1\"), to: \"/one\" },\n { label: \"click for two\", onClick: () => alert(\"2\"), to: \"/two\" },\n]\n\u003C/script>\n```\n\nMy need is to have some secondary effects happening besides the navigation when the user clicks on a breadcrumb item.\n\n### Additional context\n\n_No response_",[2904,2907,2908],{"name":2905,"color":2906},"enhancement","a2eeef",{"name":2867,"color":2868},{"name":2870,"color":2871},3631,"Support for `onClick` event on Breadcrumb items","2025-03-24T18:08:16Z","https://github.com/nuxt/ui/issues/3631",0.68881124,{"description":2915,"labels":2916,"number":2921,"owner":2853,"repository":2922,"state":2874,"title":2923,"updated_at":2924,"url":2925,"score":2926},"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",[2917,2918],{"name":2905,"color":2906},{"name":2919,"color":2920},"provider","1161A4",65,"fonts","feat: fontsource provider","2024-03-20T13:12:12Z","https://github.com/nuxt/fonts/issues/65",0.6931852,{"description":2928,"labels":2929,"number":2930,"owner":2853,"repository":2922,"state":2874,"title":2931,"updated_at":2932,"url":2933,"score":2934},"I am using the module with `fontshare` as a provider. When checking `pageInsights` it shows that `@font-face` is not being used. When adding `fontain` module it resolves the issue.\r\n\r\n\u003Cimg width=\"741\" alt=\"Screenshot 2024-06-22 at 23 39 50\" src=\"https://github.com/nuxt/fonts/assets/33263129/a91b98cd-7b15-4a13-9588-35bd8c0a0366\">\r\n\r\n\r\n\u003Cimg width=\"663\" alt=\"Screenshot 2024-06-22 at 22 38 07\" src=\"https://github.com/nuxt/fonts/assets/33263129/0fe5a298-1dd2-4fb3-b476-520be7d2ac08\">\r\n\r\n\r\nwhen using `fontain`\r\n\r\n\r\n\u003Cimg width=\"964\" alt=\"Screenshot 2024-06-22 at 22 34 07\" src=\"https://github.com/nuxt/fonts/assets/33263129/dca00dbe-a0bc-4163-a55b-e584f97a2506\">\r\n\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v20.14.0`\r\n- Nuxt Version: `3.12.2`\r\n- CLI Version: `3.12.0`\r\n- Nitro Version: `2.9.6`\r\n- Package Manager: `npm@10.7.0`\r\n- Builder: `-`\r\n- User Config: `devtools`, `future`, `modules`, `runtimeConfig`, `app`, `routeRules`, `devServer`, `build`, `fonts`, `tailwindcss`\r\n- Runtime Modules: `@nuxt/eslint@0.3.13`, `@nuxtjs/tailwindcss@6.12.0`, `@nuxt/image@1.7.0`, `@nuxt/fonts@0.7.0`, `@nuxtjs/fontaine@0.4.3`\r\n- Build Modules: `-`\r\n",[],182,"`@font-face` not used with `fontshare` provider","2024-09-23T12:32:00Z","https://github.com/nuxt/fonts/issues/182",0.6954576,{"description":2936,"labels":2937,"number":236,"owner":2853,"repository":2943,"state":2874,"title":2944,"updated_at":2945,"url":2946,"score":2947},"Update [Webreinvent partner page](https://nuxt.com/support/agencies/webreinvent) with content below :\n\nWebReinvent has 12+ years of experience building software and a team of 50+ software professionals including software developers, UI/UX designers, testers, DevOps, project managers, etc. The team is well-versed in the Nuxt ecosystem and has delivered multiple high-performance web apps, dashboards, real-time apps, multi-tenant SaaS applications, etc.\n\nWe are one of the most process-driven companies and we love to follow industry standards. Some of them are managing git repo, code review/audits, deploying new releases via CI/CD, automated software testing, maintaining detailed technical documentation, application performance monitoring, etc. We have been delivering MVP to enterprise-level software products from startup to MSME.\n\nContact us to build your MVP fast or migrate your legacy software to Nuxt or maintain your existing software or scale your software to the enterprise level. We're here to help.\n",[2938,2940],{"name":2905,"color":2939},"1ad6ff",{"name":2941,"color":2942},"marketing","f5c828","nuxt.com","Update Webreinvent partner page","2023-06-06T12:14:42Z","https://github.com/nuxt/nuxt.com/issues/1156",0.69575554,{"description":2949,"labels":2950,"number":2953,"owner":2853,"repository":2873,"state":2874,"title":2954,"updated_at":2955,"url":2956,"score":2957},"### 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```",[2951,2952],{"name":2864,"color":2865},{"name":2867,"color":2868},3513,"Nuxt 3.16.0 - ships with @unhead2","2025-03-10T08:49:36Z","https://github.com/nuxt/ui/issues/3513",0.7023551,{"description":2959,"labels":2960,"number":2962,"owner":2853,"repository":2873,"state":2874,"title":2963,"updated_at":2964,"url":2965,"score":2966},"### For what version of Nuxt UI are you asking this question?\n\nv2.x\n\n### Description\n\nThank you in advance for your help!\n\nWe’re using Nuxt UI Pro for styling in our application, which primarily uses a language other than English. When working with the `SelectMenu` component and enabling the `multiple` prop, the displayed value shows \"1 selected\" (or similar text like \"{x-number} selected\"). Instead, we’d like to display the actual selected value(s) of the SelectMenu, like when NOT using the `multiple` prop, if just one item is selected. And any more than that, we need to display the \"{x-number} selected\" it in our language, not English.\n\nDo I need to create a custom wrapper component for this, or is there a simpler way to customize the displayed text? I’m not that deep on frontend development and manipulating package classes in Nuxt 3, so I’d appreciate guidance on how to approach this issue.\n\nI’ve reviewed the source code here: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/SelectMenu.vue but couldn’t figure out how to achieve this.\n\nI see the code where the const for the label is generated, but whats the best approach to change that for us?\n\n```\n const label = computed(() => {\n if (!props.modelValue) return null\n\n if (Array.isArray(props.modelValue) && props.modelValue.length) {\n return `${props.modelValue.length} selected`\n } else if (['string', 'number'].includes(typeof props.modelValue)) {\n return props.valueAttribute ? accessor(selected.value, props.optionAttribute) : props.modelValue\n }\n\n return accessor(props.modelValue as Record\u003Cstring, any>, props.optionAttribute)\n })\n```\n\nAny advice or direction would be greatly appreciated!",[2961],{"name":2883,"color":2884},2867,"How can I change the \u003CUSelectMenu> to display the value of a selected item, instead of \"1 selected\" when adding the multiple prop","2024-12-09T11:50:53Z","https://github.com/nuxt/ui/issues/2867",0.7030575,["Reactive",2968],{},["Set"],["ShallowReactive",2971],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fH3Gu5DNu9aF-4iD7WcT5P6SOvApToozvuAYdd050mD4":-1},"/nuxt/scripts/434"]