JV Posts - Answer Overflow

•Created by JV on 7/26/2024 in #❓・help

Nuxt 3.12 useAsyncData and hydratation errors

Hello, after upgrade to 3.12 some new errors appeared in our big app. At first https://github.com/nuxt/nuxt/commit/d5023955d3011d761de07b73605818aaa9efab99 this commit is not valid in my opinion, because in new fresh project it still fetching twice (client + server) when null returned in useAsyncData callback. But my main problem are hydratation errors of html attributes - somehow these errors showed up after upgrade and it is really weird, because some attributes which are marked as errors are not changing by any logic in code. And last new error - "useAsyncData should return value" appeared and I fully understand, but can be somehow showed up which useAsyncData? For example a file/row? Thank you all!

1 replies

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