\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```",[3110,3111,3112],{"name":3020,"color":3021},{"name":3051,"color":3052},{"name":3023,"color":3024},3644,"\u003CUInput> template ref does not work","2025-03-21T13:14:18Z","https://github.com/nuxt/ui/issues/3644",0.7365005,{"description":3119,"labels":3120,"number":3125,"owner":3026,"repository":3027,"state":3041,"title":3126,"updated_at":3127,"url":3128,"score":3129},"### 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_",[3121,3122],{"name":3020,"color":3021},{"name":3123,"color":3124},"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.7377372,{"description":3131,"labels":3132,"number":3133,"owner":3026,"repository":3134,"state":3041,"title":3135,"updated_at":3136,"url":3137,"score":3138},"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,"icon","custom local collections do not accept props like color","2024-11-23T10:19:42Z","https://github.com/nuxt/icon/issues/307",0.7385701,["Reactive",3140],{},["Set"],["ShallowReactive",3143],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fxvQrbfCqH6o36zvXVm_OAXdEMw9-VtWGDMhWaFMenS4":-1},"/nuxt/ui/2935"]