Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fvena/vite-plugin-i18n-resources
Vite plugin to load i18n translation message files
https://github.com/fvena/vite-plugin-i18n-resources
Last synced: 7 days ago
JSON representation
Vite plugin to load i18n translation message files
- Host: GitHub
- URL: https://github.com/fvena/vite-plugin-i18n-resources
- Owner: fvena
- License: mit
- Created: 2021-01-05T16:42:46.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-08-02T05:08:11.000Z (over 3 years ago)
- Last Synced: 2024-10-27T15:10:55.191Z (12 days ago)
- Language: JavaScript
- Size: 256 KB
- Stars: 31
- Watchers: 1
- Forks: 4
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-vite - v3 - Load i18n translation message files. (Plugins / Vue)
- awesome-vite - v3 - Load i18n translation message files. (Plugins / Vue)
README
vite-plugin-i18n-resources
Vite plugin to load i18n translation message files
In small applications, have single json file per language may be sufficient, but if your app grows, you should split it in multiple files per language, to improve your structure.
You may even want to move these files to different locations.
All translation files in the same folder - [example](examples/locales_folder/)
src
├── ...
├── locales
│ ├── about.en.json
│ ├── about.es.json
│ ├── about.fr.json
│ ├── home.en.json
│ ├── home.es.json
│ ├── home.fr.json
│ └── ...
└── ...
Translation Files split by scopes - [example](examples/scopes/)
src
├── ...
├── pages
│ ├── about
│ │ ├── ...
│ │ ├── locales
│ │ │ ├── about.en.json
│ │ │ ├── about.es.json
│ │ │ └── about.fr.json
│ │ └── ...
│ ├── home
│ │ ├── ...
│ │ ├── locales
│ │ │ ├── home.en.json
│ │ │ ├── home.es.json
│ │ │ └── home.fr.json
│ │ └── ...
│ └── ...
└── ...
This plugin finds all language files within a path and groups them by language so that you can set them on your vue-i18n instance.
## Install
```bash
yarn add --dev vite-plugin-i18n-resources
npm i -D vite-plugin-i18n-resources
```
## Getting Started
**1. Config plugin in `vite.config.js`**
Import this plugin and set the path of translation files.
```js
import i18nResources from "vite-plugin-i18n-resources";
import { resolve } from "path";
export default {
plugins: [
i18nResources({
path: resolve(__dirname, "src/locales"),
}),
],
};
```
**2. Import translation message and set them to your vue-i18n instance**
```js
import { createI18n } from "vue-i18n";
import { messages } from "vite-i18n-resources";
const i18n = createI18n({
legacy: false,
locale: "en",
fallbackLocale: "en",
messages,
});
// Only if you want hot module replacement when translation message file change
if (import.meta.hot) {
import.meta.hot.on("locales-update", (data) => {
Object.keys(data).forEach((lang) => {
i18n.global.setLocaleMessage(lang, data[lang]);
});
});
}
```
## Namespace
To avoid namespace collisions when group all translations files by language, each file is stored within a section with its name:
**home.en.json**
```json
{
"title": "Home Page"
}
```
**about.en.json**
```json
{
"title": "About Page"
}
```
The plugin will generate the following object:
```js
{
en: {
home: {
title: 'Home Page'
},
about: {
title: 'About Page'
}
},
...
}
```
Now, you can use a translation message by:
```html
{{ $t("home.title") }}
...
```
## Filenames
The file names of the translation files should have always the same format:
```
{namespaces}.{locale}.json
home.en.json
about.en.json
cart.de.json
```
## VS Code i18n Ally extension
If you use i18n ALLY, you can configure it as follows:
```json
"i18n-ally.localesPaths": [ "src/locales" ],
"i18n-ally.namespace": true,
"i18n-ally.pathMatcher": "{namespaces}.{locale}.json",
"i18n-ally.keystyle": "nested",
```
## Todo
- [ ] Basic test coverage
I'm sorry for my wording, English is not my mother tongue.