How to Limit Nuxt Page Translations to Specific Locales Using defineI18nRoute()

If you’re working with multilingual Nuxt 3 applications and using @nuxtjs/i18n, you may run into a scenario where only specific pages should be available in certain locales (e.g., /en-ae/menu, /ar-sa/menu) while others like /fr/menu should be disabled. Here’s how to do exactly that — the right way.

---

✅ Packages Used

• nuxt@^3.17.2
• @nuxtjs/i18n@^10.0.0-beta.4

---

✅ Problem Statement

You want a page like /menu to be available only in specific locales — such as:

• /en-ae/menu
• /en-sa/menu
• /ar-sa/menu

And disable it for all others like /fr/menu or /ar-ae/menu.

---

✅ The Right Way: defineI18nRoute()

Nuxt i18n provides a way to control routing per-page. You can use the defineI18nRoute() composable inside the page component to control which locales should have this route.

pages/menu.vue

<script setup lang="ts">
defineI18nRoute({
  locales: ['en-ae', 'en-sa', 'ar-sa']
})
</script>

<template>
  <main>
    <div class="text-center py-20">
      <h1>{{ $t("global.menu") }} - {{ $t("global.app_name") }}</h1>
    </div>
  </main>
</template>

---

🔧 Required Configuration in nuxt.config.ts

export default defineNuxtConfig({
  i18n: {
    strategy: 'prefix',
    customRoutes: 'config', // Required to use defineI18nRoute
    defaultLocale: 'en-ae',
    locales: [
      { code: 'en-ae', file: 'en-ae.json' },
      { code: 'en-sa', file: 'en-sa.json' },
      { code: 'ar-sa', file: 'ar-sa.json' },
      { code: 'ar-ae', file: 'ar-ae.json' },
      { code: 'fr', file: 'fr.json' }
    ]
  }
})

---

🧠 What Doesn’t Work

• definePageMeta({ nuxtI18n: false }) disables localization entirely — not selectively.
• There’s no excludeLocales or blacklist feature — only locales: [...] whitelist via defineI18nRoute.

---

✅ Final Notes

This method gives you per-page control over what locales are allowed — ideal for region-specific or language-limited content in Nuxt projects.

Want to automate locale inclusion/exclusion across many routes? Stay tuned for a follow-up post on dynamically managing i18n page access in Nuxt.