Nuxt•2w ago

pinia custom plugin undefined

Hey there i have a custom fetch function from the docs https://nuxt.com/docs/guide/recipes/custom-usefetch but when declaring it inside the global store context of a pinia store its undefined, in the function scope it is not. But i dont really wanna call the useNuxtApp() composable everytime I fetch:

export const useUserStore = defineStore("userStore", (context) => {
// Global Store scope
  const nuxtApp = useNuxtApp()
  console.log(nuxtApp.$apiFetch); // undefined

  async function Fetch() {
// function scope
    const nuxtApp = useNuxtApp()

    await nuxtApp.$apiFetch() // working
  }
});

export const useUserStore = defineStore("userStore", (context) => {
// Global Store scope
  const nuxtApp = useNuxtApp()
  console.log(nuxtApp.$apiFetch); // undefined

  async function Fetch() {
// function scope
    const nuxtApp = useNuxtApp()

    await nuxtApp.$apiFetch() // working
  }
});

Do you have any regards why? Thanks!

5 Replies

Joni•2w ago

Apparently its not initialized yet, even tho i named the plugin 01.apiFetch.ts - any solutions to this?

const nuxtApp = useNuxtApp()
console.log(nuxtApp.$apiFetch);

nextTick(() => {
  const nuxtApp = useNuxtApp()
  console.log(nuxtApp.$apiFetch);
  
  nextTick(() => {
    const nuxtApp = useNuxtApp()
    console.log(nuxtApp.$apiFetch);
    
    nextTick(() => {
      const nuxtApp = useNuxtApp()
      console.log(nuxtApp.$apiFetch);
    })
  })
})

const nuxtApp = useNuxtApp()
console.log(nuxtApp.$apiFetch);

nextTick(() => {
  const nuxtApp = useNuxtApp()
  console.log(nuxtApp.$apiFetch);
  
  nextTick(() => {
    const nuxtApp = useNuxtApp()
    console.log(nuxtApp.$apiFetch);
    
    nextTick(() => {
      const nuxtApp = useNuxtApp()
      console.log(nuxtApp.$apiFetch);
    })
  })
})

undefined
undefined
undefined
async ƒ $fetch2(request, options) {
  const r = await $fetchRaw(request, options);
  return r._data;
}

undefined
undefined
undefined
async ƒ $fetch2(request, options) {
  const r = await $fetchRaw(request, options);
  return r._data;
}

Cue•2w ago

Configure the plugin dependency option if you want to initialize the plugin after it is loaded I.e. dependsOn: ['pinia'] Otherwise just define a composable and use that for simplicity.

Joni•2w ago

Thanks for the answer, unfortuantely its the other way around, pinia should wait for the plugin. I tried out your solution and $apiFetch is undefined I havent found anything to let pinia wait on other plugins

Cue•2w ago

Have you tried the more simplistic avenue of creating a composable? If it needs to be a plugin to, just provide the api from the composable.

Joni•2w ago

Thanks for trying to help me, I have a composable for a custom useFetch:

import type { UseFetchOptions } from 'nuxt/app'

export function useApiFetch<T>(
  url: string | (() => string),
  options?: UseFetchOptions<T>,
) {
  return useFetch(url, {
    ...options,
    $fetch: useNuxtApp().$apiFetch // use composable here instead?
  })
}

import type { UseFetchOptions } from 'nuxt/app'

export function useApiFetch<T>(
  url: string | (() => string),
  options?: UseFetchOptions<T>,
) {
  return useFetch(url, {
    ...options,
    $fetch: useNuxtApp().$apiFetch // use composable here instead?
  })
}

You suggest creating another composable instead of the plugin?

Gaming

Programming

pinia custom plugin undefined