\r\n\r\n \u003Cdiv>\u003CNuxtLink to=\"/\">HOME\u003C/NuxtLink>\u003C/div>\r\n \u003Cdiv>\u003CNuxtLink to=\"/?name=roro\">/?name=roro\u003C/NuxtLink>\u003C/div>\r\n \u003Cdiv>\u003CNuxtLink to=\"/about\">About\u003C/NuxtLink>\u003C/div>\r\n\r\n \u003Cul>\r\n \u003Cli>Enter a name in the input field above\u003C/li>\r\n \u003Cli>Click on the ?name=roro link\u003C/li>\r\n \u003Cli>Click on the HOME link\u003C/li>\r\n \u003Cli>The page should be re-rendered and reset but it's not happening. The input should be cleared.\u003C/li>\r\n \u003C/ul>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\n const route = useRoute()\r\n\r\n onBeforeRouteUpdate(to => {\r\n // Refresh the page (not hard refresh)!\r\n if (to.fullPath === '/') {\r\n route.meta.pageKey = 'test'\r\n\r\n document.querySelector('#logs')!.textContent = document.querySelector('#logs')!.textContent + 'Changing page key, it should re-render the page and clear all data...'\r\n }\r\n })\r\n\r\n definePageMeta({ key: (route) => route.meta.pageKey })\r\n\u003C/script>\r\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3145],{"name":3146,"color":3147},"pending triage","E99695",28086,"nuxt","open","Changing `key` on page does not re-render it","2024-08-28T20:39:13Z","https://github.com/nuxt/nuxt/issues/28086",0.7265579,{"description":3156,"labels":3157,"number":3164,"owner":3149,"repository":3165,"state":3150,"title":3166,"updated_at":3167,"url":3168,"score":3169},"### Description\r\n\r\n**Problem**\r\nThe current implementation of the keyboard shortcuts composable (defineShortcuts) doesn't work correctly with non-Latin keyboard layouts, such as Arabic. This limits the usability of the composable for users with different language settings.\r\n\r\n**Proposed Solution**\r\nImplement an optional configuration flag '_layoutIndependent_' that, when set to true, makes the composable use KeyboardEvent.code instead of KeyboardEvent.key. This change will allow the shortcuts to work regardless of the keyboard layout or language setting.\r\n\r\n### Additional context\r\n\r\n_No response_",[3158,3161],{"name":3159,"color":3160},"enhancement","a2eeef",{"name":3162,"color":3163},"triage","ffffff",2293,"ui","Add support for non-Latin keyboard layouts in defineShortcuts composable","2025-01-10T07:47:55Z","https://github.com/nuxt/ui/issues/2293",0.7391739,{"description":3171,"labels":3172,"number":3177,"owner":3149,"repository":3165,"state":3178,"title":3179,"updated_at":3180,"url":3181,"score":3182},"### Description\n\nThe Nuxt UI v2 dropdown has the option to open on hover or click. In v3 the only option available is click. \n\n\n\n### Additional context\n\n_No response_",[3173,3174],{"name":3159,"color":3160},{"name":3175,"color":3176},"v3","49DCB8",3322,"closed","[DropdownMenu] (v3) missing mode prop for hover/click","2025-03-08T12:22:25Z","https://github.com/nuxt/ui/issues/3322",0.70399606,{"description":3184,"labels":3185,"number":3191,"owner":3149,"repository":3165,"state":3178,"title":3192,"updated_at":3193,"url":3194,"score":3195},"### 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```",[3186,3189,3190],{"name":3187,"color":3188},"bug","d73a4a",{"name":3175,"color":3176},{"name":3162,"color":3163},3644,"\u003CUInput> template ref does not work","2025-03-21T13:14:18Z","https://github.com/nuxt/ui/issues/3644",0.7103086,{"description":3197,"labels":3198,"number":3201,"owner":3149,"repository":3165,"state":3178,"title":3202,"updated_at":3203,"url":3204,"score":3205},"### Description\n\nJust tried to implement my first form that does some smaller frontend validation and sends the payload to an API that will escalate errors as well.\n\nGoing through all the use cases, some are rather hard and cumbersome to implement:\n\n- Field validation errors are fine\n- Form errors require a field to work, there is no way to define Form wide errors through `Form.setErrors()` nor do they bubble up to a general error display just where the `\u003CUForm />` is anchored if the key is unknown.\n- The missing error bubbeling makes it tricky to react to more common errors like rate limiting through 429 status code, where the server responds with additional headers and maybe a JSON with further information. This creates a hard coupling of the loose backend error message and a hard field within the current form to route the error to.\n\nAlso the submission event `FormSubmitEvent` could offer better developer experience by offering not only data, but the actual Form instance. Right now, to handle any errors by a backend, you need to go through the typical, type-messy approach of\n\n```ts\n\u003Ctemplate>\n \u003CUForm ref=\"form\" @submit=\"onSubmit\" />\n\u003C/template>\n\n\u003Cscript lang=\"ts\" setup>\ntype FormSchema = v.InferOutput\u003Ctypeof CreateSomethingForm>\n\nconst form = useTemplateRef\u003CForm\u003CFormSchema>>('form')\n\nasync function onSubmit(event: FormSubmitEvent\u003CFormSchema>) {\n\n form.value?.setErrors([\n {name: 'account', message: 'Not valid'}\n ])\n}\n\u003C/script>\n```\n\ninstead of a simpler boilerplate:\n\n```ts\n\u003Ctemplate>\n \u003CUForm @submit=\"onSubmit\" />\n\u003C/template>\n\n\u003Cscript lang=\"ts\" setup>\ntype FormSchema = v.InferOutput\u003Ctypeof CreateSomethingForm>\n\nasync function onSubmit(event: FormSubmitEvent\u003CformSchema>) {\n event.form.setErrors([\n {name: 'account', message: 'Not valid'}\n ])\n}\n\u003C/script>\n```\n\n\n\n\n### Additional context\n\n_No response_",[3199,3200],{"name":3159,"color":3160},{"name":3175,"color":3176},3471,"Form improvements","2025-03-12T08:31:46Z","https://github.com/nuxt/ui/issues/3471",0.72417444,{"description":3207,"labels":3208,"number":3209,"owner":3149,"repository":3210,"state":3178,"title":3211,"updated_at":3212,"url":3213,"score":3214},"Could there be an issue with the website deployment?\n\n",[],1769,"nuxt.com","Website documentation is outdated","2025-01-27T10:26:08Z","https://github.com/nuxt/nuxt.com/issues/1769",0.72432196,{"description":3216,"labels":3217,"number":3220,"owner":3149,"repository":3165,"state":3178,"title":3221,"updated_at":3222,"url":3223,"score":3224},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.14.0\n- Nuxt Version: 3.16.1\n- CLI Version: 3.23.1\n- Nitro Version: 2.11.7\n- Package Manager: yarn@1.22.22\n- Builder: -\n- User Config: devtools, typescript, css, compatibilityDate, devServer, vite, runtimeConfig, app, ui, modules\n- Runtime Modules: @nuxt/ui@3.0.1, @pinia/nuxt@0.10.1, pinia-plugin-persistedstate/nuxt@4.2.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.1\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/blue-wildflower-wkjpcz\n\n### Description\n\nI don't know if this issue is related to this one : https://github.com/nuxt/ui/issues/3660\n\nWhen I selects items the `@change` is triggered as expected, but when I remove items it's never triggered (while `modelValue` is updated as intended).\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3218,3219],{"name":3187,"color":3188},{"name":3175,"color":3176},3756,"InputMenu multiple doesn't emit change on item removal","2025-03-31T19:14:47Z","https://github.com/nuxt/ui/issues/3756",0.72438866,{"description":3226,"labels":3227,"number":3230,"owner":3149,"repository":3165,"state":3178,"title":3231,"updated_at":3232,"url":3233,"score":3234},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.11.1\n- Nuxt Version: 3.13.2\n- CLI Version: 3.14.0\n- Nitro Version: 2.9.7\n- Package Manager: bun@1.1.33\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Version\n\nv3.0.0-alpha.7\n\n### Reproduction\n\n```ts\nexport default defineAppConfig({\n ui: {\n colors: {\n neutral: \"zinc\",\n primary: \"rose\",\n },\n button: {\n compoundVariants: [\n {\n color: \"neutral\",\n variant: \"outline\",\n class:\n \"ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] hover:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg)] aria-disabled:bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]\",\n },\n ],\n },\n },\n});\n```\n\n```\nType '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]' is not assignable to type 'DeepPartial\u003C({ color: \"primary\"; variant: \"solid\"; class: string; size?: undefined; square?: undefined; loading?: undefined; leading?: undefined; trailing?: undefined; } | { color: \"secondary\"; variant: \"solid\"; ... 5 more ...; trailing?: undefined; } | ... 46 more ... | { ...; })[], string>'.\n Type '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]' is not assignable to type '{ [key: string]: string | TightMap\u003Cstring>; }'.\n Index signature for type 'string' is missing in type '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]'.ts(2322)\n```\n\n### Description\n\nHi :) I am getting type errors when using `compoundVariant`. \n\nFor example, here is my `app.config.ts`:\n\n```ts\nexport default defineAppConfig({\n ui: {\n colors: {\n neutral: \"zinc\",\n primary: \"rose\",\n },\n button: {\n compoundVariants: [\n {\n color: \"neutral\",\n variant: \"outline\",\n class:\n \"ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] hover:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg)] aria-disabled:bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]\",\n },\n ],\n },\n },\n});\n```\n\nI am getting the following type error for `compoundVariants`:\n```\nType '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]' is not assignable to type 'DeepPartial\u003C({ color: \"primary\"; variant: \"solid\"; class: string; size?: undefined; square?: undefined; loading?: undefined; leading?: undefined; trailing?: undefined; } | { color: \"secondary\"; variant: \"solid\"; ... 5 more ...; trailing?: undefined; } | ... 46 more ... | { ...; })[], string>'.\n Type '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]' is not assignable to type '{ [key: string]: string | TightMap\u003Cstring>; }'.\n Index signature for type 'string' is missing in type '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]'.ts(2322)\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3228,3229],{"name":3187,"color":3188},{"name":3175,"color":3176},2481,"Type error on `compoundVariants`","2024-10-28T21:43:49Z","https://github.com/nuxt/ui/issues/2481",0.72786367,{"description":3236,"labels":3237,"number":3240,"owner":3149,"repository":3165,"state":3178,"title":3241,"updated_at":3242,"url":3243,"score":3244},"### 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```",[3238,3239],{"name":3187,"color":3188},{"name":3175,"color":3176},3513,"Nuxt 3.16.0 - ships with @unhead2","2025-03-10T08:49:36Z","https://github.com/nuxt/ui/issues/3513",0.7279079,{"description":3246,"labels":3247,"number":3252,"owner":3149,"repository":3165,"state":3178,"title":3253,"updated_at":3254,"url":3255,"score":3256},"### 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",[3248,3251],{"name":3249,"color":3250},"question","d876e3",{"name":3175,"color":3176},2869,"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.7297827,["Reactive",3258],{},["Set"],["ShallowReactive",3261],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fdEZtp8GXBghmxI8GthCPVgSruXqIBL9IrT5PdM8fmh4":-1},"/nuxt/ui/2590"]