\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_",[2894,2897],{"name":2895,"color":2896},"3.x","29bc7f",{"name":2870,"color":2871},20522,"Nuxt2 to Nuxt3, not display component in a correct order ","2023-04-26T09:06:18Z","https://github.com/nuxt/nuxt/issues/20522",0.69735986,{"labels":2904,"number":2907,"owner":2876,"repository":2876,"state":2877,"title":2908,"updated_at":2909,"url":2910,"score":2911},[2905,2906],{"name":2870,"color":2871},{"name":2873,"color":2874},9106,"Cf","2023-01-22T15:44:51Z","https://github.com/nuxt/nuxt/issues/9106",0.69846296,{"description":2913,"labels":2914,"number":2916,"owner":2876,"repository":2876,"state":2877,"title":2917,"updated_at":2918,"url":2919,"score":2920},"For some reason this doesn't work\r\n\r\n```html\r\n\u003Ctransition-group>\r\n \u003Cnuxt-link class=\"card-link card\" :to=\"`/${card.section.name}/${card.slug}`\" v-for=\"card in cards\" :key=\"card.id\">\r\n```\r\n\r\nThe error is `[Vue warn]: \u003Ctransition-group> children must be keyed: \u003Crouter-link>`\r\nBut I already have the key `:key=\"card.id\"`. \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/c2283\">#c2283\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2915],{"name":2873,"color":2874},2624,"transition-group doesn't work with nuxt-link v-for loop","2023-01-18T16:02:22Z","https://github.com/nuxt/nuxt/issues/2624",0.6987688,{"labels":2922,"number":2925,"owner":2876,"repository":2876,"state":2877,"title":2926,"updated_at":2927,"url":2928,"score":2929},[2923,2924],{"name":2870,"color":2871},{"name":2873,"color":2874},10601,"postcss插件使用时不生效,提示请使用 postcss.config.js进行配置,配置之后nuxt提示请在nuxt.config.js中配置postcss,导致无法配置","2024-06-30T09:24:51Z","https://github.com/nuxt/nuxt/issues/10601",0.6995802,{"description":2931,"labels":2932,"number":2935,"owner":2876,"repository":2876,"state":2877,"title":2936,"updated_at":2937,"url":2938,"score":2939},"\u003C!-- 💚 Thanks for your time to make Nuxt better with your feedbacks 💚\r\n\r\n**IMPORTANT** Before reporting a bug:\r\n\r\n- Please make sure that you have read through Nuxt documentation: https://nuxtjs.org\r\n- If issue is related to a module please create the issue in corresponding repository\r\n- Ensure using latest version of nuxt dependencies using `yarn upgrade nuxt` or `npm upgrade nuxt`\r\n\r\n👍 A properly detailed bug report can save a LOT of time and help fixing issues as soon as possible.\r\n-->\r\n\r\n### Versions\r\n\r\n- nuxt: 2.14.7 ~ 2.15.6\r\n- node: 14.15.5\r\n\r\n### Reproduction\r\n\r\n\u003C!--\r\nLink to a minimal test case based on one of:\r\n- A fork of https://template.nuxtjs.org\r\n- A GitHub repository that can reproduce the bug\r\nWithout a reproduction, it is so hard to address problem :(\r\n-->\r\nRepo: https://github.com/Fnxxxxo/nuxt-sentry-webpack-plugin-issue\r\nSteps:\r\n1. `yarn install`\r\n2. Add your sentry project configurations in config.env\r\n3. `yarn generate`\r\n\r\n\u003Cdetails open>\r\n\u003Csummary>Additional Details\u003C/summary>\r\n\u003Cbr>\r\n\u003Cpre markdown=\"1\">\r\nimport SentryCliPlugin from '@sentry/webpack-plugin'\r\n\r\nexport default {\r\n // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode\r\n ssr: false,\r\n\r\n // Target: https://go.nuxtjs.dev/config-target\r\n target: 'static',\r\n\r\n srcDir: 'src',\r\n\r\n // Global page headers: https://go.nuxtjs.dev/config-head\r\n head: {\r\n title: 'demo',\r\n htmlAttrs: {\r\n lang: 'en'\r\n },\r\n meta: [\r\n { charset: 'utf-8' },\r\n { name: 'viewport', content: 'width=device-width, initial-scale=1' },\r\n { hid: 'description', name: 'description', content: '' }\r\n ],\r\n link: [\r\n { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }\r\n ]\r\n },\r\n\r\n // Build Configuration: https://go.nuxtjs.dev/config-build\r\n build: {\r\n extend(config, context) {\r\n if (config.resolve) {\r\n config.resolve.symlinks = false\r\n }\r\n if (!context.isDev) {\r\n config.devtool = 'source-map'\r\n }\r\n if (config.plugins) {\r\n config.plugins.push(new SentryCliPlugin({\r\n url: `http://${process.env.SENTRY_BASE}`,\r\n authToken: process.env.SENTRY_AUTH_KEY,\r\n include: 'dist',\r\n ignoreFile: '.gitignore',\r\n ignore: ['node_modules', 'webpack.config.js'],\r\n configFile: 'sentry.properties',\r\n org: 'sentry',\r\n project: process.env.SENTRY_PROJECT,\r\n debug: true\r\n }))\r\n }\r\n return config\r\n }\r\n }\r\n}\r\n\u003C/pre>\r\n\u003C/details>\r\n\r\n### Steps to reproduce\r\n\u003Cp>When the fisrt execution, Nuxt complains \u003Ccode>error: dist: IO error for operation on dist\u003C/code> but with dist directory generated and sentry-webpack-plugin fails to publish.\u003C/p>\r\n\u003Cp>If I delete \u003Ccode>node_modules/.cache\u003C/code> and generate agian. The process run successful but use the previous generated \u003Ccode>dist\u003C/code> and map files.\u003C/p>\r\n\u003Cp>If I delete both \u003Ccode>.cache\u003C/code> and \u003Ccode>dist\u003C/code>, I can reproduce the error.\u003C/p>\r\n\r\n### What is Expected?\r\nGenerate `dist` then run sentry-webpack-plugin to publish it.\r\n\r\n### What is actually happening?\r\nRun sentry-webpack-plugin first and publish old `dist`",[2933,2934],{"name":2870,"color":2871},{"name":2873,"color":2874},9349,"Nuxt generate run sentry-webpack-plugin with incorrect order","2023-01-22T15:44:58Z","https://github.com/nuxt/nuxt/issues/9349",0.70094025,{"description":2941,"labels":2942,"number":2955,"owner":2876,"repository":2956,"state":2877,"title":2957,"updated_at":2958,"url":2959,"score":2960},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.14.0\n- Nuxt Version: 3.17.0\n- CLI Version: 3.25.0\n- Nitro Version: 2.11.11\n- Package Manager: pnpm@10.9.0\n- Builder: -\n- User Config: modules, colorMode, image, content, plausible, devtools, hub, css, mdc, nitro, runtimeConfig, routeRules, future, compatibilityDate, eslint\n- Runtime Modules: @nuxt/eslint@1.3.0, @nuxt/image@1.10.0, @nuxt/ui-pro@3.1.0, @nuxt/content@3.5.1, @nuxthub/core@0.8.25, @nuxtjs/plausible@1.2.0, @vueuse/nuxt@13.1.0, nuxt-og-image@5.1.3\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\n1. Open [saas-template.nuxt.dev](https://saas-template.nuxt.dev/) in Safari on macOS 18.4.\n2. Scroll to the Testimonials section.\n3. Observe that after a line break in the grid, the first card in each new row is not rendered.\n4. Open Safari’s developer tools and disable the first CSS rule:\n```\n:is(.*:will-change-transform>*) {\n will-change: transform;\n}\n```\n5. Observe that the missing cards now appear, but borders render incorrectly.\n\n\n### Description\n\nOn Safari for macOS (Version 18.4 – 20621.1.15.11.10), using @nuxt/ui components in a responsive grid layout causes elements to disappear after a line break. Specifically, the first item in each new row is not rendered when will-change: transform is applied.\n\n**🔍 Context**\nThe issue is reproducible on your official SaaS template: [saas-template.nuxt.dev](https://saas-template.nuxt.dev/), in the testimonial section. This section uses only @nuxt/ui components – no @nuxt/ui-pro components are involved. The relevant code lives in [/app/pages/index.vue](https://github.com/nuxt-ui-pro/saas/blob/main/app/pages/index.vue), lines 58–80.\n\n**📍 Suspected Source**\nIn Safari, the following rule seems to break the layout:\n\n```\n:is(.*:will-change-transform>*) {\n will-change: transform;\n}\n```\nDisabling this rule in Safari's dev tools makes the hidden items visible again. However, doing so causes border-top rendering to break.\n\n\n**📸 Screenshots**\nIssue (first items not rendered):\n\n\nAfter disabling will-change (cards reappear):\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2943,2946,2949,2952],{"name":2944,"color":2945},"bug","d73a4a",{"name":2947,"color":2948},"duplicate","cfd3d7",{"name":2950,"color":2951},"v3","49DCB8",{"name":2953,"color":2954},"pro","5BD3CB",4026,"ui","Safari Bug: Grid layout issues with `will-change: transform`","2025-04-30T13:51:05Z","https://github.com/nuxt/ui/issues/4026",0.7025051,{"description":2962,"labels":2963,"number":2967,"owner":2876,"repository":2876,"state":2877,"title":2968,"updated_at":2969,"url":2970,"score":2971},"\u003C!-- 💚 Thanks for your time to make Nuxt better with your feedbacks 💚\r\n\r\n**IMPORTANT** Before reporting a bug:\r\n\r\n- Please make sure that you have read through Nuxt documentation: https://nuxtjs.org\r\n- If issue is related to a module please create the issue in corresponding repository\r\n- Ensure using latest version of nuxt dependencies using `yarn upgrade nuxt` or `npm upgrade nuxt`\r\n\r\n👍 A properly detailed bug report can save a LOT of time and help fixing issues as soon as possible.\r\n-->\r\n\r\n### Versions\r\n\r\n- nuxt: 2.14.12\r\n- node: 14.15.0\r\n\r\n### Reproduction\r\n\r\n\u003C!--\r\nLink to a minimal test case based on one of:\r\n- A fork of https://template.nuxtjs.org\r\n- A GitHub repository that can reproduce the bug\r\nWithout a reproduction, it is so hard to address problem :(\r\n-->\r\n\r\n\u003Cdetails open>\r\n\u003Csummary>Additional Details\u003C/summary>\r\n\u003Cbr>\r\n\u003C!-- Attaching `nuxt.config`, dependencies, logs or code snippets would help to find the issue -->\r\n\u003C/details>\r\n\r\n### Steps to reproduce\r\n\r\n1. Create Vue.js component with a named slot of your choice\r\n2. Use created component and provide the content for the slot (wrap everything in `\u003Cclient-only>` tag); example below:\r\n```\r\n\u003CStepper\r\n :steps=\"[$t('steps.one'), $t('steps.two'), $t('steps.three')]\"\r\n>\r\n \u003Ctemplate slot=\"step-1\">\r\n \u003Cdiv>\r\n \u003Cclient-only placeholder=\"Loading...\">\r\n \u003C!-- Neither a span tag nor v-calendar plugin works (tested one by one) -->\r\n \u003Cspan>Test\u003C/span>\r\n \u003Cdiv>\r\n \u003Cv-date-picker\r\n v-model=\"dates\"\r\n is-expanded\r\n trim-weeks\r\n />\r\n \u003C/div>\r\n \u003C/client-only>\r\n \u003C/div>\r\n \u003C/template>\r\n\u003C/Stepper>\r\n```\r\nThe placeholder remains with no content replaced as shown below:\r\n\r\n\r\n### What is Expected?\r\nContent inside `\u003Cclient-only>` tag should get rendered instead of getting stuck on the placeholder (or blank state if placeholder not provided).\r\n\r\n### What is actually happening?\r\n`\u003Cclient-only>` tag does not render its content when the tag is placed inside a component slot, as shown in the provided example. It does render when placed outside of the slot.",[2964,2965,2966],{"name":2867,"color":2868},{"name":2870,"color":2871},{"name":2873,"color":2874},8579,"Client-only content doesn't render in component's slot","2023-01-22T15:38:40Z","https://github.com/nuxt/nuxt/issues/8579",0.70302147,{"description":2973,"labels":2974,"number":2983,"owner":2876,"repository":2876,"state":2877,"title":2984,"updated_at":2985,"url":2986,"score":2987},"### Environment\n\n------------------------------\r\n- Operating System: Darwin\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: yarn@1.22.21\r\n- Builder: -\r\n- User Config: ssr, app, nitro, runtimeConfig, devtools, css, modules, typescript, postcss, colorMode\r\n- Runtime Modules: nuxt-svgo@4.0.0, @vueuse/nuxt@10.7.2, @samk-dev/nuxt-vcalendar@1.0.2, dayjs-nuxt@2.1.9, @pinia/nuxt@0.5.1, @nuxt/image@1.3.0, @nuxtjs/device@3.1.1, @nuxtjs/color-mode@3.3.2, nuxt-swiper@1.2.2\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nTo reproduce you will need this configuration:\r\n{\r\n \"name\": \"nuxt-app\",\r\n \"private\": true,\r\n \"type\": \"module\",\r\n \"scripts\": {\r\n \"build\": \"nuxt build\",\r\n \"dev\": \"nuxt dev\",\r\n \"generate\": \"nuxt generate\",\r\n \"preview\": \"nuxt preview\",\r\n \"postinstall\": \"nuxt prepare\",\r\n \"lint\": \"eslint .\",\r\n \"lint:fix\": \"eslint . --fix\"\r\n },\r\n \"devDependencies\": {\r\n \"@nuxt/eslint-config\": \"^0.2.0\",\r\n \"@nuxtjs/color-mode\": \"^3.3.2\",\r\n \"@nuxtjs/device\": \"^3.1.1\",\r\n \"@samk-dev/nuxt-vcalendar\": \"^1.0.2\",\r\n \"@vueuse/core\": \"^10.7.2\",\r\n \"@vueuse/nuxt\": \"^10.7.2\",\r\n \"add\": \"^2.0.6\",\r\n \"autoprefixer\": \"^10.4.17\",\r\n \"dayjs-nuxt\": \"^2.1.9\",\r\n \"eslint\": \"^8.56.0\",\r\n \"nuxt\": \"^3.11.2\",\r\n \"nuxt-svgo\": \"^4.0.0\",\r\n \"postcss\": \"^8.4.33\",\r\n \"sass\": \"^1.70.0\",\r\n \"tailwindcss\": \"^3.4.1\",\r\n \"typescript\": \"^5.4.4\",\r\n \"vue\": \"^3.4.21\",\r\n \"vue-router\": \"^4.2.5\",\r\n \"vue-tsc\": \"^1.8.27\",\r\n \"yarn\": \"^1.22.21\"\r\n },\r\n \"dependencies\": {\r\n \"@nuxt/image\": \"^1.3.0\",\r\n \"@pinia/nuxt\": \"^0.5.1\",\r\n \"@types/crypto-js\": \"^4.2.2\",\r\n \"@types/memory-cache\": \"^0.2.5\",\r\n \"@vueuse/integrations\": \"^10.7.2\",\r\n \"animate.css\": \"^4.1.1\",\r\n \"crypto-js\": \"^4.2.0\",\r\n \"defu\": \"^6.1.4\",\r\n \"memory-cache\": \"^0.2.0\",\r\n \"nuxt-swiper\": \"^1.2.2\",\r\n \"pinia\": \"^2.1.7\",\r\n \"ufo\": \"^1.5.3\",\r\n \"universal-cookie\": \"^7.0.1\"\r\n }\r\n}\r\n\r\nI am using Webstorm\n\n### Describe the bug\n\nI have this code to make POST request to server:\r\nconst publications = await $fetch\u003CPublicationsResponse>('/v1/publication/search?limit=10&page=1', {\r\n method: 'POST',\r\n body: {\r\n \"categories\": [\r\n {\r\n \"id\": props.categoryId\r\n }\r\n ]\r\n }\r\n})\r\n\r\nI am getting this error:\r\n\r\n\r\nIts only disappears, when I am removing method: 'POST', but I need to make Post request.\r\nWhat can be wrong?\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2975,2976,2977,2980],{"name":2895,"color":2896},{"name":2870,"color":2871},{"name":2978,"color":2979},"needs reproduction","FBCA04",{"name":2981,"color":2982},"closed-by-bot","ededed",26650,"Types issue in $fetch","2024-04-13T01:42:05Z","https://github.com/nuxt/nuxt/issues/26650",0.7040131,["Reactive",2989],{},["Set"],["ShallowReactive",2992],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fi100Ic5RrKQeK_lmhb0vO5PAwAAuWoLEjQDi5o6ml2c":-1},"/nuxt/nuxt/9463"]