JV Comments - Answer Overflow

•Created by JV on 4/30/2024 in #❓・help

Nested composables with custom useAsyncData wrapper

Yeah I know its the preferred way, but our project is really big, so we have to go step by step. Is it ok for now to use defineNuxtComponent, or it will break something?

4 replies

NNuxt

•Created by JV on 4/30/2024 in #❓・help

Nested composables with custom useAsyncData wrapper

defineNuxtComponent for index.vue did the trick, but I dont know if I can use defineNuxtComponent alongside with composition api?

4 replies

NNuxt

•Created by JV on 4/30/2024 in #❓・help

defineComponent and async/await useAsyncData

bump please

2 replies

NNuxt

•Created by JV on 4/23/2024 in #❓・help

moving from Nuxt2 useFetch to Nuxt3 useAsyncData - how would you refactor this example?

isnt execute and refresh the same functionallity?

32 replies

NNuxt

•Created by JV on 4/23/2024 in #❓・help

moving from Nuxt2 useFetch to Nuxt3 useAsyncData - how would you refactor this example?

Im now working with this in mind - trying to create composable which allows me to fetch data of HomePage on SSR and on client either, when I come from another subpage. This is just example in my mind, but I dont think this will be ok too.. @manniL / TheAlexLichter - this immediate: false and calling execute is important for me - Im executing it from another composable

export const useHomePage = async () => {
  
  const onSuccess = new SimpleEventDispatcher()
  const onError = new SimpleEventDispatcher()
  
  const {data, execute} = useAsyncData(async () => {
    try {
      const response = await doSomething()
      onSuccess.dispatch(response)
      return response
    } catch (e) {
      onError.dispatch(e)
    }
  }, {immediate: false})

  await execute()

  return {
    onSuccess,
    onError,
    data,
    execute
  }
}

export const useHomePage = async () => {
  
  const onSuccess = new SimpleEventDispatcher()
  const onError = new SimpleEventDispatcher()
  
  const {data, execute} = useAsyncData(async () => {
    try {
      const response = await doSomething()
      onSuccess.dispatch(response)
      return response
    } catch (e) {
      onError.dispatch(e)
    }
  }, {immediate: false})

  await execute()

  return {
    onSuccess,
    onError,
    data,
    execute
  }
}

32 replies

NNuxt

•Created by JV on 4/23/2024 in #❓・help

moving from Nuxt2 useFetch to Nuxt3 useAsyncData - how would you refactor this example?

@manniL / TheAlexLichter how would you implement these functions like "onSuccess"/"onError"? We are using "ste-simple-events" package for that

32 replies

NNuxt

•Created by JV on 4/23/2024 in #❓・help

moving from Nuxt2 useFetch to Nuxt3 useAsyncData - how would you refactor this example?

I maybe overengineered that, now it looks clear, Ill try to do my best and in case of any other problems Ill let you know - if I can. Thank you so much!

32 replies

NNuxt

•Created by JV on 4/23/2024 in #❓・help

moving from Nuxt2 useFetch to Nuxt3 useAsyncData - how would you refactor this example?

@manniL / TheAlexLichter thank you for your answer! Ill try to explain "some purposes" we are using "useFetch" with our wrapper, which provides some events like "onSuccess", "onError" etc. In some cases, we need to modify data that comes from api call - this maybe could be achieved by computed properties. But I would like to keep our wrapper with "onSuccess", "onError" events

32 replies

NNuxt

•Created by JV on 4/23/2024 in #❓・help

moving from Nuxt2 useFetch to Nuxt3 useAsyncData - how would you refactor this example?

32 replies

NNuxt

•Created by JV on 4/23/2024 in #❓・help

moving from Nuxt2 useFetch to Nuxt3 useAsyncData - how would you refactor this example?

Ok, and one more question - does useAsyncData have some way how to add event listeners like onRequest like you showed in your example with useFetch? @Wild

32 replies

NNuxt

•Created by JV on 4/23/2024 in #❓・help

moving from Nuxt2 useFetch to Nuxt3 useAsyncData - how would you refactor this example?

@BeerDuck exactly!

32 replies

NNuxt

•Created by JV on 4/23/2024 in #❓・help

moving from Nuxt2 useFetch to Nuxt3 useAsyncData - how would you refactor this example?

Do not rely on variable name or usage, the main issue is how to modify other refs inside useAsyncData

32 replies

NNuxt

•Created by JV on 4/23/2024 in #❓・help

moving from Nuxt2 useFetch to Nuxt3 useAsyncData - how would you refactor this example?

I tried to refactor it this way:

  const homePageLoaded = ref<boolean>(false)

  const { data: homePage } = useAsyncData(async () => {
    homePage.value = await loadHomePage()
    homePageLoaded.value = true

    return homePage
  })

  const homePageLoaded = ref<boolean>(false)

  const { data: homePage } = useAsyncData(async () => {
    homePage.value = await loadHomePage()
    homePageLoaded.value = true

    return homePage
  })

But the homePageLoaded is not synced properly and I dont think using useState for this is a good way... could you please help/explain, how to refactor it with the smallest amount of other code changes possible?

32 replies

Gaming

Programming