Data Fetching: Error: [nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware

Question

I am trying to fetch certain global page data and then save it. This should allow other components to use that data instead of loading the data in each place I need it. (See my other thread: How to reuse fetched data in vue 3 (nuxt 3)?)

I have this code now:

<script setup>
import config from '~/config.mjs'
const runTimeConfig = useRuntimeConfig()
const { setOptions } = useOptions()
const { setNavigation } = useNavigation()

const menus = ref(false)

const fetchMenus = async () => {
  fetchOptions('global-site-settings', 'globalSettings')
  fetchOptions('de-site-settings', 'siteSettings')

  const menus = await fetchMenuLocations()

  console.log('menus: ', menus)

  fetchMenu(menus, 'main')
  fetchMenu(menus, 'footer')
}

const fetchMenuLocations = async () => {
  console.log('fetch menu locations')
  const endpointMenus = `${runTimeConfig.public.API_URL}/wp-api-menus/v2/menus`
  const { data } = await useFetch(endpointMenus)
  menus.value = data.value
}

const fetchMenu = async (menus, location) => {
  console.log('fetchMenu', location)
  const menuID = menus.find((m) => m.slug === location)?.ID
  console.log('menuID: ', menuID)
  const endpointMenu = `${runTimeConfig.public.API_URL}/wp-api-menus/v2/menus/${menuID}`
  const { data: menu } = await useFetch(endpointMenu)
  console.log('menu.value: ', menu.value)
  setNavigation(location, menu.value)
}

const fetchOptions = async (location, name) => {
  console.log('fetchOptions', location)
  const endpointOptions = `${runTimeConfig.public.BACKEND_URL}${config.endpoints.options}/${location}`
  const { data: options } = await useFetch(endpointOptions)
  setOptions(name, options)
}

fetchMenus()
</script>

I get this as a result:

fetchOptions global-site-settings                                                                                                                           1:47:36 PM
fetchOptions de-site-settings                                                                                                                               1:47:36 PM
fetch menu locations                                                                                                                                        1:47:36 PM
fetchMenu main                                                                                                                                              1:47:36 PM
[1:47:36 PM] [nitro] [unhandledRejection] 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.
    at Module.useNuxtApp (/Users/path-to-my-project/node_modules/nuxt/dist/app/nuxt.js:174:13)
    at Module.useAsyncData (/Users/path-to-my-project/node_modules/nuxt/dist/app/composables/asyncData.js:26:38)
    at Module.useFetch (/Users/path-to-my-project/node_modules/nuxt/dist/app/composables/fetch.js:53:43)
    at fetchMenu (/Users/path-to-my-project/layouts/default.vue:78:48)
    at fetchMenus (/Users/path-to-my-project/layouts/default.vue:63:3)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
fetchMenu footer                                                                                                                                            1:47:36 PM
[1:47:36 PM] [nitro] [unhandledRejection] 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.
    at Module.useNuxtApp (/Users/path-to-my-project/node_modules/nuxt/dist/app/nuxt.js:174:13)
    at Module.useAsyncData (/Users/path-to-my-project/node_modules/nuxt/dist/app/composables/asyncData.js:26:38)
    at Module.useFetch (/Users/path-to-my-project/node_modules/nuxt/dist/app/composables/fetch.js:53:43)
    at fetchMenu (/Users/path-to-my-project/layouts/default.vue:78:48)
    at fetchMenus (/Users/path-to-my-project/layouts/default.vue:64:3)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

So the first fetch call are started
the fetchMenuLocations call is made and finishes. (if I log the data, I see the correct data)
The first async fetch calls to fetch the menus is started but then it breaks and I get the error above.

To my understanding this is all inside the vue setup function, so I don't understand why I get this error.

I can't really tell where the problem originates from. Actually the code is properly executed and the data is available and showing up in my frontend. I just get this error, but everything seems to work...

Data Fetching: Error: [nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware

0 Answers0