Mike Comments - Answer Overflow

Mike

•Created by Jonas on 9/28/2024 in #❓・help

Couldn't resolve component "default" at "/"

Got some occurrences of this error in Sentry, seems to happen after upgrading to Nuxt 3.13.2 from 3.11. Mostly happens for bots but has also impacted some real users

17 replies

NNuxt

•Created by Kyoko on 9/30/2024 in #❓・help

How to get headers in Nuxt middleware?

Have you tried this? https://nuxt.com/docs/api/composables/use-request-headers

2 replies

NNuxt

•Created by plr. on 9/11/2024 in #❓・help

How to fetch properly ?

Looks like there's an ssl error on that site. Try fetching https://httpbin.org/get to see if that works

8 replies

NNuxt

•Created by bobvantpadje on 9/12/2024 in #❓・help

Shareable custom useAsyncData composable

You're welcome 🙂

6 replies

NNuxt

•Created by bobvantpadje on 9/12/2024 in #❓・help

Shareable custom useAsyncData composable

I'm not sure. It says it only caches when payloadExtraction is enabled, so maybe something to do with that

6 replies

NNuxt

•Created by bobvantpadje on 9/12/2024 in #❓・help

Shareable custom useAsyncData composable

I found this video quite helpful, when implementing something similar https://www.youtube.com/watch?v=aQPR0xn-MMk TLDW: Use getCachedData on useAsyncData

6 replies

NNuxt

•Created by george.x.r on 9/10/2024 in #❓・help

Language Switcher (i18n) does not update components

so useRetrieveDataFind is dependent on locale? Try adding locale to watch params: https://nuxt.com/docs/api/composables/use-async-data#watch-params

8 replies

NNuxt

•Created by george.x.r on 9/10/2024 in #❓・help

Language Switcher (i18n) does not update components

Can you show the code for TheFooter or TheNavigation?

8 replies

NNuxt

•Created by Mike on 8/2/2024 in #❓・help

Typing a custom `useFetch` to include null

I've created a draft PR here: https://github.com/nuxt/nuxt/pull/28389

18 replies

NNuxt

•Created by Mike on 8/2/2024 in #❓・help

Typing a custom `useFetch` to include null

Don't know why the type is repeated twice in 4.0

18 replies

NNuxt

•Created by Mike on 8/2/2024 in #❓・help

Typing a custom `useFetch` to include null

In 4.0 it seems to be globalThis.Ref<string | undefined, string | undefined> and in 3.12 it's globalThis.Ref<string | null> when doing const {data} = await useAPI<string>('test')

18 replies

NNuxt

•Created by Mike on 8/2/2024 in #❓・help

Typing a custom `useFetch` to include null

Should I update the recipe to use this function signature?

export function UseAPI<T>(
  url: string | (() => string),
  options?: UseFetchOptions<T>,
) {

export function UseAPI<T>(
  url: string | (() => string),
  options?: UseFetchOptions<T>,
) {

18 replies

NNuxt

•Created by Mike on 8/2/2024 in #❓・help

Typing a custom `useFetch` to include null

Yeah in 4.0, the return type is default?: (() => globalThis.Ref<undefined, undefined> | undefined) | undefined

18 replies

NNuxt

•Created by Mike on 8/2/2024 in #❓・help

Typing a custom `useFetch` to include null

I'll check

18 replies

NNuxt

•Created by Mike on 8/2/2024 in #❓・help

Typing a custom `useFetch` to include null

I think so as well. Wouldn't that change automatically in 4.0 when using options?: UseFetchOptions<T> as the function signature?

18 replies

NNuxt

•Created by Mike on 8/2/2024 in #❓・help

Typing a custom `useFetch` to include null

Just checked in a 3.12 project, seems to be the same

18 replies

NNuxt

•Created by Mike on 8/2/2024 in #❓・help

Typing a custom `useFetch` to include null

This is in a nuxt 3.11.2 project, want me to check with 3.12?

18 replies

NNuxt

•Created by Mike on 8/2/2024 in #❓・help

Typing a custom `useFetch` to include null

The type of default is default?: (() => globalThis.Ref<null> | null) | undefined, with this function signature:

export function useCachedFetch<T>(
  url: string | (() => string),
  options?: UseFetchOptions<T>,
) {
// my function
}

export function useCachedFetch<T>(
  url: string | (() => string),
  options?: UseFetchOptions<T>,
) {
// my function
}

18 replies

NNuxt

•Created by Mike on 8/2/2024 in #❓・help

Typing a custom `useFetch` to include null

I figured it out. Works if I add | null to the to the default return type:

function useAPI<T>(
  url: string | (() => string),
  options?: Omit<UseFetchOptions<T>, "default"> & { default?: () => T | Ref<T | null> },
) {
  return useFetch(url, {
    ...options,
    $fetch: useNuxtApp().$api,
  })
}

function useAPI<T>(
  url: string | (() => string),
  options?: Omit<UseFetchOptions<T>, "default"> & { default?: () => T | Ref<T | null> },
) {
  return useFetch(url, {
    ...options,
    $fetch: useNuxtApp().$api,
  })
}

I also made the options and default optional to bring it in line with regular useFetch usage. @manniL / TheAlexLichter should I update the recipe with these types?

18 replies

Gaming

Programming