JV Posts - Answer Overflow

Posts Comments

NNuxt

•Created by JV on 5/14/2024 in #❓・help

how to return null from useAsyncData and prevent re-fetching on client

Hello! Is there a way how to return NULL in some cases of useAsyncData while SSR and prevent re-fetching on client?

2 replies

NNuxt

•Created by JV on 5/10/2024 in #❓・help

useNuxtApp inside pinia action

Hi, I need to get some data from useNuxtApp() inside pinia action, but it doesn't seems to work. Can I even get somehow NuxtApp inside pinia action please?

3 replies

NNuxt

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

Nested composables with custom useAsyncData wrapper

Hi, my problem is demonstrated on StackBlitz https://stackblitz.com/edit/nuxt-starter-heohzu?file=pages%2Findex.vue It is tied with: 1) Repository pattern 2) Custom useAsyncData wrapper 3) SSR/Hydration errors and maybe it could be interesting for @manniL / TheAlexLichter because he(you) created some tutorials on how to use these patterns. Dont mind the result, just watch the code

4 replies

NNuxt

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

defineComponent and async/await useAsyncData

Hello, we are migrating big app from Nuxt2 (nuxtjs/composition-api) to Nuxt3 and Im now facing one problem. We are using export default defineComponent({}) pattern for our components with useFetch and migrating to useAsyncData without rewriting every component to <script setup> (maybe someday, but not now). we are using useAsyncData without async/awake, just const {data} = useAsyncData(...) and data is fetched on ssr properly. What is the difference? Thank you!

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?

Hello, as a title says, how would you refactor this example to keep SSR working exactly 1:1? Nuxt 2

  const homePage = ref<HomePage | null>(null)
  const homePageLoaded = ref<boolean>(false)

  useFetch(async () => {
    homePage.value = await loadHomePage()
    homePageLoaded.value = true
  })

  const homePage = ref<HomePage | null>(null)
  const homePageLoaded = ref<boolean>(false)

  useFetch(async () => {
    homePage.value = await loadHomePage()
    homePageLoaded.value = true
  })

32 replies

NNuxt

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

Cannot use component before initialization - explicit imports with defineComponent SFC pattern

Hello, we are migrating our big Nuxt2 app to Nuxt3. We are migrating from nuxtjs/composition-api, so we are using "defineComponent" pattern. But when I try to load a page with several components, it throws for some components "Cannot use "ComponentName" before initialization" and it points into "Components" part:

import ComponentName from '~/components/myPath/ComponentName.vue'
export default defineComponent({
  components: { ComponentName }, <-- HERE
  props: {...},
  setup: () => {...}
})

import ComponentName from '~/components/myPath/ComponentName.vue'
export default defineComponent({
  components: { ComponentName }, <-- HERE
  props: {...},
  setup: () => {...}
})

But when I remove it from "components" and import statement too, it works like a charm because of autoimports. But... why? Why just some components doing this? Why cannot use explicit imports? Thank you!

1 replies

Gaming

Programming