Reinier Kaper Posts - Answer Overflow

Reinier Kaper

•Created by Reinier Kaper on 2/3/2025 in #❓・help

Hydration error with i18n

We're facing hydration errors with nuxt-i18n, because the locale isn't set "fast enough" in a production build for our date formatting utilities. We use dayjs and we have a watcher for the locale switching in App.vue:

const { locale } = useI18n()
watch(locale, (newLocale) => {
  dates.locale(newLocale)
}, {
  immediate: true,
})

const { locale } = useI18n()
watch(locale, (newLocale) => {
  dates.locale(newLocale)
}, {
  immediate: true,
})

Unfortunately this seems to be too slow in a prod build. Probably because Vue resolves App.vue last, not first. I tried setting it in a plugin, but nuxt-i18n throws an error when the composable is used in a pluing (bug?). Not sure how to proceed, this seems like a pretty common thing to do?

27 replies

NNuxt

•Created by Reinier Kaper on 12/16/2024 in #❓・help

Can't get Vitest Extension to resolve Nuxt's auto-imports

I have Vitest running (sort of) in the terminal. It finds Nuxt's auto-imports just fine for my unit tests, but as soon as I use the Vitest Extension, they don't work. The extension seems to be completely unaware of Nuxt's environment. Not sure how to tackle this? As it's in that gray area betwee two pojects (Nuxt and Vitest)

15 replies

NNuxt

•Created by Reinier Kaper on 5/7/2024 in #❓・help

CSS files in manifest marked as prefetch & preload, but Nuxt doesn't output it

3 replies

NNuxt

•Created by Reinier Kaper on 4/1/2024 in #❓・help

i18n doesn't work with 3.11

I already reported a bug for it, just wanted to post for posterity. When using getRoutseBaseName, the i18n module throws a new error with nuxt 3.11, where it can't access the runtimeConfig. Repro is in the GH issue: https://github.com/nuxt-modules/i18n/issues/2891 This prevents us from upgrading

1 replies

NNuxt

•Created by Reinier Kaper on 3/22/2024 in #❓・help

Writing a wrapper for useFetch

Hey! We'd like to write some helper wrappers for useFetch (for example to call Ghost CMS endpoints for posts, or pages, all with their own composable abstracted. I'm wondering how do you correctly type the fetch options? I just want to pass the type through

export default function useGhostData(url: string, options: UseFetchOptions) { // UseFetchOptions requires 6 params
  const runtimeConfig = useRuntimeConfig()

  return useFetch(`${runtimeConfig}${url}`, options)
}

export default function useGhostData(url: string, options: UseFetchOptions) { // UseFetchOptions requires 6 params
  const runtimeConfig = useRuntimeConfig()

  return useFetch(`${runtimeConfig}${url}`, options)
}

3 replies

NNuxt

•Created by Reinier Kaper on 3/12/2024 in #❓・help

credentials = 'include' not sending cookies server-side in plugin

We have an ofetch plugin that sets some things in onRequest, this includes a options.credentials = 'include'. The option works fine (we can log it), but somehow the browser's cookies are never actually sent. Adding credentials: 'include' in useFetch works, but we need this option globally for all our API endpoints

2 replies

NNuxt

•Created by Reinier Kaper on 7/30/2023 in #❓・help

@nuxtjs/robots, defineNuxtConfig option `robots` is not recognized

As the title says. The robots key in the config file throws a TS error after installing the module.

Object literal may only specify known properties, and 'robots' does not exist in type 'InputConfig<NuxtConfig, ConfigLayerMeta>'.ts(2345)

5 replies

Gaming

Programming