\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```",[2929,2930,2931],{"name":2866,"color":2867},{"name":2884,"color":2885},{"name":2869,"color":2870},3644,"\u003CUInput> template ref does not work","2025-03-21T13:14:18Z","https://github.com/nuxt/ui/issues/3644",0.73478794,{"description":2938,"labels":2939,"number":2944,"owner":2872,"repository":2873,"state":2909,"title":2945,"updated_at":2946,"url":2947,"score":2948},"### Environment\r\n\r\n- \"@nuxt/ui\": \"^2.18.6\",\r\n- \"nuxt\": \"^3.13.2\",\r\n- \"vue\": \"^3.5.10\",\r\n\r\n### Version\r\n\r\nv2.18.6\r\n\r\n### Reproduction\r\n\r\nhttps://github.com/guirak/NuxtUiTailwindContentPurgedAtFirstLaunch\r\n\r\n### Description\r\n\r\nHello,\r\n\r\nI'm having a important nuxt ui mono repo project and I'm encountering problems with nuxt/ui since version 6.12.0 of @nuxtjs/tailwindcss. \r\n\r\nI was forced to stay in an old version of nuxt/ui to don't have the problem : \r\n\r\n```\r\n \"pnpm\": {\r\n \"overrides\": {\r\n \"@nuxtjs/tailwindcss\": \"6.11.4\",\r\n \"@nuxt/ui\": \"2.15.2\"\r\n }\r\n },\r\n```\r\n\r\n# What happens ? \r\n\r\nAt first launch, css classes used in nuxt ui components are not correctly taken into account. \r\nIt's necessary to restart a second time the app to have the correct display\r\n\r\nThe bug is present since the version 6.12.0 of nuxtjs/tailwindcss. Maybe some effect of the First Class HMR.\r\n\r\n## Step to reproduce \r\n\r\nThe code at the following link is a minimal reproduction of my project structure : https://github.com/guirak/NuxtUiTailwindContentPurgedAtFirstLaunch\r\n\r\n- From the root project path, launch the following command : \r\n\r\n```bash\r\n# Clear the build \r\n./scripts/CleanProject.bash\r\n\r\n# Install and prepare \r\npnpm i; pnpm run dev:prepare\r\n\r\n# Launch the app\r\ncd apps/mmi-order-front-office\r\npnpm run dev\r\n```\r\n\r\n**The tailwind classes used in apps and modules are correctly displayed but the tailwind classes defined in the nuxt-ui components are not taken into account.**\r\n\r\n\r\n\r\n- Stop and restart the server\r\n\r\n```bash\r\npnpm run dev\r\n```\r\n\r\n**All tailwind classes are correctly taken into account.**\r\n\r\n\r\n\r\n\r\n\r\nThe problem is present too when building the prod version with **pnpm run build**\r\n\r\n\r\nThe problem seems to happens when using nuxt ui in a nuxt module. Please, have you any ideas, to solve this problem. \r\n\r\n\r\nThank you\r\n\r\n\r\n\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2940,2941],{"name":2866,"color":2867},{"name":2942,"color":2943},"upstream","78bddb",2282,"Since Tailwind First Class HMR, nuxt-ui components css classes not taken into account at first launch","2024-10-18T09:16:15Z","https://github.com/nuxt/ui/issues/2282",0.7476534,{"description":2950,"labels":2951,"number":2954,"owner":2872,"repository":2873,"state":2909,"title":2955,"updated_at":2956,"url":2957,"score":2958},"### 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_",[2952,2953],{"name":2866,"color":2867},{"name":2884,"color":2885},2349,"UInput causes error","2024-10-10T14:15:25Z","https://github.com/nuxt/ui/issues/2349",0.74785906,{"description":2960,"labels":2961,"number":2963,"owner":2872,"repository":2873,"state":2909,"title":2964,"updated_at":2965,"url":2966,"score":2967},"### 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!",[2962],{"name":2918,"color":2919},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.74907756,{"description":2969,"labels":2970,"number":2977,"owner":2872,"repository":2978,"state":2909,"title":2979,"updated_at":2980,"url":2981,"score":2982},"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",[2971,2974],{"name":2972,"color":2973},"enhancement","a2eeef",{"name":2975,"color":2976},"provider","1161A4",65,"fonts","feat: fontsource provider","2024-03-20T13:12:12Z","https://github.com/nuxt/fonts/issues/65",0.74949664,["Reactive",2984],{},["Set"],["ShallowReactive",2987],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f_eI04UhRPUAkltZDBuNrTN58oTBayIb1KHoeiK4Bcbs":-1},"/nuxt/icon/346"]