\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_",[2884],{"name":2885,"color":2886},"pending triage","E99695",28086,"Changing `key` on page does not re-render it","2024-08-28T20:39:13Z","https://github.com/nuxt/nuxt/issues/28086",0.72655797,{"description":2893,"labels":2894,"number":2902,"owner":2874,"repository":2875,"state":2876,"title":2903,"updated_at":2904,"url":2905,"score":2906},"### For what version of Nuxt UI are you suggesting this?\n\nv3.0.0-alpha.x\n\n### Description\n\nHello everyone, I’d like to discuss the possibility of setting `props` by default from `AppConfig`. Currently, it’s very convenient that we can configure the theme through the config. It would be great to have a similar option for props. Previously, @benjamincanac mentioned [here](https://github.com/nuxt/ui/issues/1289#issuecomment-2480556540) that this is not currently planned.\n\nMy proposal is simple: wrap all `withDefaults` in our own implementation. This way, we can define props without making significant changes to the code.\n\n## What it could look like\n\nLet’s look at the `Accordion.vue` component. At the moment, its props look like this:\n```ts\nconst props = withDefaults(defineProps\u003CAccordionProps\u003CT>>(), {\n type: 'single',\n collapsible: true,\n labelKey: 'label'\n})\n```\nLet’s assume our wrapper is called `withUiDefaults`. Then the code would look like this:\n```diff\n-const props = withDefaults(defineProps\u003CAccordionProps\u003CT>>(), {\n+const props = withUiDefaults(defineProps\u003CAccordionProps\u003CT>>(), {\n type: 'single',\n collapsible: true,\n labelKey: 'label'\n})\n```\nThe implementation of `withUiDefaults` is quite simple:\n```ts\nfunction withUiDefaults(props, defaults) {\n const defaultFromConfig = {}\n\n return withDefaults(props, {\n ...defaults,\n ...defaultFromConfig\n })\n}\n``` \n\n## Issues I See\n\n1) **Typing `AppConfig` might be challenging** \n We would need to somehow generate types based on the components. \n **My opinion:** I think we can retrieve this using `vue-component-meta` during the UI build stage. So, in my opinion, this isn’t a significant problem.\n\n2) **Developers might set `modelValue` or other critical props by default** \n **My opinion:** In such cases, we can log a warning to the console. Additionally, developers should understand which props they are overriding. We won’t be able to cover all edge cases, but I don’t think we need to.\n\n### Additional context\n\n_No response_",[2895,2898,2901],{"name":2896,"color":2897},"enhancement","a2eeef",{"name":2899,"color":2900},"v3","49DCB8",{"name":2871,"color":2872},2662,"Override default props from `AppConfig`","2024-11-17T08:30:46Z","https://github.com/nuxt/ui/issues/2662",0.73783,{"description":2908,"labels":2909,"number":2912,"owner":2874,"repository":2875,"state":2876,"title":2913,"updated_at":2914,"url":2915,"score":2916},"### 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_",[2910,2911],{"name":2896,"color":2897},{"name":2871,"color":2872},2293,"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":2918,"labels":2919,"number":2922,"owner":2874,"repository":2875,"state":2923,"title":2924,"updated_at":2925,"url":2926,"score":2927},"### 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_",[2920,2921],{"name":2896,"color":2897},{"name":2899,"color":2900},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":2929,"labels":2930,"number":2934,"owner":2874,"repository":2875,"state":2923,"title":2935,"updated_at":2936,"url":2937,"score":2938},"### 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```",[2931,2932,2933],{"name":2868,"color":2869},{"name":2899,"color":2900},{"name":2871,"color":2872},3644,"\u003CUInput> template ref does not work","2025-03-21T13:14:18Z","https://github.com/nuxt/ui/issues/3644",0.7103086,{"description":2940,"labels":2941,"number":2944,"owner":2874,"repository":2875,"state":2923,"title":2945,"updated_at":2946,"url":2947,"score":2948},"### 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_",[2942,2943],{"name":2896,"color":2897},{"name":2899,"color":2900},3471,"Form improvements","2025-03-12T08:31:46Z","https://github.com/nuxt/ui/issues/3471",0.72417444,{"description":2950,"labels":2951,"number":2952,"owner":2874,"repository":2953,"state":2923,"title":2954,"updated_at":2955,"url":2956,"score":2957},"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":2959,"labels":2960,"number":2963,"owner":2874,"repository":2875,"state":2923,"title":2964,"updated_at":2965,"url":2966,"score":2967},"### 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```",[2961,2962],{"name":2868,"color":2869},{"name":2899,"color":2900},3756,"InputMenu multiple doesn't emit change on item removal","2025-03-31T19:14:47Z","https://github.com/nuxt/ui/issues/3756",0.7243887,{"description":2969,"labels":2970,"number":2973,"owner":2874,"repository":2875,"state":2923,"title":2974,"updated_at":2975,"url":2976,"score":2977},"### 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_",[2971,2972],{"name":2868,"color":2869},{"name":2899,"color":2900},2481,"Type error on `compoundVariants`","2024-10-28T21:43:49Z","https://github.com/nuxt/ui/issues/2481",0.72786367,["Reactive",2979],{},["Set"],["ShallowReactive",2982],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fdEZtp8GXBghmxI8GthCPVgSruXqIBL9IrT5PdM8fmh4":-1},"/nuxt/ui/2590"]