\r\n \r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\n\r\n const route = useRoute()\r\n const runtimeConfig = useRuntimeConfig()\r\n const [path] = route.params.id.slice(-1)\r\n const { data } = reactive(await $fetch(`${runtimeConfig.public.BASE_URL}${runtimeConfig.public.SERVICE}/web/portal/${runtimeConfig.public.POI_NAME}/form/${path}`))\r\n \r\n\u003C/script>\r\n```\r\n\r\n\r\ncomponent/form.vue\r\n\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"lgc-form-input-group\">\r\n \u003Cp v-if=\"label\" class=\"lgc-form-input-group__label\">{{ label }}\u003C/p>\r\n \u003Cdiv class=\"lgc-form-input-group__form\">\r\n \u003C!-- v-bind=\"!item.type.toLowerCase().includes('form') ? { data: item } : item\" -->\r\n \u003Ccomponent :attr=\"index\" v-for=\"(item, index) in data\" :key=\"index\" :is=\"item.type\" v-bind=\"item\" \r\n @update:isValid=\"item.isValid = $event\"\r\n @emit-value=\"constructPayload(item, $event)\"\r\n @emit-input-and-value=\"constructPayload($event.input, $event.payload)\"\r\n @add-error=\"errorManagement('add', $event)\"\r\n @remove-error=\"errorManagement('remove', $event)\"\r\n @lgc-action=\"$emit($event.handler, $event)\"\r\n >\u003C/component>\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nimport { v4 as uuidv4 } from 'uuid';\r\n\r\nconst emit = defineEmits(['emit-value','lgc-action'])\r\n\r\nconst props = defineProps({\r\n data: {\r\n type: Array,\r\n required: true\r\n },\r\n id: {\r\n type: String,\r\n required: false\r\n },\r\n label: {\r\n type: String,\r\n required: false\r\n },\r\n value: {\r\n type: Object,\r\n required: false,\r\n default() {\r\n return {}\r\n }\r\n },\r\n uuid: {\r\n type: String,\r\n required: false,\r\n default() {\r\n return uuidv4()\r\n }\r\n }\r\n })\r\n\r\n\r\n const inputValue= reactive(props.value ? props.value : {})\r\n\r\n function constructPayload(input, payload) {\r\n inputValue[input.id] = payload\r\n }\r\n\r\n function errorManagement(action, error) {\r\n let component = props.data.find(el => el.type === 'lgc-form-error');\r\n if (component) {\r\n let already = component.errors.find(el => el.key === error.key && el.byClient)\r\n let index = component.errors.indexOf(already)\r\n switch (action) {\r\n case 'add':\r\n if (component) {\r\n if (already) component.errors.splice(index, 1)\r\n if (error.value) component.errors.push(error)\r\n }\r\n break;\r\n case 'remove':\r\n if (component) {\r\n if (already) component.errors.splice(index, 1)\r\n }\r\n break;\r\n default:\r\n break;\r\n }\r\n } else {\r\n emit(`${action}-error`, error)\r\n }\r\n }\r\n\r\n async function submit() {\r\n emit('emit-value', inputValue)\r\n }\r\n\r\n\u003C/script>\r\n\r\n```\r\n\r\n### Describe the bug\r\n\r\nThe problem occurred when switching from nuxt2 to nuxt3.\r\nthis is a problem with the display order of compose with the `\u003Ccomponent :is=\"\" v-for=\"\" :key=\"\">` tag, in all that I find as documentation, it tells me offers 2 solutions:\r\n- make a sort function but even then, it doesn't work\r\n- that it is an asynchronous problem and must be made synchronous. Off, nuxt3 with \u003Cscript setup> makes compose directly asynchronous. It would then possibly be a \"bug\" linked to the frame work.\r\n\r\nafterwards, I haven't seen any documentation on the problem caused here: depending on the index, the order changes.\r\nIn addition to the tests you had done, I tried to put a uuid in key, the whole display is reversed.\r\nwithout key, it's good\r\nthe index, gives the current problem\r\na fixed key or just the item gives an even different display.\r\nregarding the key, ideally, the uuid should be in the object since using the index seems to be a bad practice\r\n \r\n The problem occurs in the compose form\r\n \r\n result nuxt 2 & nuxt3 no :key\r\n\u003Cimg width=\"701\" alt=\"Capture d’écran 2023-04-26 à 10 51 51\" src=\"https://user-images.githubusercontent.com/98752049/234523209-431b7cfc-d0c0-4397-a82d-d6120635a12a.png\">\r\n\r\nresult nuxt 3 whit :key=\"index\"\r\n\u003Cimg width=\"675\" alt=\"Capture d’écran 2023-04-26 à 10 55 16\" src=\"https://user-images.githubusercontent.com/98752049/234524004-76a98dde-1312-4266-9455-d9f28c1c521d.png\">\r\n\r\nresult nuxt3 whit :key=\"uuidv4()\"\r\n\u003Cimg width=\"678\" alt=\"Capture d’écran 2023-04-26 à 10 57 25\" src=\"https://user-images.githubusercontent.com/98752049/234524648-d85ae34d-70b5-4f58-a23d-005e8afd829a.png\">\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_",[2915,2916],{"name":2881,"color":2882},{"name":2868,"color":2869},20522,"Nuxt2 to Nuxt3, not display component in a correct order ","2023-04-26T09:06:18Z","https://github.com/nuxt/nuxt/issues/20522",0.659035,{"description":2923,"labels":2924,"number":2926,"owner":2871,"repository":2871,"state":2888,"title":2927,"updated_at":2928,"url":2929,"score":2930},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v20.9.0`\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: `pnpm@9.3.0`\r\n- Builder: `-`\r\n- User Config: `compatibilityDate`, `devtools`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-yd89uq?file=app.vue,components%2FFoo.vue,components%2FBar.vue\n\n### Describe the bug\n\nI've noticed a few issues with component props after updating from Nuxt 3.12.3 to the latest version. I suspect it might be caused by enabling reactive props destructuring by default in Vue 3.5.\r\n\r\n1. setting default values for `boolean` props doesn't work (though it does for `string` props, for example)\r\n```ts\r\nconst {\r\n foo = true, // will be `false` if not provided\r\n bar = 'something', // will be `'something'` if not provided\r\n} = defineProps\u003C{\r\n foo?: boolean\r\n bar?: string\r\n}>()\r\n```\r\n2. seemingly, all prop reactivity is lost when using reactive destructure (when changing the prop values, they do not update in the component)\r\n```ts\r\n// It works correctly if defined using the \"old\" way, though\r\nconst props = defineProps\u003C{\r\n foo?: boolean\r\n bar?: string\r\n}>()\r\n```\r\n\r\n---\r\n\r\nThe behaviour was the same whether or not I had `vite.vue.script.propsDestructure` set to `true` in `nuxt.config` (though it should not be relevant now that it should be enabled by default?)\n\n### Additional context\n\nI tested it in vue SFC playground and it worked correctly there, so that's why I assume this might be a Nuxt issue\r\n\r\nhttps://play.vuejs.org/#eNqNUlFLwzAQ/ishLyqMFpm+zG6iMkEfdKiPAanttWamuZCkdTD6372kdA5x4tvd9313/fJdt/zKmKRrgc945gorjWcOfGsWQsvGoPXsBhvDKosNO0rS0AT50YXQQmfpMEJiajw0RuUeqGMsK2UXCyrjhnSA0wHP0j01n3DvCtSVrJO1Q01etkEseEGTUoF9NF6idoLPWGQClyuFn/cR87aFyYgX71B8/IKv3SZggq8sOLAdCL7jfG5r8AO9fH6ADdU7ssGyVaT+g3wCh6oNHgfZdatLsr2ni27vYqJS1y9uufGg3fioYDQo+6gXnBIOoR16+rfdaXIW54TuKcXxOj+PyVSu6znN0Zp4Kwrb+WFfhcjmY1I9lSVUUsPKonHZqLicsTdEBTnN9ovjk/8f/xaRjG/jZ3qyefgXeO3AhkDI/DQ5T055/wUEUtzf\n\n### Logs\n\n_No response_",[2925],{"name":2868,"color":2869},28845,"Issues with prop reactivity & default values when using reactive props destructure","2024-09-05T10:11:34Z","https://github.com/nuxt/nuxt/issues/28845",0.66468257,{"labels":2932,"number":2940,"owner":2871,"repository":2871,"state":2888,"title":2941,"updated_at":2942,"url":2943,"score":2944},[2933,2936,2937],{"name":2934,"color":2935},"stale","ffffff",{"name":2868,"color":2869},{"name":2938,"color":2939},"2.x","d4c5f9",8904,"Hydration error with scoped slots and component discovery (async components)","2023-01-22T15:38:48Z","https://github.com/nuxt/nuxt/issues/8904",0.6655824,{"description":2946,"labels":2947,"number":2960,"owner":2871,"repository":2871,"state":2888,"title":2961,"updated_at":2962,"url":2963,"score":2964},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v18.16.0`\r\n- Nuxt Version: `3.8.0`\r\n- CLI Version: `3.9.1`\r\n- Nitro Version: `2.7.0`\r\n- Package Manager: `npm@9.5.1`\r\n- Builder: `-`\r\n- User Config: `devtools`, `modules`\r\n- Runtime Modules: `@nuxtjs/tailwindcss@6.8.0`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\nhttps://github.com/TheFlyer1983/nuxt-issue\n\n### Describe the bug\n\nI am getting an issue with a component, that previously worked. But after upgrading my Nuxt to v3.8.0, I keep getting this error whenever I refresh:\r\n\r\n\r\n\r\nI am unable to get past this or debug this because there is no real information in which to use to identify the issue.\n\n### Additional context\n\nThis is causing a major block on upgrading from Nuxt 2 to Nuxt 3, for a business application that is currently live.\n\n### Logs\n\n```shell-script\nI get these logs from my terminal.\r\n\r\n\r\n[[vite-node] [plugin:vite:vue] [VITE_ERROR] /components/inputs/StyledSelect.vue \u003Cbr>\u003Cpre><script lang=\"ts\" setup>\r\nconst props = withDefaults(\r\n defineProps<{\r\n disabled?: boolean;\r\n modelValue: object | string | number | null;\r\n small?: boolean;\r\n xSmall?: boolean;\r\n }>(),\r\n {\r\n disabled: false,\r\n small: false,\r\n xSmall: false\r\n }\r\n);\r\n\r\nconst emit = defineEmits<{\r\n (e: 'update:modelValue', value: object | string | number | null): void;\r\n}>();\r\n\r\nconst v = computed({\r\n get: () => props.modelValue,\r\n set: (value) => {\r\n emit('update:modelValue', value);\r\n }\r\n});\r\n</script>\r\n\r\n<template>\r\n <select\r\n v-model=\"v\"\r\n :disabled=\"disabled\"\r\n :class=\"[\r\n 'styled-select text-p-gray-4 transition-all duration-200 ease-in-out focus:outline-none focus:ring-1 focus:ring-p-pink',\r\n {\r\n 'form-select': !small,\r\n 'form-select-small': small,\r\n 'form-select-x-small': xSmall,\r\n 'opacity-50': disabled\r\n }\r\n ]\" data-v-inspector=\"components/inputs/StyledSelect.vue:29:3\"\r\n >\r\n <slot />\r\n </select>\r\n</template>\r\n\u003C/pre>\u003Cbr>\r\nat /components/inputs/StyledSelect.vue] {\r\n cause: {\r\n statusMessage: 'Vite Error',\r\n message: '[vite-node] [plugin:vite:vue] [VITE_ERROR] /components/inputs/StyledSelect.vue \u003Cbr>\u003Cpre><script lang=\"ts\" setup>\\n' +\r\n 'const props = withDefaults(\\n' +\r\n ' defineProps<{\\n' +\r\n ' disabled?: boolean;\\n' +\r\n ' modelValue: object | string | number | null;\\n' +\r\n ' small?: boolean;\\n' +\r\n ' xSmall?: boolean;\\n' +\r\n ' }>(),\\n' +\r\n ' {\\n' +\r\n ' disabled: false,\\n' +\r\n ' small: false,\\n' +\r\n ' xSmall: false\\n' +\r\n ' }\\n' +\r\n ');\\n' +\r\n '\\n' +\r\n 'const emit = defineEmits<{\\n' +\r\n \" (e: 'update:modelValue', value: object | string | number | null): void;\\n\" +\r\n '}>();\\n' +\r\n '\\n' +\r\n 'const v = computed({\\n' +\r\n ' get: () => props.modelValue,\\n' +\r\n ' set: (value) => {\\n' +\r\n \" emit('update:modelValue', value);\\n\" +\r\n ' }\\n' +\r\n '});\\n' +\r\n '</script>\\n' +\r\n '\\n' +\r\n '<template>\\n' +\r\n ' <select\\n' +\r\n ' v-model=\"v\"\\n' +\r\n ' :disabled=\"disabled\"\\n' +\r\n ' :class=\"[\\n' +\r\n \" 'styled-select text-p-gray-4 transition-all duration-200 ease-in-out focus:outline-none focus:ring-1 focus:ring-p-pink',\\n\" +\r\n ' {\\n' +\r\n \" 'form-select': !small,\\n\" +\r\n \" 'form-select-small': small,\\n\" +\r\n \" 'form-select-x-small': xSmall,\\n\" +\r\n \" 'opacity-50': disabled\\n\" +\r\n ' }\\n' +\r\n ' ]\" data-v-inspector=\"components/inputs/StyledSelect.vue:29:3\"\\n' +\r\n ' >\\n' +\r\n ' <slot />\\n' +\r\n ' </select>\\n' +\r\n '</template>\\n' +\r\n '\u003C/pre>\u003Cbr>',\r\n stack: '[vite-node] [plugin:vite:vue] [VITE_ERROR] /components/inputs/StyledSelect.vue \u003Cbr>\u003Cpre><script lang=\"ts\" setup>\\n' +\r\n 'const props = withDefaults(\\n' +\r\n ' defineProps<{\\n' +\r\n ' disabled?: boolean;\\n' +\r\n ' modelValue: object | string | number | null;\\n' +\r\n ' small?: boolean;\\n' +\r\n ' xSmall?: boolean;\\n' +\r\n ' }>(),\\n' +\r\n ' {\\n' +\r\n ' disabled: false,\\n' +\r\n ' small: false,\\n' +\r\n ' xSmall: false\\n' +\r\n ' }\\n' +\r\n ');\\n' +\r\n '\\n' +\r\n 'const emit = defineEmits<{\\n' +\r\n \" (e: 'update:modelValue', value: object | string | number | null): void;\\n\" +\r\n '}>();\\n' +\r\n '\\n' +\r\n 'const v = computed({\\n' +\r\n ' get: () => props.modelValue,\\n' +\r\n ' set: (value) => {\\n' +\r\n \" emit('update:modelValue', value);\\n\" +\r\n ' }\\n' +\r\n '});\\n' +\r\n '</script>\\n' +\r\n '\\n' +\r\n '<template>\\n' +\r\n ' <select\\n' +\r\n ' v-model=\"v\"\\n' +\r\n ' :disabled=\"disabled\"\\n' +\r\n ' :class=\"[\\n' +\r\n \" 'styled-select text-p-gray-4 transition-all duration-200 ease-in-out focus:outline-none focus:ring-1 focus:ring-p-pink',\\n\" +\r\n ' {\\n' +\r\n \" 'form-select': !small,\\n\" +\r\n \" 'form-select-small': small,\\n\" +\r\n \" 'form-select-x-small': xSmall,\\n\" +\r\n \" 'opacity-50': disabled\\n\" +\r\n ' }\\n' +\r\n ' ]\" data-v-inspector=\"components/inputs/StyledSelect.vue:29:3\"\\n' +\r\n ' >\\n' +\r\n ' <slot />\\n' +\r\n ' </select>\\n' +\r\n '</template>\\n' +\r\n '\u003C/pre>\u003Cbr>\\n' +\r\n 'at /components/inputs/StyledSelect.vue'\r\n },\r\n statusCode: 500,\r\n fatal: false,\r\n unhandled: false,\r\n statusMessage: 'Vite Error',\r\n data: undefined,\r\n __nuxt_error: true\r\n```\n```\n",[2948,2951,2952,2955,2958],{"name":2949,"color":2950},"good first issue","fbca04",{"name":2881,"color":2882},{"name":2953,"color":2954},"bug","d73a4a",{"name":2956,"color":2957},"vite","3574D1",{"name":2959,"color":2886},"🔨 p3-minor",23822,"Issue with component since upgrading","2023-10-22T04:39:40Z","https://github.com/nuxt/nuxt/issues/23822",0.66698784,{"labels":2966,"number":2971,"owner":2871,"repository":2871,"state":2888,"title":2972,"updated_at":2973,"url":2974,"score":2975},[2967,2970],{"name":2968,"color":2969},"question","cc317c",{"name":2938,"color":2939},7706,"Component isn't behaving like in vue","2023-01-18T15:34:02Z","https://github.com/nuxt/nuxt/issues/7706",0.6696306,{"description":2977,"labels":2978,"number":2980,"owner":2871,"repository":2871,"state":2888,"title":2981,"updated_at":2982,"url":2983,"score":2984},"\n### Reproduction\n\nSee `Foo.vue` component in `foo` Nuxt module.\nIt renders incorrectly in `app.vue`.\n\nhttps://stackblitz.com/edit/nuxt-starter-6aprd3bh\n\n### Describe the bug\n\nWhen using an external Vue components, not matter how they end up in Nuxt (via nuxt modules, or via direct export of external packages) it fails to render specific templates.\n\nConsider the following example template code:\n\n```vue\n\u003Ctemplate>\n \u003Cdiv>\n \u003Cdiv>This is visible\u003C/div>\n \u003Ccomponent :is=\"'div'\" v-html=\"'\u003Cstrong>THIS IS NOT!\u003C/strong>'\" />\n \u003C/div>\n\u003C/template>\n```\n\nNuxt renders this code to the following HTML:\n\n```html\n\u003Cdiv>\n \u003Cdiv>This is visible\u003C/div>\n \u003Cdiv>\u003C/div>\n\u003C/div>\n```\n\nSo the Nuxt correctly receives tag name (`div`) but fails to set `innerHTML` property...\nThis can be a symptom of a more serious problem. If this silently does not work, what else could not work?\n\nOnce again, the problem occurs ONLY with external Vue components.\nI tested it both in Nuxt module and completely external package.\n\nMoreover, components that are bundled with Vite `lib` mode are working just fine, so there is something wrong happening with Nuxt only when it directly consumes `.vue` files.",[2979],{"name":2868,"color":2869},30202,"Nuxt silently renders incorrect \u003Ctemplate> when using external Vue components","2024-12-10T09:47:31Z","https://github.com/nuxt/nuxt/issues/30202",0.6708867,["Reactive",2986],{},["Set"],["ShallowReactive",2989],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fno_QRgA--s_t6lvwgxGylYw-GZjdUkQQoBT8MDe5uos":-1},"/nuxt/test-utils/1312"]