Custom pages for different locales

[hydroid7]

I have this page structure:

├── products
│   ├── product-a.vue
│   └── product-b.vue
├── index.vue

What I want to achieve:

1. Create completely different product pages (product-a.vue and product-b.vue) using custom pages. (these need to be different files because the content will be entirely different, not just translated)
2. Translate homepage variants using Nuxt i18n.

My current i18n configuration:

i18n: {
  defaultLocale: "de",
  strategy: "prefix",
  locales: [
    { code: "en", language: "en", name: "English", file: "en.json" },
    { code: "de", language: "de", name: "Deutsch", file: "de.json" },
  ],
}

The problem:

I tried creating a custom module to register the locale-specific pages:

export default defineNuxtModule({
  setup(options, nuxt) {
    const { resolve } = createResolver(import.meta.url);
    const locales = ["de", "en"];
    const products = ["product-a", "product-b"];
    
    nuxt.hook("pages:extend", (pages) => {
      locales.forEach((locale) => {
        products.forEach((product) => {
          pages.push({
            name: `products-${product}___${locale}`,
            path: `/${locale}/products/${product}`,
            file: resolve(`../products/${locale}/${product}.vue`),
          });
        });
      });
    });
  },
});

But this creates double-prefixed routes like /en/de/product-a instead of the expected /de/products/product-a.

How can I properly configure this setup? Any help would be appreciated.

[ismaildasci]

hey, the issue is that you are adding pages that already have the locale prefix from i18n module, and then the module adds it again.

instead of manually prefixing in your module, let nuxt-i18n handle the prefixes. try this:

// modules/custom-pages.ts
import { defineNuxtModule, extendPages } from "@nuxt/kit";

export default defineNuxtModule({
  setup(options, nuxt) {
    extendPages((pages) => {
      // add base pages WITHOUT locale prefix
      pages.push({
        name: "product-a",
        path: "/products/product-a",
        file: resolve(__dirname, "../pages/custom/product-a.vue"),
        meta: {
          // tell i18n which locales this page supports
          nuxtI18n: {
            locales: ["de", "en"]
          }
        }
      });
    });
  }
});

the key points:

1. dont add locale prefix yourself - i18n module handles this
2. use nuxtI18n meta to control which locales get the page
3. for completely different content per locale, you can use separate page files

if you need totally different pages per locale (not just translated), another approach:

// nuxt.config.ts
i18n: {
  customRoutes: "config",
  pages: {
    "products/product-a": {
      de: "/produkte/produkt-a",
      en: "/products/product-a"
    }
  }
}

this way you define custom paths per locale in config instead of module.

also check your module load order in nuxt.config - your custom module should load BEFORE @nuxtjs/i18n so it can process your pages correctly.