How to configure i18n and vue3 so that at the end of the project the translation files are not 10000 lines long and incomprehensible.
The solution? i18n namespaced files and the i18n ally extension!
1. Create a brand new project
pnpm create vue@latest
✔ Project name: … vue3-i18n
✔ Add TypeScript? … Yes
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … No
✔ Add Pinia for state management? … No
✔ Add Vitest for Unit Testing? … No
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No
✔ Add Prettier for code formatting? … No
pnpm install && pnpm run dev
You should now bet able to see a basic Vue3 project on localhost:5173
2. i18n
Install i18n for Vue3
pnpm install vue-i18n@9
Create some translation files
Here is my architecture. Follow it for this tutorial, you can change it later with some job.
locales/en/auth.json
{
"SignIn": "Sign In",
"SignUp": "Sign Up"
}
locales/en/commons.json
{
"height": "Height",
"weight": "Weight"
}
For the FR part, I let you translate by yourself!
Init i18n configuration file
Inside locales folder create an index.ts file.
import { createI18n, type I18n, type Locale } from "vue-i18n";
import authEN from "./en/auth.json";
import authFR from "./fr/auth.json";
import commonsEN from "./en/commons.json";
import commonsFR from "./fr/commons.json";
let i18n: I18n;
const init = () => {
i18n = createI18n({
locale: "en",
messages: {
en: {
auth: authEN,
commons: commonsEN,
},
fr: {
auth: authFR,
commons: commonsFR,
},
},
});
};
const setLocale = (locale: Locale): void => {
i18n.global.locale = locale;
};
init();
export { i18n, setLocale };
Add i18n to the Vue3 app
inside the main.ts import i18n as
import { i18n } from "./locales";
And the use this i18n
createApp(App).use(i18n).mount("#app");
3. Test our integration
Replace the content of App.vue with
<script setup lang="ts">
import {setLocale} from "./locales"
const changeLocale = () => {
setLocale('fr')
}
</script>
<template>
<main>
{{$t('auth.SignIn')}}
{{$t('commons.height')}}
<button @click=changeLocale>Change Locale</button>
</main>
</template>
You should see:
And if you click on the button... TADA! Strings are no FR ones.
4. Bonus: i18n ally
Dealing with a large set of locales and translation can be such a pain in the a$$.
This is where the i18n ally extension come to the rescue.
i18n ally installation
You can add it to VSCode from the embeded marketplace or from this link
i18n ally configuration
Open User Settings Preferences (JSON) from the quick access shortcut.
shift + cmd + p
And the add in the end of the JSON file these lines
"i18n-ally.dirStructure": "auto",
"i18n-ally.enabledFrameworks": ["vue"],
"i18n-ally.enabledParsers": ["json", "yaml"],
"i18n-ally.extract.autoDetect": true,
"i18n-ally.namespace": true,
"i18n-ally.pathMatcher": "{locale}/{namespaces}.json",
i18n ally usage
When i18n ally is installed and configured in VSCode, you can open it from the sidebar button.
I let you play with this useful extension, but with it you can auto translate your string, create keys and see you translation coverage.
Links
Questions?
If you have some questions or issues, please share it with me in a comment, I will take a look at it quickly :)
Ciao
Top comments (1)
Oh cool extension!