` component, but how can I start/stop the loading manually like in Nuxt 2 ? \r\n\r\nIn Nuxt 2 I could do this:\r\n```\r\nthis.$nuxt.$loading.start();\r\nawait somePromise();\r\nthis.$nuxt.$loading.finish();\r\n```\r\nIn Nuxt 3, could we get a composable to do the same ?\r\n```\r\nconst loading = useLoading();\r\nloading.start();\r\nawait somePromise();\r\nloading.finish();\r\n```\r\n\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).",[2932,2933,2934],{"name":2873,"color":2874},{"name":2889,"color":2890},{"name":2892,"color":2893},19650,"`useLoading` composable to control `\u003CNuxtLoadingIndicator />` ?","2023-03-13T20:30:06Z","https://github.com/nuxt/nuxt/issues/19650",0.7419847,{"description":2941,"labels":2942,"number":2946,"owner":2863,"repository":2863,"state":2895,"title":2947,"updated_at":2948,"url":2949,"score":2950},"I am getting this error 'Cannot read property 'error' of undefined' after refreshing page in browser.\r\nIt works fine if I navigate to page with nuxt-link. \r\nIt also works fine if i use $toasted in mounted function instead of created.\r\n\r\n- nuxt@1.3.0\r\n- vue@2.5.13\r\n\r\nmycomponent.vue\r\n```\r\n created() {\r\n // This does not work\r\n this.$toast.error('Error')\r\n },\r\n mounted() {\r\n // This works\r\n this.$toast.error('Error')\r\n }\r\n```\r\n\r\nnuxt.config.js\r\n```\r\nmodules: [\r\n '@nuxtjs/toast',\r\n ],\r\n toast: {\r\n position: 'bottom-right'\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/c2471\">#c2471\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2943],{"name":2944,"color":2945},"2.x","d4c5f9",2845,"$toast is available in mounted but not in created function after browser refresh","2023-01-18T16:09:43Z","https://github.com/nuxt/nuxt/issues/2845",0.7444484,{"description":2952,"labels":2953,"number":2957,"owner":2863,"repository":2863,"state":2895,"title":2958,"updated_at":2959,"url":2960,"score":2961},"### Environment\n\n- Operating System: Darwin\r\n- Node Version: v19.9.0\r\n- Nuxt Version: 3.7.4\r\n- CLI Version: 3.9.0\r\n- Nitro Version: 2.6.3\r\n- Package Manager: npm@9.8.0\r\n- Builder: -\r\n- User Config: devtools, experimental\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n\r\nI'm using `\"nuxt\": \"npm:nuxt3@latest\"` \r\n\r\nThe right version of nuxt is : `3.8.0-28284309.b3d3d7f4`\n\n### Reproduction\n\nhttps://github.com/joffreyBerrier/nuxt-use-cookie\n\n### Describe the bug\n\nUsing **useCookie** after an await doens't work despite the fact that feature is available `experimental { asyncContext: true }`\r\n\r\n**Error message**\r\n\r\n```\r\nerror Error: [nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at `https://nuxt.com/docs/guide/concepts/auto-imports#using-vue-and-nuxt-composables`.\r\n at createError (index.mjs?v=164b9a79:78:15)\r\n at createError (error.js?v=164b9a79:31:16)\r\n at NuxtError (revive-payload.client.js?v=164b9a79:9:24)\r\n at hydrate (parse.js?v=164b9a79:60:32)\r\n at hydrate (parse.js?v=164b9a79:125:19)\r\n at hydrate (parse.js?v=164b9a79:125:19)\r\n at hydrate (parse.js?v=164b9a79:60:40)\r\n at unflatten (parse.js?v=164b9a79:132:9)\r\n at parse (parse.js?v=164b9a79:16:9)\r\n at parsePayload (payload.js?v=164b9a79:106:10)\r\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2954,2955,2956],{"name":2873,"color":2874},{"name":2889,"color":2890},{"name":2892,"color":2893},23777,"useCookie doesn't work after an await despite using asyncContext experimental feature","2023-10-22T18:24:21Z","https://github.com/nuxt/nuxt/issues/23777",0.74717516,{"description":2963,"labels":2964,"number":2966,"owner":2863,"repository":2863,"state":2895,"title":2967,"updated_at":2968,"url":2969,"score":2970},"### Describe the feature\n\nHello there!\n\nTo implement Server-Side Rendering (SSR) in Nuxt, developers are directed towards either [`useAsyncData`](https://nuxt.com/docs/api/composables/use-async-data) or [`useFetch`](https://nuxt.com/docs/api/composables/use-fetch) to prevent double data fetching. As I understand it, these composables perform two main tasks simultaneously (in addition to their ergonomic benefits):\n\n1. **Fetching the data**\n2. **Preserving the data in the [`SSR Context`](https://nuxt.com/docs/api/composables/use-nuxt-app#ssrcontext)** if the data is fetched on the server.\n\nIn my opinion, this coupled action results in an opinionated way to fetch data. Let me elaborate:\n\n1. Many libraries that would act as an End-point SDK , would do the data fetching themselves, making integration with these composables challenging. They may also require additional headers (e.g., authentication) for valid requests, complicating integration further.\n2. When generating network communication code (via OpenAPI or GraphQL specs), developers must wrap API calls in a `useAsyncData` composable, which can lead to verbosity. This is similar to the previous issue mentioned.\n3. While `useAsyncData` is ergonomic with its options, it does too much and returns excessive data. I simply want to prevent the double data fetching problem without relying on the additional features that `useAsyncData` provides.\n\nFor example:\n\n```ts\n// A generated/third-party library to make API calls\n// const api = useApi()\n\nconst subscriptions = useSubscription();\nconst income = useIncome();\nconst cost = useCosts();\n\nawait Promise.all([\n subscriptions.readSubs(),\n income.readIncome(),\n cost.readCost()\n]);\n```\n\nThis would result in double data fetching. The suggested solution would be to wrap all the data-fetching parts in a `useAsyncData` (including `readSubs` from the `subscriptions` composable, and so on). This forces developers to change the structure of their code wherever they make an API call.\n\nWhat if the internals of `useAsyncData` responsible for preventing double fetches were exposed as another composable? This would allow developers to opt-out of the \"extra\" features of `useAsyncData`.\n\nSomething like `useOnce`, similar to [`callOnce`](https://nuxt.com/docs/api/utils/call-once), but configurable for lazy fetching on the client and server fetching in `onServerPrefetch` or `app:created` (as `useAsyncData` does).\n\nIn that manner, we could restructure the previous code into:\n\n```ts\n// A generated/third-party library to make API calls\n// const api = useApi()\n\nconst subscriptions = useSubscription();\nconst income = useIncome();\nconst cost = useCosts();\n\nuseOnce(() => Promise.all([\n subscriptions.readSubs(),\n income.readIncome(),\n cost.readCost(),\n]));\n```\n\nHere are some assumptions I've made:\n\n1. By not awaiting this composable, we can guarantee data delivery on server requests and, in client-side navigation scenarios, request lazily on the client side (improving developer experience, such as showing a skeleton component).\n2. Composables like `subscriptions` or `income` store their states via `useState`.\n\nSometimes, data must be loaded before the page loads since an intermediate state is not acceptable. We would need a blocking version of this composable that returns data from the callback:\n\n```ts\nconst { posts } = await useBlockingOnce(() => Promise.all([\n api.blog.readPost(),\n]));\n```\n\nIn this case, `posts` does not necessarily need to be reactive, and since this is a blocking version, no loading (intermediate) state is needed.\n\nI've already implemented an incomplete version of these proposed composables, but first, I need to verify that my thought process is valid and that there are currently no other convenient ways to implement these functionalities. I would greatly appreciate any feedback or assistance on this matter! Thank you!\n\n\n### Additional information\n\n- [x] Would you be willing to help implement this feature?\n- [x] 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).",[2965],{"name":2860,"color":2861},29675,"`useOnce` composable: execute data fetching function only once either on server or client","2025-04-10T15:01:52Z","https://github.com/nuxt/nuxt/issues/29675",0.748251,["Reactive",2972],{},["Set"],["ShallowReactive",2975],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fwBG-xPc2Ioc_JvPC6iKwDWjxa4Y-dKBale6zupKfEzk":-1},"/nuxt/ui/4206"]