Localizing Sanctum Redirects with Nuxt i18n

[Thomanidas]

Hello everyone!

I’m new to Nuxt 3 and Vue 3. I’m using the Nuxt Sanctum module with a Laravel API, and authentication works perfectly. However, I also need to support multiple languages via @nuxtjs/i18n for SEO purposes, and right now Sanctum’s built‑in redirects always send users to a single, non‑localized URL (for example, /dashboard), regardless of the current locale.

I know I can disable the automatic initial user request and force Sanctum to append its plugin after i18n:

// nuxt.config.ts
export default defineNuxtConfig({
  sanctum: {
    endpoints: { user: '/api/v1/users/me' },
    client: { initialRequest: false },
    redirect: {
      onLogin:    '/dashboard',
      onLogout:   '/',
      onAuthOnly: '/login',
      onGuestOnly:'/dashboard'
    },
    appendPlugin: true
  }
})

I then created a plugin at plugins/sanctum-localized-redirect.ts to intercept sanctum:redirect and prepend the active locale.

However, inside my hook I cannot Call useI18n() or useLocalePath() (I get “must be called at the top of a setup function”).

What I’ve tried:

// plugins/sanctum-localized-redirect.ts
import { navigateTo } from '#app'
import type { I18n } from 'vue-i18n'

export default defineNuxtPlugin({
  name: 'sanctum-localized-redirect',
  // workaround – only works if this plugin truly loads after i18n
  dependsOn: ['i18n:plugin', 'nuxt-auth-sanctum'],

  setup(nuxtApp) {
    nuxtApp.hook('sanctum:redirect', (url) => {
      // ❌ useI18n() throws “must be called at the top of a setup function”
      // ❌ nuxtApp.$i18n can be undefined here
      // ❌ nuxtApp.$localePath can also be undefined
    })
  }
})

i'm looking for A clean, reliable pattern to:

• Get the current locale and
• Resolve a localized route (e.g. /dashboard → /fr/dashboard)

Thanks in advance for your help!

[manchenkoff]

Hey @Thomanidas! Thanks for your question. The sanctum:redirect hook is not supposed to be used to override the endpoint of the redirect.

In your case, since it is mostly related to the logic of your app, I'd recommend disabling the default redirect and handling it according to your needs.

To disable the default redirect, adjust nuxt.config.ts like this:

sanctum: {
    redirect: {
      onLogin: false,
    },
  },

Now you can define any redirect logic close to your login functionality, and it won't fail with "must be called at the top of a setup function" because it will be inside of setup function context. Let me know if you need help with applying this to your login component.

[Thomanidas]

Hey, thanks a lot for your reply and clarification! 🙏

Following your advice, I disabled all default Sanctum redirects in my nuxt.config.ts:

sanctum: {
  endpoints: {
    user: '/api/v1/users/me'
  },
  redirect: {
    onLogin: false,
    onLogout: false,
    onAuthOnly: false,
    onGuestOnly: false
  }
}

Then I handled redirects manually:

Login:

await login(credentials)
navigateTo(localePath('dashboard'))

Register:

await sanctumFetch('/register', { method: 'POST', body: credentials })
await refreshIdentity()
navigateTo(localePath('dashboard'))

Logout

await logout()
navigateTo(localePath('index'))

I also created two route middlewares to replace auth and guest, but localized:

i18n-auth.ts:

import type { User } from '~/types/user'

export default defineNuxtRouteMiddleware(() => {
  const { isAuthenticated } = useSanctumAuth()
  const localePath = useLocalePath()

  if (!isAuthenticated.value) {
    return navigateTo(localePath('login'))
  }
})

i18n-guest.ts:

import type { User } from '~/types/user'

export default defineNuxtRouteMiddleware(() => {
  const { isAuthenticated } = useSanctumAuth()
  const localePath = useLocalePath()

  if (!isAuthenticated.value) {
    return navigateTo(localePath('login'))
  }
})

Then I use them per-page, like this:

definePageMeta({
  middleware: ['i18n-auth']
})

defineI18nRoute({
  paths: {
    en: '/account/settings',
    es: '/cuenta/configuracion',
    pt: '/conta/configuracoes',
    fr: '/compte/parametres'
  }
})

Would you say this is the proper and clean way to handle localized redirects with Nuxt Sanctum and i18n?
If you have any improvement suggestions, I’d be very happy to hear them !

[manchenkoff]

I would say the cleanest approach would be to have a single URL like /account/settings and append the localised part based on the user preferences, which can be stored in local storage (once you know them). In this case, you do not need to have multiple routes. You can easily check what language is used based on the argument in the route, like domain.com/en-US/account/settings or even extracting it directly from the local storage without repeating in the URL at all (similar to what other websites have as a dropdown at the top/bottom of the page).

However, if you want to keep multiple routes as different URLs, then your solution is good enough.