//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).",[3150],{"name":3151,"color":3152},"pending triage","E99695",25316,"Allow to await for useAsyncData in template","2024-06-30T11:06:12Z","https://github.com/nuxt/nuxt/issues/25316",0.71984893,{"description":3159,"labels":3160,"number":3161,"owner":3140,"repository":3162,"state":3163,"title":3164,"updated_at":3165,"url":3166,"score":3167},"in [module testing docs](https://test-utils.nuxtjs.org/api-reference/module-testing) page It only shows the following options:\r\n- `addPlugin`\r\n- `addLayout` \r\n- `addErrorLayout`\r\n- `addServerMiddleware` \r\n- `requireModule`\r\n\r\nBut the `addModule` option is not documented although it can be used!",[],476,"test-utils","closed","Module testing page is missing the \"addModule\" option","2023-12-02T00:13:13Z","https://github.com/nuxt/test-utils/issues/476",0.46184543,{"description":3169,"labels":3170,"number":3178,"owner":3140,"repository":3140,"state":3163,"title":3179,"updated_at":3180,"url":3181,"score":3182},"### Environment\r\n\r\n- Operating System: Darwin\r\n- Node Version: v21.3.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: yarn@1.22.19\r\n- Builder: -\r\n- User Config: typescript, runtimeConfig, devtools, ssr, modules, features, vuetify, css, vite\r\n- Runtime Modules: vuetify-nuxt-module@0.10.3, @pinia/nuxt@0.5.1, @nuxtjs/eslint-module@4.1.0\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\n```vue \r\n\u003Cscript lang=\"ts\" setup>\r\n// data: Ref\u003C{id: string, public: boolean}[] | null>\r\nconst { data } = useAsyncData\u003C{ id: string; public: boolean }[]>(\"/projects/\", () => $fetch(\"/projects/\"));\r\n\r\n// projects: globalThis.ComputedRef\u003C{id: string, public: boolean}[] | null>\r\nconst projects = computed(() => {\r\n // data.value: Ref\u003C{ id: string; public: boolean; }[] | null>.value: {id: string, public: boolean}[] | null\r\n return data.value;\r\n});\r\n\u003C/script>\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003C!-- Ref returned from useAsyncData is *not* correctly resolved -->\r\n \u003Ctemplate v-for=\"project in data\" :key=\"project.id\">\r\n \u003C!-- project: project: true | {id: string, public: boolean}[] | null -->\r\n \u003C!-- Where does the true and null comes from? -->\r\n\r\n \u003C!-- Property id does not exist on type true | { id: string; public: boolean; } | []-->\r\n {{ project.id }}\r\n \u003C/template>\r\n\r\n \u003C!-- Computed property is correctly resolved -->\r\n \u003Ctemplate v-for=\"project in projects\" :key=\"project.id\">\r\n \u003C!-- project: {id: string, public: boolean -->\r\n {{ project.id }}\r\n \u003C/template>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n### Describe the bug\r\n\r\nPossibly related to #25034\r\n\r\nType of ref `data` from `useAsyncData` is correctly resolved in the script tag, but not in the template. The current workaround is adding a computed property that wraps the `data` ref. (See screenshot)\r\n\r\nThe type error is also detected by `npx nuxi typecheck` (i.e. it's not IDE bug.)\r\n\r\n\r\n\u003Cimg width=\"1456\" alt=\"image\" src=\"https://github.com/nuxt/nuxt/assets/6180007/635a167f-e810-4f1d-8398-d97f80732710\">\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_",[3171,3174,3175],{"name":3172,"color":3173},"3.x","29bc7f",{"name":3151,"color":3152},{"name":3176,"color":3177},"needs reproduction","FBCA04",25698,"The data type is not resolved in the component template when using useAsyncData witch $fetch method","2024-02-13T18:17:31Z","https://github.com/nuxt/nuxt/issues/25698",0.68400097,{"description":3184,"labels":3185,"number":3187,"owner":3140,"repository":3140,"state":3163,"title":3188,"updated_at":3189,"url":3190,"score":3191},"### Environment\n\n------------------------------\n- Operating System: Linux\n- Node Version: v18.20.3\n- Nuxt Version: 3.13.2\n- CLI Version: 3.14.0\n- Nitro Version: -\n- Package Manager: npm@10.2.3\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Reproduction\n\n[https://stackblitz.com/edit/nuxt-starter-bpyqqk?embed=1&file=pages%2Fbad.vue](url)\n\n\n**good case**\n\n```\nconst ss_sl = ref(0);\n// useGoodSSRFetch defined in composables\nconst { data, error, refresh } = useGoodSSRFetch(\n 'https://api.kuleu.com/api/suijimima',\n 'GET',\n { ss_sl } // The parameter type is: ref\n);\n\nconst next = async () => {\n ss_sl.value++;\n console.log('count-->', ss_sl.value);\n\n refresh();\n};\n```\n\n**bad case**\n```\nconst ss_sl = ref(0);\n// useBadSSRFetch defined in composables\nconst { data, error, refresh } = useBadSSRFetch(\n 'https://api.kuleu.com/api/suijimima',\n 'GET',\n { ss_sl: ss_sl.value } // The parameter type is: value\n);\n\nconst next = async () => {\n ss_sl.value++;\n console.log('count-->', ss_sl.value);\n\n refresh();\n};\n```\n\n### Describe the bug\n\nI encapsulated the useAsyncData function under ‘composables’, and the call in the vue file was successful and I got the first page data, but when I wanted to get the second page data via 'refresh', I found that if the 'page' parameter is of the value type, I can only get the first page forever, but if the input parameter is a ref, I can get the subsequent pages normally.\n\n我在‘composables’目录下对‘useAsyncData’进行了封装,在vue文件中成功调用并得到了第1页数据,但当我想通过‘refresh’获取第2页数据时,我发现如果传入的'page'参数是值类型时,虽然我修改了'page'参数的值为2,但我仍然获取到第1页;但如果传入参数是ref类型则可以正常获取后续的页面。\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3186],{"name":3151,"color":3152},29846,"useAsyncData cannot be refreshed with ref-value in 'composables'","2024-12-19T13:54:49Z","https://github.com/nuxt/nuxt/issues/29846",0.69260484,{"labels":3193,"number":3198,"owner":3140,"repository":3140,"state":3163,"title":3199,"updated_at":3200,"url":3201,"score":3202},[3194,3195],{"name":3172,"color":3173},{"name":3196,"color":3197},"bug","d73a4a",12655,"Async imports with variables throw error","2023-01-19T16:45:31Z","https://github.com/nuxt/nuxt/issues/12655",0.71037817,{"description":3204,"labels":3205,"number":3208,"owner":3140,"repository":3140,"state":3163,"title":3209,"updated_at":3210,"url":3211,"score":3212},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v16.14.2\r\n- Nuxt Version: 3.4.3\r\n- Nitro Version: 2.4.0\r\n- Package Manager: pnpm@8.2.0\r\n- Builder: vite\r\n- User Config: modules, eslint\r\n- Runtime Modules: @nuxtjs/eslint-module@4.0.2\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-5ng4yv?file=package.json\n\n### Describe the bug\n\nI use the dependencies eslint,@nuxtjs/eslint-module,@typescript-eslint/eslint-plugin,@typescript-eslint/parser eslint-plugin-vue, but I can't check the template properly, I get the undefined variables in double brackets in the template, I run `npm run eslint` in the terminal and it doesn't report the error properly, I have added the correct script\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3206,3207],{"name":3172,"color":3173},{"name":3151,"color":3152},20754,"The vue sfc template is not checked properly when combining ts and eslint","2023-05-10T10:03:55Z","https://github.com/nuxt/nuxt/issues/20754",0.716165,{"labels":3214,"number":3218,"owner":3140,"repository":3140,"state":3163,"title":3219,"updated_at":3220,"url":3221,"score":3222},[3215,3216,3217],{"name":3172,"color":3173},{"name":3151,"color":3152},{"name":3176,"color":3177},14552,"^3.0.0-rc.6 ----- useAsyncData or useFetch . ","2023-01-19T17:36:57Z","https://github.com/nuxt/nuxt/issues/14552",0.71725345,{"labels":3224,"number":3232,"owner":3140,"repository":3140,"state":3163,"title":3233,"updated_at":3234,"url":3235,"score":3236},[3225,3228,3229],{"name":3226,"color":3227},"stale","ffffff",{"name":3151,"color":3152},{"name":3230,"color":3231},"2.x","d4c5f9",10099,"Cannot read properties of undefined (reading 'toLowerCase') using \"is\" directive with async data","2023-01-22T15:45:12Z","https://github.com/nuxt/nuxt/issues/10099",0.7202068,{"description":3238,"labels":3239,"number":3241,"owner":3140,"repository":3140,"state":3163,"title":3242,"updated_at":3243,"url":3244,"score":3245},"I'm at `/loja/pages/index.vue`\r\nThis is my code:\r\n```\r\n\u003Ctemplate>\r\n\t\u003Cdiv>\r\n\t \u003Ctemplate-home>\u003C/template-home>\r\n\t {{produtos}}\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\n import TemplateHome from '~/components/default/Templates/Home'\r\n import {$get} from '~/.nuxt-helpers/axios';\r\n import axios from 'axios'\r\n\r\n export default {\r\n components: {\r\n TemplateHome\r\n },\r\n async asyncData({params}) {\r\n let { produtos } = await axios.get('http://localhost:3010/api/produtos');\r\n return {produtos}\r\n }\r\n \r\n \r\n }\r\n\u003C/script>\r\n```\r\n\r\nOK, I get that I cannot use asyncData into layouts or components, but why it keeps returning me `[Vue warn]: Property or method \"produtos\" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. ` ?\r\nI'm already using `nuxtServerInit` to get some initial data to my state, but I think the right way to pass data to components is by `props` (I might be wrong here).\r\nWhat I'm doing wrong here? \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/c593\">#c593\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3240],{"name":3230,"color":3231},690,"Problems with async data in pages template","2023-01-18T15:39:41Z","https://github.com/nuxt/nuxt/issues/690",0.72072357,["Reactive",3247],{},["Set"],["ShallowReactive",3250],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fZLi0kte8lIRqn5cL4wkfYuoOaVzpxq0p27X7IWAHa8Q":-1},"/nuxt/nuxt.com/476"]