internationalized url path (multilanguage) for SEO

[samkanje]

This is by far my favourite vue3 template. However I miss having language specific URLs (e.g. /zh/* or /es/*).
How could I achieve this such that the generated pages are optimized for multilanguage SEO? Also, could it be an option to include this by default so that changing the lanugage also changes the URL?

Thank you.

[spokospace]

Hello, did you find a solution?
I'm trying to do something similar, In 'pages' i have a folder [lang] which is prop for language.
But the main problem is always with vite-ssg, I can't find a solution to build multilanguage pages for each language using i18n.
I noticed ssg build not use lang from props, just default one.

[spokospace]

idk if it's correct, but after add to vue files (e.g. [lang]/index.vue) this code:

onServerPrefetch(async () => {
locale.value = props.lang
})

vite-ssg started to build static pages in properly language.

[samkanje]

The issue with using the [lang] folder in my case is that I did not want the default language to have a prefix.

Look at my solution in the fork. https://github.com/samkanje/vitesse-multilanguage-tailwind

[spokospace]

i tried your solution, in dev it works as always with vitesse, but with production build doesn't work:

e-ssg/dist/shared/vite-ssg.62550b28.mjs:1046
        throw new Error(`${gray("[vite-ssg]")} ${red(`Error on page: ${cyan(route)}`)}
              ^

Error: [vite-ssg] Error on page: /hi/:name
Error: ENOENT: no such file or directory, open 'C:\Users\spoko\Downloads\vitesse-multilanguage-tailwind-main\dist\hi\:name.html'
    at file:///C:/Users/spoko/Downloads/vitesse-multilanguage-tailwind-main/node_modules/.pnpm/[email protected]_btsslyppnm7dvf4lyxme2fuxdq/node_modules/vite-ssg/dist/shared/vite-ssg.62550b28.mjs:1046:15    at async run (file:///C:/Users/spokoDownloads/vitesse-multilanguage-tailwind-main/node_modules/.pnpm/[email protected]_btsslyppnm7dvf4lyxme2fuxdq/node_modules/vite-ssg/dist/shared/vite-ssg.62550b28.mjs:627:36)

In the past I used my routes in this way:

productsJson.data.forEach(p => generatedRoutes.push(
  {
    name: `product-pl-${p.number}`,
    path: `/pl/product/${p.number}`,
    component: product,
    props: {
      lang: 'pl',
      productnumber: p.number,
    },
    meta: {
      layout: 'product',
    },
  },
))


const routes = setupLayouts([
  ...generatedRoutes,
}

do you have any idea how to fix it?