<NuxtLoadingIndicator> and useLarafetch / $larafetch

[mulky-sulaiman]

Hello @amrnn90 ,

I'm trying to make the NuxtLoadingIndicator to be work with useLarafecth / $larafetch, so I can get the laoding progress shown for each fetch request to the Breeze API.

Due to the nature of NuxtLoadingIndicator itself, seems like the solution for now is to add hook call for fetch options to the event of
onRequest and onResponse, as being mentioned in this example
nuxt/nuxt#14221 (comment)

Been tried to add such options in useLaraftch / $larafetch to no avail, So if you can direct me to where should I add those options to useLarafecth / $larafetch, that would be helpful.

Pardon for any unclear explanation or misconception, since I'm very noob for this frontend Vue/Nuxt things 🙏

[ironytr]

Hello @amrnn90 ,

I'm trying to make the NuxtLoadingIndicator to be work with useLarafecth / $larafetch, so I can get the laoding progress shown for each fetch request to the Breeze API.

Due to the nature of NuxtLoadingIndicator itself, seems like the solution for now is to add hook call for fetch options to the event of onRequest and onResponse, as being mentioned in this example nuxt/nuxt#14221 (comment)

Been tried to add such options in useLaraftch / $larafetch to no avail, So if you can direct me to where should I add those options to useLarafecth / $larafetch, that would be helpful.

Pardon for any unclear explanation or misconception, since I'm very noob for this frontend Vue/Nuxt things 🙏

yo bro my self noob too but this somehow works:

// plugins/loading.client.ts
export default defineNuxtPlugin(async (nuxtApp) => {
  // const router = useRouter()
  const { progress, isLoading, start, finish, clear } = useLoadingIndicator({
    duration: 2000,
    throttle: 0,
    // This is how progress is calculated by default
    estimatedProgress: (duration, elapsed) => (2 / Math.PI * 100) * Math.atan(elapsed / duration * 100 / 50)
  })


  nuxtApp.hook('page:start', () => {
    console.log('im a start')
    start()
    })
  

  nuxtApp.hook('page:finish', () => {
    console.log('im a finish')
    finish()
  })

  // router.beforeEach(() => {
    
  // })

  // router.afterEach(() => {
    
  // })

})

utils/$larafetch.ts

export const $larafetch = $fetch.create({
  credentials: "include",
  async onRequest({ request, options }) {
    const { backendUrl, frontendUrl } = useRuntimeConfig().public;
    const event = typeof useEvent === "function" ? useEvent() : null;

    const nuxtApp = useNuxtApp();

    if (import.meta.client) {
      nuxtApp.callHook("page:start");

      console.log(useCookie("XSRF-TOKEN").value, "useCookie(CSRF_COOKIE).value")
    }
........



//create onResponse func
  async onResponse({ response }) {

    const nuxtApp = useNuxtApp();

    if (import.meta.client) {
      nuxtApp.callHook("page:finish");

    }


    const { showSuccessMessage, showInfoMessage, showWarnMessage, showErrorMessage } = useMessages()

    const status = response.status;
    if ([201].includes(status)) {
      showSuccessMessage("Başarılı");

    }
    return;

  },

[mulky-sulaiman]

thank's man, i'll give it a try soon !