i18n support

[enricobasso]

Noob question here: could I use vue-i18n with Iles and still get it work?

[ElMassimo]

Hi Enrico!

An @islands/i18n plugin is in the roadmap. In the meantime:

Generate a different site per locale

This is common in documentation sites.

You would run the build once per language, passing the language in an environment variable or a different mean. In src/app.ts:

import { defineApp } from 'iles'
import { createI18n } from '~/logic/i18n'

export default defineApp({
  enhanceApp ({ app }) {
    const i18n = createI18n()
    app.use(i18n)
    i18n.global.locale = import.meta.env.VITE_LOCALE
  },
})

Single-site with all locales

At the moment, it's a very manual process, which is why I plan to create a plugin.

Currently, you would create a copy of each route per language using the pages.onRoutesGenerated hook in iles.config.ts and set route.meta.lang so that it can be used to set the current language.

import { defineConfig } from 'iles'

export default defineConfig({
  pages: {
    onRoutesGenerated (routes) {
      const languages = ['en', 'es']
      return languages.flatMap(lang =>
        routes.map(route => route.path === '/' && lang === 'en' ? route : ({
          ...route,
          name: `${lang}-${route.name}`,
          path: `/${lang}${route.path}`,
          meta: { ...route.meta, lang },
        })),
      )
    },
  },
})

Then, in enhanceApp in src/app.ts, you can configure the Vue app as usual, and set a router hook to set the locale:

import { defineApp } from 'iles'
import { createI18n } from '~/logic/i18n'

export default defineApp({
  enhanceApp ({ app, route, router }) {
    const i18n = createI18n(route)
    app.use(i18n)
    router.afterEach(route => { i18n.global.locale = route.meta.lang })
  },
})

Global Helpers in Islands

Since islands won't have the entire app context (or translations), if you need translated content inside islands, you should pass it explicitly using props.

[WaldemarLehner]

To any new readers, pages.onRoutesGenerated has been replaced with extendRoutes:

import { defineConfig } from 'iles'

export default defineConfig({
    extendRoutes (routes) {
        ...
    }
})

[bitsnaps]

and there is no pages: {...} as for now. The extendRoutes {...} config at top level.

[lutuh]

Thank you, Maximo!

This is how I used vue-i18n with external JSON files that can be used with tools such as BabelEdit, c.f. https://betterprogramming.pub/vue-i18n-ultimate-guide-fb3d9db48c94

$ npm list
[email protected] /home/baxter/source/iles-i18n
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

src/app.ts

import { defineApp } from 'iles'
import { createI18n } from 'vue-i18n'

import en from '~/locales/en.json'
import de from '~/locales/de.json'

const messages = Object.assign({
  en: en,
  de: de,
})

export default defineApp({
  enhanceApp ({ app }) {
    const i18n = createI18n({
      locale: import.meta.env.VITE_LOCALE,
      messages: messages,
    })
    app.use(i18n)
  },
})

src/locales/en.json

{
  "successfully": "successfully"
}

src/locales/de.json

{
  "successfully": "erfolgreich"
}

src/HelloWorld.vue

<template>
  <div class="greetings">
    <h1 class="green">{{ msg }}</h1>
    <h3>
      You’ve {{ $t("successfully") }} created a project with
      <a target="_blank" href="https://iles-docs.netlify.app/">îles</a> +
      <a target="_blank" href="https://vitejs.dev/">Vite</a> + <FrameworkLink client:none />. What's
      next?
    </h3>
  </div>
</template>

And running multiple language-specific builds:

$ VITE_LOCALE='en' npm run build
...
$ VITE_LOCALE='de' npm run build
...

Hope this helps somebody down the road. Cheers!

[ElMassimo]

Thanks for sharing Lucas!

[bitsnaps]

With current vue-i18n this doesn't seem to be working!

[Vue warn]: Property "$t" was accessed during render but is not defined on instance.
ReferenceError: __VUE_PROD_DEVTOOLS__ is not defined

[ElMassimo]

Try using the composable instead of the global properties. If there's a problem with the configuration, you'll likely get a more useful error message.

[bitsnaps]

Trying the composable API will make the dev server works (with option VITE_LOCALE='de' npm run dev):

<script setup lang="ts">
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
</script>

<template>
...
      You’ve {{ t('successfully') }} created a project with
</template>

We must disable legacy mode:
File: src/app.ts:

  enhanceApp({ app }) {
    const i18n = createI18n({
      locale: import.meta.env.VITE_LOCALE,
      legacy: false, // <-- need to be disabled
      messages: messages,
    });
    app.use(i18n);
  },

but the build ends with the error:

[Vue warn]: Unhandled error during execution of setup function at <HelloWorld msg="Welcome!" >
ReferenceError: __VUE_PROD_DEVTOOLS__ is not defined

This happens with VITE_LOCALE='en' option or without it. I'm not sure if this is an issue with vue-i18n though!

[joesonw]

I am using vue-i18n with client hydration components, but it gives me the error SyntaxError: Need to install with `app.use` function, I added logs to app.ts, confirmed app.use(i18n) did run.

Do you know how to get aruond this?

Thanks!

[ElMassimo]

Hi @joesonw!

Are you using translations inside islands?

Since islands won't have the entire app context (or translations), if you need translated content inside islands, you should pass it explicitly using props.

It's still possible to install vue-i18n inside Vue islands, but the syntax is a bit awkward:

<script setup lang="ts>
import { getCurrentInstance } from 'vue'
import i18n from '~/services/i18n' // example

const app = getCurrentInstance().appContext.app
app.use(i18n)
</script>