//Sets data to store in useAsyncData\r\n {{ store.data }} //Initial value instead of data there\r\n \u003Cmy-component-that-rely-on-store/> //Reactivity is lost for this guy\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\nThe reason behind this as I understand looks like this:\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cslot/> //Inits useAsyncData, leaves to separate flow after first await\r\n {{ store.data }} //Would be valid, if would not initiated on async\r\n \u003Cmy-component-that-rely-on-store/> //useAsyncData has been called, but not completed\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n## Solution\r\n\r\n### New (probably SSR-only) hook\r\n\r\nInproduce new hook, that will fire after all asyncDatas will be completed and most of components rendered\r\n\r\n### New component\r\n\r\nThe name could be like `\u003Cnuxt-server-rendered>`, `\u003Cnuxt-server-init>`, e.t.c.\r\n\r\nComponent will rely on this new hook and could use `onServerPrefetch` under-the-hood. Then it could be used like this:\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cslot/> //Inits useAsyncData, leaves to separate flow after first await\r\n \u003Cnuxt-server-rendered>\r\n {{ store.data }} //Valid data\r\n \u003Cmy-component-that-rely-on-store/> //Valid data\r\n \u003C/nuxt-async-resolve>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\nIt will also resolve reactivity problems with parent components, and not only async problems, the problem that was described in issues/discussion above.\r\n\r\n## Pure implementation\r\n\r\nI've tried to implement this by myself using this:\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cslot/>\r\n\u003C/template>\r\n\r\n\u003Cscript lang=\"ts\" setup>\r\nonServerPrefetch(async () => {\r\n await Promise.allSettled(Object.values(toValue(app._asyncDataPromises)));\r\n});\r\n\u003C/script>\r\n```\r\n\r\nThis solution is not good actually, but it goes as workaround with limitations:\r\n- I have no guarantee that _asyncDataPromises are complete on this stage\r\n- I can only use this component after page's \u003Cslot>, therefore I currently can't use it with components above page, e.g. header\r\n- It does not rely on render or anything like that (if that's even possible at all in current SSR implementation)\r\n\r\nI could try to implement this myself, if this looks valid, but I'm not sure I can do that with my limited knowlenge of Nuxt's internals. \n\n### Additional information\n\n- [X] 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).",[2867],{"name":2868,"color":2869},"pending triage","E99695",25316,"nuxt","open","Allow to await for useAsyncData in template","2024-06-30T11:06:12Z","https://github.com/nuxt/nuxt/issues/25316",0.6620511,{"description":2878,"labels":2879,"number":2886,"owner":2871,"repository":2871,"state":2872,"title":2887,"updated_at":2888,"url":2889,"score":2890},"### Environment\n\n```\n------------------------------\n- Operating System: Linux\n- Node Version: v20.18.0\n- Nuxt Version: 3.14.159\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.7.0\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n------------------------------\n```\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-czfpw6?file=app.vue,pages%2Findex.vue,components%2FTestRender.vue\n\nUsing `\u003CTeleport>` together with an async component like so:\n\n**TestRender.vue**\n\n```vue\n\u003Ctemplate>\n \u003Cdiv>{{ data }}\u003C/div>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nfunction loadData(): Promise\u003Cstring> {\n return Promise.resolve('Test')\n}\n\nconst data = await loadData()\n\u003C/script>\n```\n\n```vue\n\u003Ctemplate>\n \u003CTeleport to=\"#teleports\">\n \u003CTestRender />\n \u003C/Teleport>\n\u003C/template>\n```\n\n### Describe the bug\n\nThis leads to a hydration mismatch:\n\n```\nruntime-core.esm-bundler.js:51 [Vue warn]: Hydration children mismatch on \u003Cdiv data-v-inspector=\"pages/index.vue:5:7\">…\u003C/div> \nServer rendered element contains fewer child nodes than client vdom. \n at \u003CIndex onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \n at \u003CAnonymous key=\"/\" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/', hash: '', query: {…}, name: 'index', path: '/', …} ... > \n at \u003CRouterView name=undefined route=undefined > \n at \u003CNuxtPage> \n at \u003CApp key=4 > \n at \u003CNuxtRoot>\n```\n\nThe cause for the mismatch is that the async component is never rendered during SSR.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2880,2883],{"name":2881,"color":2882},"upstream","E8A36D",{"name":2884,"color":2885},"upstream-bug","B60205",29919,"Async component inside \u003CTeleport> is not rendered during SSR","2024-11-24T19:41:10Z","https://github.com/nuxt/nuxt/issues/29919",0.66307425,{"labels":2892,"number":2897,"owner":2871,"repository":2871,"state":2898,"title":2899,"updated_at":2900,"url":2901,"score":2902},[2893,2894],{"name":2868,"color":2869},{"name":2895,"color":2896},"2.x","d4c5f9",10361,"closed","Dynamic loaded Async component event listener not work on SSR first rendered","2024-06-30T09:25:18Z","https://github.com/nuxt/nuxt/issues/10361",0.6110849,{"description":2904,"labels":2905,"number":2907,"owner":2871,"repository":2871,"state":2898,"title":2908,"updated_at":2909,"url":2910,"score":2911},"I have load editor component async like bellow:\r\n```\r\n...\r\nasync created () {\r\n const editor = await import('~/components/editor.vue')\r\n Vue.component('editor', editor)\r\n}\r\n...\r\n```\r\n\r\nbut when I upgrade the nuxt version to `^1.0.0-rc8` , the editor component can't load, has some where changed?\r\n\r\nthe source code is here https://github.com/awesomes-cn/new-awesomes/blob/master/components/comment.vue#L184\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/c1442\">#c1442\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2906],{"name":2895,"color":2896},1615,"new version nuxt not surpport async component?","2023-01-18T15:42:01Z","https://github.com/nuxt/nuxt/issues/1615",0.62984204,{"labels":2913,"number":2916,"owner":2871,"repository":2871,"state":2898,"title":2917,"updated_at":2918,"url":2919,"score":2920},[2914,2915],{"name":2868,"color":2869},{"name":2895,"color":2896},6844,"The async component cannot SSR in a named slot","2024-06-30T09:26:08Z","https://github.com/nuxt/nuxt/issues/6844",0.6342174,{"description":2922,"labels":2923,"number":2929,"owner":2871,"repository":2871,"state":2898,"title":2930,"updated_at":2931,"url":2932,"score":2933},"### Environment\n\nNuxi 3.0.0\r\n\r\nRootDir: /home/projects/nuxt-starter-knkmhu\r\nNuxt project info: \r\n\r\n------------------------------\r\n- Operating System: `Linux`\r\n- Node Version: `v16.14.2`\r\n- Nuxt Version: `3.0.0`\r\n- Nitro Version: `1.0.0`\r\n- Package Manager: `npm@7.17.0`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\r\n\r\n\n\n### Reproduction\n\n- Nuxt version (with bug): https://stackblitz.com/edit/nuxt-starter-knkmhu?file=app.vue\r\n- Vue 3 version (working): https://sfc.vuejs.org/#eNqNksFugzAMhl/F4hKQGFSTdonaSnQvsMOOuVAwhQ6SKAmtqop3n0ML7dgOu+E/6PP/274GmdbJqceAB2tbmEY7sOh6vRWy6bQyDq5gsIqhxKqR+K5IlChdDPWkZfYii/kBBqiM6oARlAkpZKGkdTC/Z7CBMILNFuqQlc2JxdTBukuLHNg+L74ORvWy5NS1ZDDEwB7ojEW/eLv/8vYtGVoAdx44IRc5Nn/GC69CArQqL9Hwe2OJZ/igzI3FMDRoR5Gm+Nl0qHrnpRjeVqtVFCWuRhk+zEfxhGvkYZb507jGH0ps8wuHV2JQPZDpdXrbFu2JCoedbnOHVAGsn2adLpTdpCzCenWdzpggDm7bf+lynRytknQfY3Jxf7Ai4DAqXqNd+1oEtXPa8jS1VeGv6mgTZQ4pfSWml47mkaDtXvZGnS0aAovAIwbKRC29nekWnxIJN/r8aXD4Bv6Z7aY=\n\n### Describe the bug\n\nI encountered an issue with defineAsyncComponent `loadingComponent` property, it seems that the component provided is ignored.\r\n\r\nIn the example below, using `AsyncComponent` should render nothing for 2 seconds (delay) then render ComponentA for the next 5 seconds (the loadingComponent) and then after a total of 7 seconds display the ComponentB\r\n\r\n```vue\r\n\u003Cscript setup>\r\nimport { ref, defineComponent, h, defineAsyncComponent } from 'vue';\r\n\r\nconst ComponentA = () => h('div', { style: 'background: red' }, 'Component A loading');\r\nconst ComponentB = () => h('div', { style: 'background: blue' }, 'Component B loaded');\r\n\r\nconst AsyncComponent = defineAsyncComponent({\r\n loader: () => new Promise((res) => setTimeout(res, 5000)).then(ComponentB),\r\n loadingComponent: ComponentA,\r\n delay: 2000,\r\n});\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CClientOnly>\r\n \u003CComponentA />\r\n \u003CComponentB />\r\n \u003CAsyncComponent />\r\n \u003C/ClientOnly>\r\n\u003C/template>\r\n```\n\n### Additional context\n\nWhen not using `\u003CClientOnly>`, the `defineAsyncComponent` component will be pre-resolved so we can't see the issue at the first loading. (but I think the issue will also exist during page change) \n\n### Logs\n\n_No response_",[2924,2927,2928],{"name":2925,"color":2926},"3.x","29bc7f",{"name":2868,"color":2869},{"name":2881,"color":2882},15648,"loadingComponent property from defineAsyncComponent is ignored","2023-01-19T18:34:58Z","https://github.com/nuxt/nuxt/issues/15648",0.6472019,{"labels":2935,"number":2937,"owner":2871,"repository":2871,"state":2898,"title":2938,"updated_at":2939,"url":2940,"score":2941},[2936],{"name":2925,"color":2926},13349,"All components are wrapped into defineAsyncComponent","2023-01-19T16:53:07Z","https://github.com/nuxt/nuxt/issues/13349",0.6480768,{"labels":2943,"number":2945,"owner":2871,"repository":2871,"state":2898,"title":2946,"updated_at":2947,"url":2948,"score":2949},[2944],{"name":2895,"color":2896},9641,"third party library, lazy loading, dev server complains, static build is fine","2023-01-18T15:28:51Z","https://github.com/nuxt/nuxt/issues/9641",0.6493524,{"description":2951,"labels":2952,"number":2966,"owner":2871,"repository":2871,"state":2898,"title":2967,"updated_at":2968,"url":2969,"score":2970},"### Environment\n\n```\r\nWorking directory: /home/projects/nuxt-starter-ta6mqt\r\nNuxt project info:\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.9.3\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n```\n\n### Reproduction\n\n[Reproduction repository](https://stackblitz.com/edit/nuxt-starter-ta6mqt)\r\n\r\n- run `npm run build && npm run preview`\r\n- access the page and look at the HTML response\r\n- notice that the styles for both `layout.vue` and `AsyncCompParent.vue` are NOT inlined in the response\r\n\n\n### Describe the bug\n\nThere seems to be an issue when using a common mapping object to create associations to various components that need to be loaded dynamically.\r\n\r\nThis is a rather complex system so please follow along carefully.\r\n- we have an enum in `@/utils/name-map.js`\r\n- this enum is used in a parent component (`AsyncCompParent`) that will decide which other component to render based on an association map\r\n - these child components (`ChildComponentA`) are declared using `defineAsyncComponent` in order to achieve code splitting\r\n- The async component (`ChildComponentA`) uses a composable (`useSayMyName.js`) that, in turn, ALSO imports the enum\r\n\r\nThe setup above will cause the following:\r\n- no styles declared in `AsyncCompParent` are inlined in the SSR HTML response\r\n- no styles in `layout.vue` (which is the _parent_ of `AsyncCompParent`) are inlined in the SSR HTML response\r\n\r\n#### Expected behaviour\r\nThe styles for `layout.vue` and `AsyncCompParent.vue` should be inlined in the SSR HTML response, since these components are always present on the page and rendered at load time.\r\n\n\n### Additional context\n\nThe repo above is an extremely simplified version of code we ported from a Nuxt 2 app, where it functions as expected.\r\n\r\nMore background / things we discovered:\r\n- if, in any of the two files that import from `@/utils/name-map`, we instead redeclare a local copy of that constant, the build goes ahead as expected and the CSS is inlined (see comment in the code)\r\n- if we don't use `defineAsycnComponent`, and just use plain a `import` statement for `ChildComponentA`, the build goes ahead as expected\r\n- if we don't import `useSayMyName` in `ChildComponentA`, and instead import the enum directly there, the build goes ahead as expected\r\n\r\nNone of the options presented above are valid alternatives for us given the complexity of our code and, to be fair, I don't think we are doing any illegal coding patterns - this feels like a very common use-case for example when you want to trigger various flows from the same component and don't want the flow code to be included in the bundle since they might never be triggered.\n\n### Logs\n\n_No response_",[2953,2954,2957,2960,2963],{"name":2925,"color":2926},{"name":2955,"color":2956},"bug","d73a4a",{"name":2958,"color":2959},"vite","3574D1",{"name":2961,"color":2962},"🔨 p3-minor","FBCA04",{"name":2964,"color":2965},"inline styles","68AF97",25451,"On production build, CSS does not get inlined in SSR response in some cases when using `defineAsyncComponent`","2024-01-28T21:27:19Z","https://github.com/nuxt/nuxt/issues/25451",0.6515243,{"labels":2972,"number":2978,"owner":2871,"repository":2871,"state":2898,"title":2917,"updated_at":2979,"url":2980,"score":2981},[2973,2976,2977],{"name":2974,"color":2975},"stale","ffffff",{"name":2868,"color":2869},{"name":2895,"color":2896},6622,"2023-01-22T15:34:46Z","https://github.com/nuxt/nuxt/issues/6622",0.65549034,["Reactive",2983],{},["Set"],["ShallowReactive",2986],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fjOnP2qpNyyMiyErpYjAzjaXMDgqCXt6phYaiLzM030c":-1},"/nuxt/nuxt/2198"]