//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).",[2904],{"name":2905,"color":2906},"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.6623817,{"description":2915,"labels":2916,"number":1498,"owner":2908,"repository":2908,"state":2920,"title":2921,"updated_at":2922,"url":2923,"score":2924},"I'm trying to load the data from an api with axios through a store action, but the SSR don't wait the action finish.\r\n\r\nThere is any away to do it?\r\n\r\n```js\r\nnuxtServerInit({ dispatch }) {\r\n return dispatch('core/load');\r\n}\r\n\r\n//core actions\r\nimport { list as categoryList } from '../../services/category';\r\n\r\nexport default {\r\n load({ commit }) {\r\n return categoryList().then(categories => {\r\n commit('setCategories', categories);\r\n });\r\n }\r\n};\r\n\r\n//category action\r\nimport apiHttp from './api';\r\n\r\nexport function list() {\r\n return apiHttp.get('/categories').then(response => response.data);\r\n}\r\n\r\n//api\r\nimport * as axios from 'axios';\r\nimport { API_URL } from '../config';\r\n\r\nexport default axios.create({\r\n baseURL: API_URL //http://localhost:3000/\r\n});\r\n```\r\n\r\nThanks!\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/c106\">#c106\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2917],{"name":2918,"color":2919},"2.x","d4c5f9","closed","nuxtServerInit and async data","2023-01-18T15:38:30Z","https://github.com/nuxt/nuxt/issues/129",0.62093943,{"description":2926,"labels":2927,"number":2935,"owner":2908,"repository":2908,"state":2920,"title":2936,"updated_at":2937,"url":2938,"score":2939},"### What problem does this feature solve?\r\n\r\nI want to test the state data passed from server to client.\r\n`nuxt.renderRoute()` does not execute serverMiddleware.\r\nnuxtServerInit does not get request data by argument in `nuxt.renderRoute()`.\r\n\r\n### What does the proposed changes look like?\r\n\r\n`nuxt.renderRequest()` executes serverMiddleware.\r\nnuxtServerInit can get request data by argument in `nuxt.renderRequest()`.\r\n\r\n```\r\nconst { Nuxt, Builder } = require('nuxt')\r\nconst config = require('../nuxt.test.config.js')\r\nconst expect = require('chai').expect\r\nconfig.dev = false\r\ndescribe('Server side state', function() {\r\n let nuxt;\r\n this.timeout(30000);\r\n before(async function() {\r\n nuxt = new Nuxt(config)\r\n await new Builder(nuxt).build()\r\n })\r\n it('/abc', async function() {\r\n let req = { \r\n method: 'get'\r\n path: '/abc',\r\n header: {}, \r\n data: {}\r\n }\r\n let result = await nuxt.renderRequest(req)\r\n expect(result.context.state).to.deep.equal({ user: 'efg' })\r\n });\r\n});\r\n```\r\n\r\n\r\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\r\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This feature request is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c7024\">#c7024\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2928,2931,2934],{"name":2929,"color":2930},"enhancement","8DEF37",{"name":2932,"color":2933},"stale","ffffff",{"name":2918,"color":2919},3302,"Add nuxt.renderRequest()","2023-01-22T15:50:41Z","https://github.com/nuxt/nuxt/issues/3302",0.6377904,{"description":2941,"labels":2942,"number":2950,"owner":2908,"repository":2908,"state":2920,"title":2951,"updated_at":2952,"url":2953,"score":2954},"I am using token based authentication instead of session based. The auth server is different from the nuxt.js app.\r\nIs there a way to add async functions to nuxtServerInit function. Given below is the code which I tried. But looks like its not waiting for the Promise to return.\r\n\r\n\r\n `nuxtServerInit ({commit}, {req}) {\r\n console.log('nuxtServer init');\r\n let token = req.cookies.token;\r\n let email = req.cookies.email;\r\n return axios.post('https://my-server/api-token-verify/', {token: token}).then((response) => {\r\n if (response.data.token) {\r\n console.log('Token is valid');\r\n commit('auth/setUser', {token, email});\r\n return Promise.resolve();\r\n } else {\r\n commit('auth/setUser', null);\r\n console.log('Invalid token');\r\n return Promise.reject();\r\n }\r\n }).catch((err) => {\r\n console.log('Invalid token');\r\n return Promise.reject();\r\n });\r\n }`\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/c221\">#c221\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2943,2946,2949],{"name":2944,"color":2945},"question","cc317c",{"name":2947,"color":2948},"documentation","5319e7",{"name":2918,"color":2919},256,"Does nuxtServerInit support asyn functions?","2023-01-18T15:38:39Z","https://github.com/nuxt/nuxt/issues/256",0.6383356,{"description":2956,"labels":2957,"number":2959,"owner":2908,"repository":2908,"state":2920,"title":2960,"updated_at":2961,"url":2962,"score":2963},"### Versions\r\n\r\n- nuxt: 2.15.3\r\n- node: 15.11.0\r\n\r\n### Reproduction\r\n\r\nhttps://github.com/Zavtramen/FetchSSRProblem\r\n\r\na super simple nuxt app template was used for this repo:\r\n\r\n**npm init nuxt-app testapp**:\r\n Project name: testapp\r\n Programming language: JavaScript\r\n Package manager: Npm\r\n UI framework: None\r\n Nuxt.js modules: -\r\n Linting tools: -\r\n Testing framework: None\r\n Rendering mode: Universal (SSR / SSG)\r\n Deployment target: Server (Node.js hosting)\r\n Development tools: -\r\n Version control system: None\r\n\r\nChanges made:\r\n1. Changed Index page\r\n2. Added Test page\r\n3. Removed Logo Component\r\n4. Added Foo and Bar component\r\n\r\nThe project has two pages: Index and Test. The Test page contains two components: Foo and Bar. Both components use Fetch to get data (Promise with setTimeout to simulate real XHR). Foo has a data acquisition duration of 500ms. The bar has a data acquisition duration of 100 ms.\r\n\r\n### Steps to reproduce\r\n\r\nOpen http://localhost:3000/test/ and examine the console output.\r\n\r\n### What is Expected?\r\nExpect asynchronous behavior when creating components. As we can see this when rendering on the client side (if we navigate at runtime from the Index page to the Test page by link)\r\n\r\n* Test Page Created\r\n* Foo Created\r\n* Foo Fetch Start\r\n* Bar Created\r\n* Bar Fetch Start\r\n* Bar Fetch End\r\n* Foo Fetch End\r\n\r\n### What is actually happening?\r\nIn reality on server-side render, all the components are created one by one, they wait until the previous fetch request has completed to start their own.\r\n* Test Page Created\r\n* Foo Created\r\n* Foo Fetch Start\r\n* Foo Fetch End\r\n* Bar Created\r\n* Bar Fetch Start\r\n* Bar Fetch End\r\n\r\n",[2958],{"name":2918,"color":2919},9335,"Fetch on Server-Side Render is Synchronous","2023-01-18T22:05:29Z","https://github.com/nuxt/nuxt/issues/9335",0.6406574,{"labels":2965,"number":2969,"owner":2908,"repository":2908,"state":2920,"title":2970,"updated_at":2971,"url":2972,"score":2973},[2966,2967,2968],{"name":2932,"color":2933},{"name":2905,"color":2906},{"name":2918,"color":2919},8135,"When using `redirect`, `async nuxtServerInit` is not being executed","2023-01-22T15:38:17Z","https://github.com/nuxt/nuxt/issues/8135",0.6408581,{"description":2975,"labels":2976,"number":2980,"owner":2908,"repository":2908,"state":2920,"title":2981,"updated_at":2982,"url":2983,"score":2984},"### Versions\r\n\r\n- nuxt: 2.15.3\r\n- node: v14.15.4\r\n- nuxt/http: 0.6.4\r\n\r\n### Reproduction\r\n\r\nI have a \"frontend\" application (Nuxt) running on http://localhost:80 that needs to render all requests towards an internal \"backend\" rest api (running on http://localhost:8080). \r\n\r\nIn order to do so, I am trying to take advantage of SSR, since the backend is internal and cannot be exposed.\r\nTo do so, I used `asyncData`, following exactly what the documentation suggests: https://nuxtjs.org/docs/2.x/features/data-fetching/#async-data\r\n\r\nBelow is an oversimplified example of what I have setup so far:\r\n\r\n**pages/index.vue**\r\n```\r\n\u003Ctemplate>\r\n \u003Cspan>{{ module }}\u003C/span>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nexport default {\r\n name: 'Module',\r\n async asyncData ({ params, $http }) {\r\n const module = await $http.$get('http://localhost:8080/modules/' + params.module)\r\n return { currentModule }\r\n }\r\n}\r\n\u003C/script>\r\n```\r\n\r\n**nuxt.config.js**\r\n```\r\nexport default {\r\n head: {\r\n title: 'my-app',\r\n },\r\n ssr: true,\r\n target: 'server',\r\n modules: [\r\n '@nuxtjs/axios',\r\n '@nuxt/http'\r\n ]\r\n}\r\n```\r\n\r\n### What is Expected? What is actually happening?\r\n\r\nI would expect that once built (`npm run build` + `npm run start`) all requests from `asyncData` would be rendered on the server side on that particular page, however, when inspecting the browser's network traffic, I see the initial calls being made to http://localhost:8080 (suggesting client side rendering, which seems unexpected considering the documentation), only when I \"refresh\" the page in the browser the request seems to be rendered on the server (goes to http://localhost). \r\n\r\nSince I followed the documentation I'm opening this as a bug. But I'm glad to take suggestions on how to improve this scenario.",[2977,2978,2979],{"name":2932,"color":2933},{"name":2905,"color":2906},{"name":2918,"color":2919},9474,"SSR asyncData issue: rendering on client instead of server","2024-04-15T18:50:31Z","https://github.com/nuxt/nuxt/issues/9474",0.65056914,{"description":2986,"labels":2987,"number":2990,"owner":2908,"repository":2908,"state":2920,"title":2991,"updated_at":2992,"url":2993,"score":2994},"\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\nHi, I just realized that `asyncData` and `nuxtServerInit` was called twice (two time for asyncData and two time for nuxtServerInit).\r\nI tried on nuxt v2.14.6 and nuxt 2.14.11 (latest) but no luck.\r\nI was successful to reproduce this behaviour on new `create nuxt app` created by command `npx create-nuxt-app new-nuxt`.\r\nYou can check it on my reproduce repository below.\r\n\r\n**Additional**: I tried both dev run and production build.\r\n\r\n\r\n### Versions\r\n\r\n- nuxt: tried 2.14.6 and 2.14.11 \u003C!-- ex: v2.13.0 -->\r\n- node: v12.14.0\r\n\r\n### Reproduction\r\nReproduce repo: https://github.com/bahung1221/nuxt-bug-reproduce\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- `npx create-nuxt-app new-nuxt`.\r\n- Add asyncData to `pages/index.vue`.\r\n- Try to console log anything.\r\n\r\n### What is Expected?\r\n`nuxtServerInit` should be called only one for each request, I normally get user data from API server through nuxtServerInit so it doesn't necessary to get the same data two times for each page load.\r\n\r\n### What is actually happening?\r\n`nuxtServerInit` and `asyncData` was called twice.\r\n",[2988,2989],{"name":2905,"color":2906},{"name":2918,"color":2919},8491,"both nuxtServerInit and asyncData was called twice","2023-01-22T15:38:24Z","https://github.com/nuxt/nuxt/issues/8491",0.6535496,{"description":2996,"labels":2997,"number":2999,"owner":2908,"repository":2908,"state":2920,"title":3000,"updated_at":3001,"url":3002,"score":3003},"Hello,\r\nI've created an issue before, but no one give real solution, and the issue Closed!!\r\ncheck it:\r\nhttps://github.com/nuxt/nuxt.js/issues/2307\r\n\r\ngenerally I'm using AdonisJs and NuxtJs!\r\n\r\nthis is my `nuxtServerInit()` function:\r\n```\r\n async nuxtServerInit ({ commit }) {\r\n const response = await axios.get('http://localhost:3333/api/v1/getcounter/')\r\n return Promise.resolve(commit('increment', response.data))\r\n },\r\n```\r\nthis code won't work for me, the response status: 204!!\r\nbut when i change the URL to another API Like this:\r\n\r\n```\r\n async nuxtServerInit ({ commit }) {\r\n const response = await axios.get('https://www.random.org/integers/?num=1&min=1&max=2&col=1&base=10&format=plain&rnd=new')\r\n return Promise.resolve(commit('increment', response.data))\r\n },\r\n```\r\nit works and i get the data.\r\nbut the local API URL works when use it on another `Action Function`:\r\n```\r\n async increment ({ commit }) {\r\n try {\r\n const response = await axios.get('http://localhost:3333/api/v1/getcounter/')\r\n return commit('increment', response.data)\r\n } catch (e) {\r\n console.log(e)\r\n }\r\n }\r\n```\r\nthis works when use it!!\r\n\r\ni have tried to `Dispatch` the `increment` when `component` `mounted()` or `beforeCreated()`\r\n```\r\nmounted () {\r\n this.$store.dispatch('increment')\r\n },\r\n```\r\n\r\nbut when loading the page:\r\n\r\nit shows the value from `nuxtServerInit()`:\r\n1. if the url is Local (it means nuxtServerInit() won't work) the result is: null or NAN.\r\n2. else if the URL (like random.org): it shows the value 1 or 2.\r\n\r\nthen in moment it shows the value of `dispatch`.\r\n i have searched a lot,\r\nsome one said this is the solution?\r\nhttps://github.com/nuxt-community/express-template/blob/master/protected-ssr-api.md\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/c2121\">#c2121\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2998],{"name":2918,"color":2919},2445,"nuxtServerInit() not respond to Local API URL","2023-01-18T15:55:18Z","https://github.com/nuxt/nuxt/issues/2445",0.6556435,{"description":3005,"labels":3006,"number":2999,"owner":2908,"repository":3010,"state":2920,"title":3011,"updated_at":3012,"url":3013,"score":3003},"### Environment\n\n\n------------------------------\n- Operating System: Linux\n- Node Version: v20.14.0\n- Nuxt Version: 3.13.2\n- CLI Version: 3.15.0\n- Nitro Version: 2.9.7\n- Package Manager: npm@10.7.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@2.18.7\n- Build Modules: -\n------------------------------\n\n### Version\n\n2.18.7\n\n### Reproduction\n\nhttps://github.com/cdLab996/nuxt-ui-example\n\n### Description\n\nHello everyone, I apologize for the interruption.\n\nI've noticed an issue while using the USelectMenu component. When the change event is bound, it gets triggered even if the currently selected value hasn't changed from the previous selection. To observe this behavior more clearly, you can use a watch for comparison.\n\nIn general understanding, the change event should only be triggered when the selected value actually changes. If there's no change in value, the change event shouldn't be triggered.\n\nSo, I'm wondering, does this qualify as a problem with the component?\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3007],{"name":3008,"color":3009},"bug","d73a4a","ui","USelectMenu Component Triggers Change Event Even When Value Remains Unchanged","2024-11-05T16:13:46Z","https://github.com/nuxt/ui/issues/2445",["Reactive",3015],{},["Set"],["ShallowReactive",3018],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$ffh0NZosdEwabgVowWXrM7DdDOfqfG9D9VDWFLT8Av4A":-1},"/nuxt/nuxt/202"]