Nuxt•5mo ago

Translate custom routes with i18n?

I'm trying to create a custom route that's also translatable, but for some reasons it doesnt quite work. whenever i'm trying to use it:

const localePath = useLocalePath()
localePath('miau')

const localePath = useLocalePath()
localePath('miau')

I'll get the translated path name, not the translation. I.e. i'll get /en/miau (instead of /en/miau-translated). The path DO WORK, the translation is the only problem

const router = useRouter();
router.getRoutes()

const router = useRouter();
router.getRoutes()

will list the right route, similar to the pages that are working:

[
{
  "path": "/en/miau",
  "name": "miau___en",
  "meta": {},
  "props": {
    "default": false
  },
  "children": [],
  "instances": {},
  "leaveGuards": {
    "Set(0)": []
  },
  "updateGuards": {
    "Set(0)": []
  },
  "enterCallbacks": {},
  "components": {},
  "__vd_id": "46"
},
// ... same for IT
{
    "path": "/en/about-us",
    "name": "about___en",
    "meta": {},
    "props": {
      "default": false
    },
    "children": [],
    "instances": {},
    "leaveGuards": {
      "Set(0)": []
    },
    "updateGuards": {
      "Set(0)": []
    },
    "enterCallbacks": {},
    "components": {},
    "__vd_id": "24"
  },
]

[
{
  "path": "/en/miau",
  "name": "miau___en",
  "meta": {},
  "props": {
    "default": false
  },
  "children": [],
  "instances": {},
  "leaveGuards": {
    "Set(0)": []
  },
  "updateGuards": {
    "Set(0)": []
  },
  "enterCallbacks": {},
  "components": {},
  "__vd_id": "46"
},
// ... same for IT
{
    "path": "/en/about-us",
    "name": "about___en",
    "meta": {},
    "props": {
      "default": false
    },
    "children": [],
    "instances": {},
    "leaveGuards": {
      "Set(0)": []
    },
    "updateGuards": {
      "Set(0)": []
    },
    "enterCallbacks": {},
    "components": {},
    "__vd_id": "24"
  },
]

Solution:

i managed to make it work by ditching custom-routes module and using app/router.options.ts instead, like so: ```ts import type { RouterConfig } from "nuxt/schema"; ...

Jump to solution

3 Replies

iamntzOP•5mo ago

My setup is the following:

//nuxt.config.ts
export default defineNuxtConfig({
    modules: [
      CustomRoutesModule,
      '@nuxtjs/i18n',
    ],
    i18n: {
        // lazy: true,
        defaultLocale: 'en',
        strategy: 'prefix',
        customRoutes: 'config',
        pages: {
          about: {// <<<<<<  this works
            en: "/about-us",
            it: "/chi-siamo",
          },
          miau: {//<<<< this doesn't
            en: "/miau-translated",
            it: "/miau-translated-in-it",
          },
  },
})

//nuxt.config.ts
export default defineNuxtConfig({
    modules: [
      CustomRoutesModule,
      '@nuxtjs/i18n',
    ],
    i18n: {
        // lazy: true,
        defaultLocale: 'en',
        strategy: 'prefix',
        customRoutes: 'config',
        pages: {
          about: {// <<<<<<  this works
            en: "/about-us",
            it: "/chi-siamo",
          },
          miau: {//<<<< this doesn't
            en: "/miau-translated",
            it: "/miau-translated-in-it",
          },
  },
})

// custom-routes.ts
import { defineNuxtModule, createResolver } from "@nuxt/kit";

export default defineNuxtModule({
  setup(options, nuxt) {
    const { resolve } = createResolver(import.meta.url);

    nuxt.hook("pages:extend", (pages) => {
      pages.push({
        name: "miau",
        path: "/miau",
        file: resolve("../app/pages/custom-component-page.vue"),
      });
    });
  },
});

// custom-routes.ts
import { defineNuxtModule, createResolver } from "@nuxt/kit";

export default defineNuxtModule({
  setup(options, nuxt) {
    const { resolve } = createResolver(import.meta.url);

    nuxt.hook("pages:extend", (pages) => {
      pages.push({
        name: "miau",
        path: "/miau",
        file: resolve("../app/pages/custom-component-page.vue"),
      });
    });
  },
});

Solution

iamntz•4mo ago

i managed to make it work by ditching custom-routes module and using app/router.options.ts instead, like so:

import type { RouterConfig } from "nuxt/schema";

import routes_i18n from "../config/routes";

const customRoutes = {
  miau: {
    route: routes_i18n.miau,
    component: () => import("~/pages/custom-component-page.vue"),
  },
};

export default {
  routes: (_routes) => {
    const routes = [..._routes]; // <<< because _routes is readonly

    Object.entries(customRoutes).forEach(
      ([routeName, { route, component }]) => {
        Object.entries(route).forEach(([lang, path]) => {
          routes.push({
            path: `/${lang}${path}`,
            name: `${routeName}___${lang}`,
            component,
          });
        });
      }
    );
    return routes;
  }
} satisfies RouterConfig;

import type { RouterConfig } from "nuxt/schema";

import routes_i18n from "../config/routes";

const customRoutes = {
  miau: {
    route: routes_i18n.miau,
    component: () => import("~/pages/custom-component-page.vue"),
  },
};

export default {
  routes: (_routes) => {
    const routes = [..._routes]; // <<< because _routes is readonly

    Object.entries(customRoutes).forEach(
      ([routeName, { route, component }]) => {
        Object.entries(route).forEach(([lang, path]) => {
          routes.push({
            path: `/${lang}${path}`,
            name: `${routeName}___${lang}`,
            component,
          });
        });
      }
    );
    return routes;
  }
} satisfies RouterConfig;

iamntzOP•4mo ago

it's much more hacky than i would like, but hey, at least it does the job, so... yay?

Gaming

Programming

Translate custom routes with i18n?