\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_",[2869,2872],{"name":2870,"color":2871},"3.x","29bc7f",{"name":2873,"color":2874},"pending triage","E99695",20522,"closed","Nuxt2 to Nuxt3, not display component in a correct order ","2023-04-26T09:06:18Z","https://github.com/nuxt/nuxt/issues/20522",0.7126075,{"description":2882,"labels":2883,"number":2886,"owner":2860,"repository":2860,"state":2876,"title":2887,"updated_at":2888,"url":2889,"score":2890},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.9.0\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@9.4.2\r\n- Builder: -\r\n- User Config: devtools, app\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-zo83ve?file=app.vue\n\n### Describe the bug\n\nWhen custom page transitions are defined with the 'out-in' mode, it causes a disruption in custom layouts. The \u003Cslot> is consistently rendered at the end of the page after the initial navigation. An example illustrating this issue can be found on [Stackblitz](https://stackblitz.com/edit/nuxt-starter-zo83ve?file=app.vue). The provided example uses the default layout and is expected to display components in the following order:\r\n\r\n1️⃣ Navigation\r\n2️⃣ [slot]\r\n3️⃣ Footer\r\n\r\nHowever, after navigating to the /second page, the layout breaks, resulting in the following rendering:\r\n\r\n1️⃣ Navigation\r\n3️⃣ Footer\r\n2️⃣ [slot]\r\n\r\nThe page transition is defined inside the nuxt.config.ts.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2884,2885],{"name":2870,"color":2871},{"name":2873,"color":2874},25065,"Page transitions in 'out-in' mode disrupt layout order","2024-01-05T10:08:42Z","https://github.com/nuxt/nuxt/issues/25065",0.7170757,{"description":2892,"labels":2893,"number":2902,"owner":2860,"repository":2860,"state":2876,"title":2903,"updated_at":2904,"url":2905,"score":2906},"Initially I declared my default layout using `\u003Cslot>` for router-views because that's what was [recommended in the documentation](https://nuxt.com/docs/guide/directory-structure/layouts#default-layout). This worked but I noticed that the error page does not get the layout. Even [this](https://nuxt.com/docs/guide/directory-structure/layouts#overriding-a-layout-on-a-per-page-basis) and this:\r\n```\r\n\u003Cscript setup lang=\"ts\">\r\n// You might choose this based on an API call or logged-in status\r\nconst layout = \"default\";\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CNuxtLayout :name=\"layout\">\r\n \u003CNuxtPage />\r\n \u003C/NuxtLayout>\r\n\u003C/template>\r\n```\r\ndid not change the problem that the error page didn't get the layout. This is the first bug in my opinion. So I did a workaround:\r\n```\r\n\u003Cscript setup lang=\"ts\">\r\nimport type { NuxtError } from '#app'\r\nimport DefaultLayout from \"/layouts/default.vue\"\r\nconst props = defineProps({\r\n error: Object as () => NuxtError\r\n})\r\n\u003C/script>\r\n\u003Ctemplate>\r\n \u003CDefaultLayout>\r\n \u003Cdiv>\r\n \u003Ch1>{{ \"Error \" + error?.statusCode }}\u003C/h1>\r\n \u003Cpre>{{ JSON.stringify(error, null, 4) }}\u003C/pre>\r\n \u003CNuxtLink to=\"/\">Go back home\u003C/NuxtLink>\r\n \u003C/div>\r\n \u003C/DefaultLayout>\r\n\u003C/template>\r\n```\r\nThis was ugly but worked however eventually I noticed another problem. I tried passing props from layout to page components and that wasn't working (second bug). So I fixed (?) the problem by replacing `\u003Cslot>` on the layout with `\u003CNuxtPage />`. This again worked but I faced another problem: Now the error page content (other than layout) isn't visible. So now the \"best\" choice I know I have is to have an error page without a layout, but that's not what I want. Do you confirm my bug reports? What should I do? Thanks.",[2894,2895,2896,2899],{"name":2870,"color":2871},{"name":2873,"color":2874},{"name":2897,"color":2898},"needs reproduction","FBCA04",{"name":2900,"color":2901},"closed-by-bot","ededed",25982,"Layout issues (error page, slot/NuxtPage props)","2024-12-21T23:06:42Z","https://github.com/nuxt/nuxt/issues/25982",0.71983796,{"labels":2908,"number":2912,"owner":2860,"repository":2860,"state":2876,"title":2913,"updated_at":2914,"url":2915,"score":2916},[2909,2910,2911],{"name":2870,"color":2871},{"name":2873,"color":2874},{"name":2897,"color":2898},13354,"definePageMeta doesnt apply the correct layout","2023-01-19T16:53:09Z","https://github.com/nuxt/nuxt/issues/13354",0.72001344,{"description":2918,"labels":2919,"number":2923,"owner":2860,"repository":2860,"state":2876,"title":2924,"updated_at":2925,"url":2926,"score":2927},"### Describe the feature\n\nI think nuxt's documentation is too complicated, I think there are a lot of experimental, various ingenious ideas in it, but this also brings a problem, which is the increase in cognitive cost. I hope nuxt will propose a basic template of best practices as a common development scaffold, and split the documentation into advanced and basic versions. For example, what are the core components of nuxt, routing, server-side rendering, API writing methods, these are actually all beginners care about, as for how to make images faster, fonts more elegant, these are rarely relevant in the initial stage, what beginners do not care about, I think the nuxt official can provide their own best-looking and optimal settings, not exposed to developers, just as the default values of the basic template. If the documentation is simplified, the cognitive cost is reduced, for beginners, nuxt is also easier to accept, this is a good thing. Because many times, we do not prioritize \"performance\" and \"clever design.\"\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).",[2920,2921,2922],{"name":2857,"color":2858},{"name":2870,"color":2871},{"name":2873,"color":2874},27162,"nuxt provides a simplified version of the documentation","2024-05-18T15:45:12Z","https://github.com/nuxt/nuxt/issues/27162",0.72124326,{"labels":2929,"number":2932,"owner":2860,"repository":2860,"state":2876,"title":2933,"updated_at":2934,"url":2935,"score":2936},[2930,2931],{"name":2857,"color":2858},{"name":2870,"color":2871},13529,"custom pageTransition / layoutTransition docs unclear","2023-01-19T16:58:44Z","https://github.com/nuxt/nuxt/issues/13529",0.7220611,{"labels":2938,"number":2946,"owner":2860,"repository":2860,"state":2876,"title":2947,"updated_at":2948,"url":2949,"score":2950},[2939,2942,2943],{"name":2940,"color":2941},"stale","ffffff",{"name":2873,"color":2874},{"name":2944,"color":2945},"2.x","d4c5f9",7743,"when using $nuxt.error from client side, error page will not respect layout ","2023-01-22T15:36:04Z","https://github.com/nuxt/nuxt/issues/7743",0.72214675,{"description":2952,"labels":2953,"number":2959,"owner":2860,"repository":2860,"state":2876,"title":2960,"updated_at":2961,"url":2962,"score":2963},"## Details\r\n\r\nThere's enough here that is unique about Nuxt that I think it makes sense to have in our docs, and we can link out to Nitro where it makes sense\r\n\r\n_Originally posted by @danielroe in https://github.com/nuxt/nuxt/issues/21987#issuecomment-1624835848_\r\n ",[2954,2955,2958],{"name":2857,"color":2858},{"name":2956,"color":2957},"good first issue","fbca04",{"name":2870,"color":2871},22011,"[Documentation Request] Prerender section","2024-06-10T18:45:11Z","https://github.com/nuxt/nuxt/issues/22011",0.7222698,{"labels":2965,"number":2968,"owner":2860,"repository":2860,"state":2876,"title":2969,"updated_at":2970,"url":2971,"score":2972},[2966,2967],{"name":2857,"color":2858},{"name":2870,"color":2871},11968,"docs: explain component name resolution","2023-01-19T16:03:39Z","https://github.com/nuxt/nuxt/issues/11968",0.7225975,["Reactive",2974],{},["Set"],["ShallowReactive",2977],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fdJWh63Yr2hC9_1kRONa46mnUwB_HL7DyQI6TGzVLZTU":-1},"/nuxt/ui/4191"]