\n \u003C/template>\n\n \u003Ctemplate v-else>\n \u003CDynamicRenderer :config=\"slotContent\" :key=\"slotContent.name || slotName\" />\n \u003C/template>\n \u003C/template>\n \u003C/component>\n\u003C/template>\n```\n\n\n\n#### `index.vue`\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { UButton, UCard, UContainer, UForm, UFormField, UInput } from '#components'\n\nconst config = {\n component: UContainer,\n class: 'h-screen flex justify-center items-center',\n slots: {\n default: [\n {\n component: UCard,\n slots: {\n default: [{\n component: UForm,\n class: 'space-y-4',\n slots: {\n default: [\n {\n component: UFormField,\n label: 'Username',\n name: 'username',\n required: true,\n slots: {\n default: [\n {\n component: UInput,\n placeholder: 'Enter Username',\n value: 'hh'\n }\n ]\n }\n },\n {\n component: UFormField,\n label: 'Password',\n name: 'password',\n required: true,\n slots: {\n default: [\n {\n component: UInput,\n type: 'password',\n placeholder: 'Enter Password',\n value: 'hh'\n }\n ]\n }\n },\n {\n component: UButton,\n label: 'Login',\n icon: 'i-lucide-user',\n variant: 'soft',\n type: 'submit',\n block: true\n }\n ]\n }\n }]\n }\n }\n ]\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003CDynamicRenderer :config=\"config\" />\n\u003C/template>\n```\n\n### Result \n\n\nIt would also be great if using this approach could eliminate the need to manually import components like:\n\n```ts\nimport { UButton, UCard, UContainer, UForm, UFormField, UInput } from '#components'\n```\n\nand instead rely on automatic resolution by the renderer itself.\n\nThanks for your work on Nuxt UI – it’s a fantastic toolkit!\n\n### Additional context\n\n_No response_",[2865,2868],{"name":2866,"color":2867},"enhancement","a2eeef",{"name":2869,"color":2870},"triage","ffffff",4138,"nuxt","ui","open","✨ Feature Request: Add `\u003CDynamicRenderer>` component for config-driven UI rendering","2025-05-12T16:36:30Z","https://github.com/nuxt/ui/issues/4138",0.7645122,{"description":2880,"labels":2881,"number":2889,"owner":2872,"repository":2873,"state":2874,"title":2890,"updated_at":2891,"url":2892,"score":2893},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.13.1\n- Nuxt Version: 3.17.4\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: pnpm@10.6.3\n- Builder: -\n- User Config: telemetry, ssr, future, compatibilityDate, modules, hooks, nitro, css, routeRules, devtools, experimental, typescript, imports\n- Runtime Modules: @nuxt/ui-pro@3.1.3, @vueuse/nuxt@13.3.0, @pinia/nuxt@0.11.0, @pinia/colada-nuxt@0.2.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.1.3\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/suspicious-water-smppjv\n\n### Description\n\nThe docs note that you can access exposed variables from `UForm`. I've found that the following fields are not reactive:\n- dirty \n- dirtyFields\n- blurredFields\n- touchedFields\n\n### Additional context\n\nI see in the [source](https://github.com/nuxt/ui/blob/v3/src/runtime/components/Form.vue) that they're not defined with `ref` or `reactive`.\n\nAdditionally, the `dirty` computed that gets exposed would never get updated since `dirtyFields` is not reactive.\n\n### Logs\n\n```shell-script\n\n```",[2882,2885,2888],{"name":2883,"color":2884},"bug","d73a4a",{"name":2886,"color":2887},"v3","49DCB8",{"name":2869,"color":2870},4238,"Form exposed dirty, dirtyFields, blurredFields, and touchedFields are not reactive","2025-05-28T03:58:59Z","https://github.com/nuxt/ui/issues/4238",0.7733259,{"description":2895,"labels":2896,"number":2903,"owner":2872,"repository":2872,"state":2904,"title":2905,"updated_at":2906,"url":2907,"score":2908},"### Describe the feature\n\nHi, I understand such tag `\u003Cscript id=\"__NUXT_DATA__\" ... />` is mandatory for hydration and client-side rendering, but I reckon showing raw values can cause security pitfall. I ran into a situation where secret values needed during client-side rendering.\r\n\r\nIt would be great if nuxt provides an encryption feature like below.\r\n\r\n```\r\n// nuxt.config.ts\r\nexport default defineNuxtConfig({\r\n nuxtData: {\r\n encryption: {\r\n type: 'AES',\r\n key: 'secret',\r\n }\r\n }\r\n});\r\n```\n\n### Additional information\n\n- [ ] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2897,2900],{"name":2898,"color":2899},"3.x","29bc7f",{"name":2901,"color":2902},"pending triage","E99695",24475,"closed","support `__NUXT_DATA__` encryption from nuxt config file","2023-11-27T09:35:39Z","https://github.com/nuxt/nuxt/issues/24475",0.7568088,{"description":2910,"labels":2911,"number":2913,"owner":2872,"repository":2873,"state":2904,"title":2914,"updated_at":2915,"url":2916,"score":2917},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nHi,\n\nWould it be possible to add an export of all components ?\n\nSomething like:\n\n```js\nexport * from './components'\n```\n\n### Additional context\n\nI'm trying to display a form field according to its value type (ex: boolean => checkbox, number => range ...).\n\nSadly, it looks like in composition API, one cannot use string for `\u003Ccomponent>` `:is` prop.\n\n```vue\n\u003Ctemplate>\n \u003C!-- This doesn't work -->\n \u003Ccomponent :is=\"typeof value === 'boolean' ? 'u-checkbox' : 'u-input'\" />\n\u003C/template>\n```\n\nApparently, you have to pass the component itself, but I'm unable to import components from Nuxt UI:\n\n```vue\n\u003Cscript setup>\n// This doesn't work\nimport { UCheckbox, UInput } from '@nuxt/ui';\n\u003C/script>\n\n\u003Ctemplate>\n \u003Ccomponent :is=\"typeof value === 'boolean' ? UCheckbox : UInput\" />\n\u003C/template>\n```\n\nI can use `v-if` as a workaround, but it forces me to duplicate a lot of props (class, listeners, model ...) on each component.",[2912],{"name":2866,"color":2867},2891,"Export of every components","2025-01-13T16:32:50Z","https://github.com/nuxt/ui/issues/2891",0.75799435,{"description":2919,"labels":2920,"number":2926,"owner":2872,"repository":2872,"state":2904,"title":2927,"updated_at":2928,"url":2929,"score":2930},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v18.16.0\r\n- Nuxt Version: 3.7.4\r\n- CLI Version: 3.9.0\r\n- Nitro Version: 2.6.3\r\n- Package Manager: pnpm@8.9.0\r\n- Builder: -\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-4cyshx?file=pages%2Findex.vue\r\n\r\n### Describe the bug\r\n\r\ninput Use v-model two-way binding, when change the v-model to :value, the two-way binding is still effective, need to refresh the page, then it will be normal.\r\n\r\n### Logs\r\n\r\n_No response_",[2921,2922,2923],{"name":2898,"color":2899},{"name":2901,"color":2902},{"name":2924,"color":2925},"needs reproduction","FBCA04",23688,"input Use v-model bidirectional binding hot update exception","2023-10-17T08:33:12Z","https://github.com/nuxt/nuxt/issues/23688",0.7604186,{"description":2932,"labels":2933,"number":2937,"owner":2872,"repository":2872,"state":2904,"title":2938,"updated_at":2939,"url":2940,"score":2941},"I am building a project with nuxt and i want to provide an oauth2 register/login to users. I have already seen and example with nuxt from @Atinux in the following link but if i am not wrong the client_id and secret are stored in the local storage and in the env variables which are accessible from both server and client side. I don't think that this is a good practice because anyone can grab them and use them. Does anyone knows a way to store them in a more secure way?\r\n\r\nAtinux oauth example.\r\nhttps://github.com/nuxt/example-auth0\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2167\">#c2167\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2934],{"name":2935,"color":2936},"2.x","d4c5f9",2496,"oauth2 ","2023-01-18T16:02:15Z","https://github.com/nuxt/nuxt/issues/2496",0.7614879,{"description":2943,"labels":2944,"number":2951,"owner":2872,"repository":2872,"state":2904,"title":2952,"updated_at":2953,"url":2954,"score":2955},"### Environment\r\n\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.11.2\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.6\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools, modules\r\n- Runtime Modules: @nuxt/content@2.12.1\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\nCheckout the project on Stackblitz:\r\n[https://stackblitz.com/edit/nuxt-starter-cjpm2f?file=app.vue](https://stackblitz.com/edit/nuxt-starter-cjpm2f?file=app.vue)\r\nThe input value should be 2, but it remains 1 if you remove the async statement or NuxtLayout, everything will be fixed.\r\n\r\n### Describe the bug\r\n\r\nIt seems something happens in NuxtLayout that breaks v-model behavior *before mount* and prevent it from updating the value of input. if you don't use any async statement or NuxtLayout, everything works fine.\r\n\r\n### Additional context\r\n\r\nIf you don't use v-model and use `:value` and `@input` instead or just print the variable value, everything works file, only v-model is broken.\r\n\r\n### Logs\r\n\r\n_No response_",[2945,2946,2947,2948],{"name":2898,"color":2899},{"name":2901,"color":2902},{"name":2924,"color":2925},{"name":2949,"color":2950},"closed-by-bot","ededed",26934,"NuxtLayout breaks v-model behaviour when used after any async statement","2024-05-07T01:49:01Z","https://github.com/nuxt/nuxt/issues/26934",0.76259214,{"description":2957,"labels":2958,"number":2960,"owner":2872,"repository":2872,"state":2904,"title":2961,"updated_at":2962,"url":2963,"score":2964}," if you include your login page in nuxt project, then the user is receiving all of your code before they're even authenticated.\r\nIs there a way to solve this?\r\n",[2959],{"name":2935,"color":2936},9051,"Is it insecure to include my login page in nuxt application?","2023-01-18T15:30:17Z","https://github.com/nuxt/nuxt/issues/9051",0.7640246,{"description":2966,"labels":2967,"number":2970,"owner":2872,"repository":2873,"state":2904,"title":2971,"updated_at":2972,"url":2973,"score":2974},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.14.0\n- Nuxt Version: 3.17.3\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: npm@11.3.0\n- Builder: -\n- User Config: app, build, colorMode, compatibilityDate, debug, devtools, fonts, future, hooks, i18n, icon, imports, modules, nitro, routeRules, runtimeConfig, security, ssr, sourcemap, css, telemetry, vite\n- Runtime Modules: @nuxt/eslint@1.3.1, @pinia/nuxt@0.11.0, @vueuse/nuxt@13.2.0, @nuxtjs/i18n@9.5.4, nuxt-security@2.2.0, @nuxt/ui@3.1.2\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.2\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/sharp-christian-kzdxt9?file=%2Fapp%2Fpages%2Findex.vue\n\n### Description\n\nStarting from v3.1.2, using the [built-in v-model-modifiers](https://vuejs.org/guide/essentials/forms.html#modifiers) produces type errors. They are still working tho, so its only a type issue.\n\nReproduction:\n1. Open provided link\n2. Run `pnpx nuxi typecheck`\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n➜ workspace git:(master) ✗ pnpx nuxi typecheck\nPackages: +1\n+\nProgress: resolved 1, reused 1, downloaded 0, added 1, done\nℹ Nuxt Icon server bundle mode is set to local 11:09:23 AM\n✔ Nuxt Icon discovered local-installed 2 collections: lucide, simple-icons 11:09:25 AM\nℹ Running with compatibility version 4 nuxt 11:09:25 AM\napp/pages/index.vue:8:22 - error TS2353: Object literal may only specify known properties, and 'modelModifiers' does not exist in type '{ readonly onBlur?: ((event: FocusEvent) => any) | undefined; readonly onChange?: ((event: Event) => any) | undefined; readonly \"onUpdate:modelValue\"?: ((payload: number) => any) | undefined; ... 24 more ...; modelValue?: number | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps'.\n\n8 \u003CUInput v-model.number=\"myNumber\" type=\"number\" />\n ~~~~~~~\n\napp/pages/index.vue:9:22 - error TS2353: Object literal may only specify known properties, and 'modelModifiers' does not exist in type '{ readonly onBlur?: ((event: FocusEvent) => any) | undefined; readonly onChange?: ((event: Event) => any) | undefined; readonly \"onUpdate:modelValue\"?: ((payload: string) => any) | undefined; ... 24 more ...; modelValue?: string | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps'.\n\n9 \u003CUInput v-model.lazy=\"myText\" />\n ~~~~~\n\n\nFound 2 errors in the same file, starting at: app/pages/index.vue:8\n\n\n ERROR Process exited with non-zero status (2) 11:09:41 AM\n\n at R._waitForOutput (/root/.cache/pnpm/v3/tmp/dlx-4483/node_modules/.pnpm/nuxi@3.25.1/node_modules/nuxi/dist/chunks/main.mjs:508:13)\n at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n at async Object.run (/root/.cache/pnpm/v3/tmp/dlx-4483/node_modules/.pnpm/nuxi@3.25.1/node_modules/nuxi/dist/chunks/typecheck.mjs:91:9)\n at async runCommand$1 (/root/.cache/pnpm/v3/tmp/dlx-4483/node_modules/.pnpm/nuxi@3.25.1/node_modules/nuxi/dist/shared/nuxi.BlFGnQYG.mjs:1767:16)\n at async runCommand$1 (/root/.cache/pnpm/v3/tmp/dlx-4483/node_modules/.pnpm/nuxi@3.25.1/node_modules/nuxi/dist/shared/nuxi.BlFGnQYG.mjs:1758:11)\n at async runMain$1 (/root/.cache/pnpm/v3/tmp/dlx-4483/node_modules/.pnpm/nuxi@3.25.1/node_modules/nuxi/dist/shared/nuxi.BlFGnQYG.mjs:1896:7) \n\n\n\n ERROR Process exited with non-zero status (2)\n```",[2968,2969],{"name":2883,"color":2884},{"name":2886,"color":2887},4166,"Built-in v-model modifiers produce type errors with v3.1.2","2025-05-22T12:51:25Z","https://github.com/nuxt/ui/issues/4166",0.7659744,{"description":2976,"labels":2977,"number":2980,"owner":2872,"repository":2873,"state":2904,"title":2981,"updated_at":2982,"url":2983,"score":2984},"### Environment\n\n------------------------------\n- Operating System: Windows_NT\n- Node Version: v20.10.0\n- Nuxt Version: 3.13.2\n- CLI Version: 3.14.0\n- Nitro Version: 2.9.7\n- Package Manager: yarn@4.5.0\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.x\n\n### Reproduction\n\n```vue\n\u003Ctemplate>\n\u003CUDropdownMenu :items=\"items\">\n \u003CUAvatar\n :src=\"profilePicture\"\n size=\"lg\"\n />\n\u003C/UDropdownMenu>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nconst profilePicture = ref('/this/image/does/not/exist.jpg')\nconst items = [\n[{\n\tlabel: 'Logout',\n\ticon: 'i-lucide-log-out',\n}]\n]\n\u003C/script>\n```\n\n### Description\n\nWhen the `src` of the image in `UAvatar` fails to get resolved for any reason (non-existent resource, network error, refused connection from the requested host, etc), it no longer triggers the expansion of the `UDropdownMenu`. \n\nNote that this might also affect `UPopover`, but I have not tested it yet. I will be able to test it later today.\n\nP.S. @benjamincanac this was the reason I initially included it in the migration guide, because I did not know it only happens on non-resolved images\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2978,2979],{"name":2883,"color":2884},{"name":2886,"color":2887},2923,"`UAvatar` with non-resolved `src` fails to trigger `UDropdownMenu`","2025-01-25T13:12:33Z","https://github.com/nuxt/ui/issues/2923",0.76787424,["Reactive",2986],{},["Set"],["ShallowReactive",2989],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$furlR3bkSwG34uVP9TrHmGVFXLqSA1po8_pIY7vv7Y3E":-1},"/nuxt/ui/3430"]