\n\u003C/svg>`",[],382,"Some local SVGs cannot be loaded","2025-03-30T07:43:06Z","https://github.com/nuxt/icon/issues/382",0.7480394,{"description":3055,"labels":3056,"number":3060,"owner":3022,"repository":3041,"state":3061,"title":3062,"updated_at":3063,"url":3064,"score":3065},"(reported on discord) you can see by hard-reloading https://nuxt.com/modules?q=svg, for example.\r\n\r\nprobably similar to https://github.com/nuxt/nuxt.com/issues/1417",[3057],{"name":3058,"color":3059},"bug","ff281a",1455,"closed","query parameters on module page result in hydration mismatch","2025-03-24T22:03:27Z","https://github.com/nuxt/nuxt.com/issues/1455",0.6728909,{"description":3067,"labels":3068,"number":3073,"owner":3022,"repository":3074,"state":3061,"title":3075,"updated_at":3076,"url":3077,"score":3078},"### For what version of Nuxt UI are you asking this question?\n\nv3.0.0-alpha.x\n\n### Description\n\n### Environment\n\n* Operating System: Linux\n* Node Version: v20.15.1\n* Nuxt Version: 3.14.1592\n* Package Manager: npm@10.7.0\n* Nuxt UI: v3.0.0-alpha.x\n\n### Description\nHello, I have the following configurations; \n\n#### assets/css/main.css\n```css\n@import \"tailwindcss\";\n@import \"@nuxt/ui\";\n\n@theme {\n /* Font Family Extend */\n --font-display: 'Work Sans', sans-serif;\n --font-content: 'Roboto', sans-serif;\n --font-condensed: 'Roboto Condensed', sans-serif;\n\n\n /* Color Extend */\n --color-brand-50: #fef4ee;\n --color-brand-100: #fcdbc5;\n --color-brand-200: #facaae;\n --color-brand-300: #f6a57b;\n --color-brand-400: #f27545;\n --color-brand-500: #ee5221;\n --color-brand-600: #df3917;\n --color-brand-700: #b92915;\n --color-brand-800: #932219;\n --color-brand-900: #772017;\n --color-brand-950: #400d0a;\n}\n\n:root {\n --ui-primary: var(--color-brand-500);\n}\n```\n\nand my nuxt.config.ts file; \n```ts\nexport default defineNuxtConfig({\n // ....\n modules: ['@nuxt/ui', '@pinia/nuxt'],\n css: ['~/assets/css/main.css', '~/assets/scss/common.scss'],\n vite: {\n css: {\n preprocessorOptions: {\n scss: { api: 'modern-compiler' }\n }\n }\n },\n // ....\n});\n```\nWith the configurations defined as above when i set ssr:false in my nuxt.config.ts, my custom color called 'brand' is not applied to components and the default green is used from the tailwind. With ssr: true everything is ok with `npm run dev`. I also tried to set the color 'brand' in app.config.ts \n\n```ts\nexport default defineAppConfig({\n ui:{\n colors: {\n primary: 'brand'\n }\n }\n});\n``` \nwith this setting again everything works but this time ts complains about `Type '\"brand\"' is not assignable to type 'Color | undefined'.ts(2322)`. \n\nI did not find a true way to set colors from extended tailwindcss color palette. Thanks in advance for any help.\n\n\nThe following screenshot; ssr: false and primary color defined on ```:root {}``` \n\n\n\nThe following screenshot; ssr: true and primary color defined on ```:root {}``` \n\n\n\n\n \nThe following screenshot; ssr: false and primary color defined on 'appconfig' but this time I have the following error from ts\n\n\n\n\n\n\nEdit 1: \n> [!IMPORTANT]\n> I also tried to extend on a types/colors.d.ts file the `tailwindcss/colors` namespace to add my custom color but no chance\n\n```ts\nimport colors from 'tailwindcss/colors'\n\n\ndeclare module 'tailwindcss/colors' {\n const colors = colors | 'brand'\n export default colors;\n}\n```\n\n",[3069,3070],{"name":3019,"color":3020},{"name":3071,"color":3072},"v3","49DCB8",2869,"ui","Use a custom color instead of the predefined Tailwind colors with ssr false","2024-12-16T09:47:16Z","https://github.com/nuxt/ui/issues/2869",0.71404785,{"description":3080,"labels":3081,"number":3084,"owner":3022,"repository":3074,"state":3061,"title":3085,"updated_at":3086,"url":3087,"score":3088},"### Environment\r\n\r\n- Operating System: Darwin\r\n- Node Version: v20.15.1\r\n- Nuxt Version: 3.13.2\r\n- CLI Version: 3.13.2\r\n- Nitro Version: 2.9.7\r\n- Package Manager: pnpm@8.15.9\r\n- Builder: -\r\n- User Config: app, colorMode, compatibilityDate, css, devServer, devtools, i18n, modules, openFetch, runtimeConfig, ssr, tailwindcss\r\n- Runtime Modules: @nuxt/ui@2.18.0, @pinia/nuxt@0.5.1, nuxt-icons@3.2.1, @nuxtjs/i18n@8.5.3, nuxt-open-fetch@0.9.1\r\n- Build Modules: -\r\n\r\n### Version\r\n\r\nv.2.18.0\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-ui-k1f28x?file=app.config.ts\r\n\r\n### Description\r\n\r\nSince updating the library to version 2.18.0, custom variants defined in the app.config.ts are no longer recognized by TypeScript, resulting in type errors when using these custom variants in the code.\r\n\r\nSteps to reproduce:\r\n\r\n1. Define a custom variant in app.config.ts\r\n2. Observe TypeScript type errors indicating the variant is not recognized when using it to custom another button ( in app.config.ts )\r\n\r\nExpected behavior: Custom variants should be properly recognized and validated by TypeScript, as they were in versions prior to 2.18.0.\r\n\r\nThank you for your help in resolving this issue!\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3082],{"name":3058,"color":3083},"d73a4a",2221,"Custom variants not recognized by TypeScript in app.config.ts after updating to v2.18.0","2024-11-26T13:14:03Z","https://github.com/nuxt/ui/issues/2221",0.7232708,{"labels":3090,"number":3097,"owner":3022,"repository":3022,"state":3061,"title":3098,"updated_at":3099,"url":3100,"score":3101},[3091,3094],{"name":3092,"color":3093},"documentation","5319e7",{"name":3095,"color":3096},"3.x","29bc7f",11896,"Docs; Broken link to https://v3.nuxtjs.org/concepts/hybrid-rendering 404 not found","2023-01-19T15:48:18Z","https://github.com/nuxt/nuxt/issues/11896",0.73131585,{"labels":3103,"number":3110,"owner":3022,"repository":3022,"state":3061,"title":3111,"updated_at":3112,"url":3113,"score":3114},[3104,3107],{"name":3105,"color":3106},"pending triage","E99695",{"name":3108,"color":3109},"2.x","d4c5f9",7172,"Pages 404 on page refresh using Github Pages","2023-01-22T15:34:50Z","https://github.com/nuxt/nuxt/issues/7172",0.7337696,{"description":3116,"labels":3117,"number":3123,"owner":3022,"repository":3074,"state":3061,"title":3124,"updated_at":3125,"url":3126,"score":3127},"### 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```",[3118,3119,3120],{"name":3058,"color":3083},{"name":3071,"color":3072},{"name":3121,"color":3122},"triage","ffffff",3644,"\u003CUInput> template ref does not work","2025-03-21T13:14:18Z","https://github.com/nuxt/ui/issues/3644",0.73659587,["Reactive",3129],{},["Set"],["ShallowReactive",3132],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fuoJt4Qld-HgGu6EAgMvy2RIUBU7k0If7UUa13avgfdM":-1},"/nuxt/test-utils/787"]