\n\u003C/template>\n```\n\nThis is working when loading the page SSR, but navigating to the page results in errors like this:\n`DR5f3n0Z.js:52 [Icon] failed to load icon 'twemoji:flag-hungary'`\n\nHow can I create the icon names dynamically?",[3023],{"name":3024,"color":3025},"need-repro","A50BA3",321,"nuxt","icon","open","Dynamic icon name","2024-12-12T08:54:20Z","https://github.com/nuxt/icon/issues/321",0.7592152,{"description":3035,"labels":3036,"number":3040,"owner":3027,"repository":3041,"state":3042,"title":3043,"updated_at":3044,"url":3045,"score":3046},"### Description\n\nWhen using a Table component, it would be a cool feature to allow the items to be modified in place and an event emitted. There arent really many good solutions for this in Vue ecosystem, that I know of. \n\n### Additional context\n\n_No response_",[3037],{"name":3038,"color":3039},"enhancement","a2eeef",2168,"ui","closed","Make an inplace editable table","2024-09-11T14:14:15Z","https://github.com/nuxt/ui/issues/2168",0.6894025,{"description":3048,"labels":3049,"number":3054,"owner":3027,"repository":3041,"state":3042,"title":3055,"updated_at":3056,"url":3057,"score":3058},"### For what version of Nuxt UI are you asking this question?\n\nv3.0.0-alpha.x\n\n### Description\n\nI want to customize my `app.config.ts` file from an external source.\n\nConsider the following:\n\n```ts\n// plugins/config.ts\n\nexport default defineNuxtPlugin({\n async setup(nuxtapp) {\n const config = await fetchConfig()\n // output: {ui: {primary: \"violet\", button: {slots: {base: \"hidden\"}}}}\n\n if (config?.app_config) {\n updateAppConfig(config.app_config);\n }\n },\n});\n```\n\nThe primary color is updated correctly, but the `hidden` class is not applied to buttons.\nAny ideas why?",[3050,3051],{"name":3038,"color":3039},{"name":3052,"color":3053},"v3","49DCB8",2828,"Runtime component customization with updateAppConfig","2025-04-12T15:53:05Z","https://github.com/nuxt/ui/issues/2828",0.7170639,{"description":3060,"labels":3061,"number":3064,"owner":3027,"repository":3041,"state":3042,"title":3065,"updated_at":3066,"url":3067,"score":3068},"### Description\n\nAs it is today, when you change the neutral color on dark mode, the whole background changes, which I personally love.\n\nI think it would be nice if that happened on light mode as well. So instead of using #fff, using neutral-50.\n\nWould that make sense?\n\nI'm willing to contribute if this suggestion is accepted.\n\n### Additional context\n\n_No response_",[3062,3063],{"name":3038,"color":3039},{"name":3052,"color":3053},3189,"Change light-mode body bg-color from white to neutral-50","2025-03-08T12:22:25Z","https://github.com/nuxt/ui/issues/3189",0.7302887,{"description":3070,"labels":3071,"number":3078,"owner":3027,"repository":3041,"state":3042,"title":3079,"updated_at":3080,"url":3081,"score":3082},"### 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_",[3072,3075],{"name":3073,"color":3074},"bug","d73a4a",{"name":3076,"color":3077},"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.73330784,{"description":3084,"labels":3085,"number":3095,"owner":3027,"repository":3027,"state":3042,"title":3096,"updated_at":3097,"url":3098,"score":3099},"### Environment\n\nThis bug relates to the documentation. \n\n### Reproduction\n\nThis bug relates to the documentation. \n\n### Describe the bug\n\nInside docs examples on [Guide -> Directory Structure -> server/](https://nuxt.com/docs/guide/directory-structure/server) the multiline code blocks are missing opening `{` for the arrow functions. This causes copy pastes to be broken.\r\n\r\nI initially thought this would just be a typo inside the markdown file, but the content itself appears to be fine. This leads me to believe that this is an issue with the code highlighting, possibly, but I'm not 100% sure.\r\n\r\n\r\n\r\nhttps://github.com/nuxt/framework/edit/main/docs/content/1.docs/2.guide/2.directory-structure/1.server.md\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3086,3089,3092],{"name":3087,"color":3088},"documentation","5319e7",{"name":3090,"color":3091},"3.x","29bc7f",{"name":3093,"color":3094},"pending triage","E99695",15546,"Docs code examples broken, missing \"{\"","2023-01-19T17:53:56Z","https://github.com/nuxt/nuxt/issues/15546",0.7396973,{"description":3101,"labels":3102,"number":3104,"owner":3027,"repository":3041,"state":3042,"title":3105,"updated_at":3106,"url":3107,"score":3108},"### Environment\r\n\r\n```\r\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v21.6.1\r\n- Nuxt Version: 3.13.1\r\n- CLI Version: 3.13.1\r\n- Nitro Version: 2.9.7\r\n- Package Manager: bun@1.1.26\r\n- Builder: -\r\n- User Config: compatibilityDate, devtools, modules\r\n- Runtime Modules: @nuxt/ui@2.18.4\r\n- Build Modules: -\r\n------------------------------\r\n```\r\n\r\n### Version\r\n\r\n2.18.4\r\n\r\n### Reproduction\r\n\r\nhttps://github.com/MickL/nuxtui-colors-bug\r\n\r\n### Description\r\n\r\nWhen the color prop is created dynamically, some css styles are not generated, especially for subtle and soft variants:\r\n\r\nFor example, `subtle` badges dont have correct border color and the background colors are missing:\r\n\r\n\u003Cimg width=\"237\" alt=\"Bildschirmfoto 2024-09-14 um 18 47 17\" src=\"https://github.com/user-attachments/assets/a3dd5d73-02ae-43d5-96ff-3ef67342cb1d\">\r\n\r\nIt should look like this:\r\n\r\n\u003Cimg width=\"236\" alt=\"Bildschirmfoto 2024-09-14 um 18 46 37\" src=\"https://github.com/user-attachments/assets/7fd2bd00-f2c2-40ed-a7f8-23ec07266d29\">\r\n\r\nIn my reproduction repo I used a table:\r\n```\r\n \u003CUTable :columns :rows>\r\n \u003Ctemplate #colors-data=\"{row}\">\r\n \u003CUBadge :color=\"row.color\" variant=\"subtle\">Subtle Badge\u003C/UBadge>\r\n \u003CUButton :color=\"row.color\" variant=\"soft\">Soft Button\u003C/UButton>\r\n \u003C/template>\r\n \u003C/UTable>\r\n```",[3103],{"name":3073,"color":3074},2199,"Missing tailwind classes for dynamic colors","2024-09-23T10:31:05Z","https://github.com/nuxt/ui/issues/2199",0.7409168,{"description":3110,"labels":3111,"number":3117,"owner":3027,"repository":3041,"state":3042,"title":3118,"updated_at":3119,"url":3120,"score":3121},"### Environment\n\n- Operating System: Windows 10 \n- Node Version: v22.10.0 \n- Nuxt Version: 3.16.0 \n- CLI Version: 3.22.5 \n- Nitro Version: 2.11.5 \n- Package Manager: pnpm@9.15.7 \n- Builder: -\n- User Config: compatibilityDate, devtools, modules, css, meta, ssr, runtimeConfig, ui \n- Runtime Modules: @nuxt/ui@3.0.0-beta.3, @nuxt/icon@1.10.3, @nuxt/fonts@0.11.0, @vueuse/nuxt@12.8.2\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nNuxt UI 3.0\n\n### Reproduction\n\n```\n\u003Ctemplate>\n\u003CUInput\n v-model=\"translation\"\n ref=\"translationField\" \n />\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```",[3112,3113,3114],{"name":3073,"color":3074},{"name":3052,"color":3053},{"name":3115,"color":3116},"triage","ffffff",3644,"\u003CUInput> template ref does not work","2025-03-21T13:14:18Z","https://github.com/nuxt/ui/issues/3644",0.7412398,{"description":3123,"labels":3124,"number":3125,"owner":3027,"repository":3126,"state":3042,"title":3127,"updated_at":3128,"url":3129,"score":3130},"Anyone can insight how to use it with Unocss ?",[],63,"fonts","Doc unclear how to use it with Unocss ","2024-04-01T11:00:14Z","https://github.com/nuxt/fonts/issues/63",0.74168915,{"description":3132,"labels":3133,"number":3136,"owner":3027,"repository":3041,"state":3042,"title":3137,"updated_at":3138,"url":3139,"score":3140},"### 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```",[3134,3135],{"name":3073,"color":3074},{"name":3052,"color":3053},2763,"postcss style not applying","2024-12-05T13:48:59Z","https://github.com/nuxt/ui/issues/2763",0.749162,["Reactive",3142],{},["Set"],["ShallowReactive",3145],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fmVub4OvIsWS_DpL51u8GjlMFg63Vm7ctdvSByuXng9w":-1},"/nuxt/nuxt.com/1556"]