Nuxt•2mo ago

nuxt context unavailable in definePageMeta `redirect`

I'm trying to redirect the user using definePageMeta and the redirect function, but my app needs i18n and when I try

definePageMeta({
  redirect: (to) => {
    const { $localePath } = useNuxtApp();
    return $localePath({ name: 'my-page, params: to.params });
  },
});

definePageMeta({
  redirect: (to) => {
    const { $localePath } = useNuxtApp();
    return $localePath({ name: 'my-page, params: to.params });
  },
});

I get $localePath is not a function. If I replace const { $localePath } = useNuxtApp(); with const localePath = useLocalePath(); I get another error "error caught during app initialization Error: i18n context is not initialized. Ensure the i18n plugin is installed and the composable is used within a Vue component or setup function.". Is there a way to access localePath in definePageMeta context at all ? If not, how should I tackle i18n and redirection using named routes and not absolute paths ?

5 Replies

kapa.ai•2mo ago

Hi @Kérunix. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You cannot access the Nuxt context or use composables like useNuxtApp() or useLocalePath() inside the redirect function of definePageMeta. This is because definePageMeta is a compiler macro, and its content is hoisted and executed outside of the component setup context, where the Nuxt app instance and i18n plugin are not available. This limitation is explicitly mentioned in the Nuxt documentation: you should not reference reactive data or functions that require the Nuxt context inside definePageMeta—only pure functions and imported bindings are allowed. Attempting to use composables here will result in errors like the ones you encountered Docs: Page Metadata. Why this happens: - The redirect function in definePageMeta is not executed in a Vue component or setup context, so i18n and Nuxt composables are unavailable. - The Nuxt context is only accessible in plugins, middleware, and setup functions of components/pages Docs: NuxtApp. How to handle i18n redirects: - If you need to perform locale-aware redirects, you should use Nuxt route middleware instead. Middleware runs in the correct context and has access to both the Nuxt app and i18n helpers. - In middleware, you can safely use useNuxtApp() or useLocalePath() to generate locale-aware paths and perform redirects. Example: Locale-aware redirect in middleware

// middleware/redirect-locale.ts
export default defineNuxtRouteMiddleware((to, from) => {
  const localePath = useLocalePath()
  if (/* your redirect condition */) {
    return navigateTo(localePath({ name: 'my-page', params: to.params }))
  }
})

// middleware/redirect-locale.ts
export default defineNuxtRouteMiddleware((to, from) => {
  const localePath = useLocalePath()
  if (/* your redirect condition */) {
    return navigateTo(localePath({ name: 'my-page', params: to.params }))
  }
})

Then, reference this middleware in your page's definePageMeta:

definePageMeta({
  middleware: 'redirect-locale'
})

definePageMeta({
  middleware: 'redirect-locale'
})

This approach ensures you have access to all necessary context and i18n utilities for dynamic, locale-aware redirects Docs: NuxtApp Docs: Middleware. Summary:
You cannot use i18n helpers or Nuxt context in definePageMeta's redirect. Use route middleware for locale-aware redirects instead. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@189762782642569217> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

KérunixOP•2mo ago

@kapa.ai are you sure ? It worked a couple days ago. I'm just upgrading to nuxt 4 and latest nuxt-i18N and it started erroring

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the provided knowledge sources, your experience aligns with recent changes in Nuxt 4 and its ecosystem. In Nuxt 3, it was possible to use locally defined functions in definePageMeta, and there was support for referencing imported bindings and pure functions in the meta object. However, the documentation and recent PRs clarify that you should not reference composables or anything that requires the Nuxt context inside definePageMeta. This is because definePageMeta is a compiler macro, and its content is hoisted out of the component setup context, making the Nuxt context (and thus i18n helpers like useLocalePath or $localePath) unavailable Docs: Page Metadata feat(nuxt): support local functions in definePageMeta. Recent changes in Nuxt 4 (and possibly updates in nuxt-i18n) have made this restriction more strict or surfaced errors that were previously silent. This is supported by the fact that the error only started appearing after your upgrade.

If you get an error message like Nuxt instance is unavailable then it probably means you are calling a Nuxt composable in the wrong place in the Vue or Nuxt lifecycle Docs: Auto-imports.

Summary:
- It may have worked before due to looser checks or differences in how context was handled. - In Nuxt 4, you cannot use composables or Nuxt context in definePageMeta's redirect function. - The recommended approach is to use route middleware for locale-aware redirects, where the Nuxt context and i18n helpers are available. If you need to perform dynamic, locale-aware redirects, move your logic to middleware and reference it in definePageMeta via the middleware property Docs: Plugins and Middleware. If you need more details or examples, let me know! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@189762782642569217> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

nuxt context unavailable in definePageMeta `redirect`

Did you find this page helpful?