vite-plugin-vue-chrome-i18n
v0.0.7
Published
[![Stand With Ukraine](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner-direct-single.svg)](https://stand-with-ukraine.pp.ua)
Downloads
29
Maintainers
Readme
vite-plugin-vue-chrome-i18n
A plugin for the Vite that extracts and scope translations from Vue Single File Component and combines them into a localization file for browser extensions.
Terms of use[?]
By using this project or its source code, for any purpose and in any shape or form, you grant your implicit agreement to all the following statements:
- You condemn Russia and its military aggression against Ukraine
- You recognize that Russia is an occupant that unlawfully invaded a sovereign state
- You support Ukraine's territorial integrity, including its claims over temporarily occupied territories of Crimea and Donbas
- You reject false narratives perpetuated by Russian state propaganda
Installation
npm i -D vite-plugin-vue-chrome-i18n
Usage
First add plugin to your vite configuration.
Note: This plugin was designed to be used alongside with @vitejs/plugin-vue
.
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueChromeI18n from "vite-plugin-vue-chrome-i18n";
export default defineConfig({
plugins: [
vue(),
VueChromeI18n({
// Optional.
// You can define any global localisation messages with will be defined for all components
initialLocales: {
en: {
APP_NAME: {
message: 'My App'
}
},
uk: {
APP_NAME: {
message: 'Мій застосунок'
}
}
}
}),
],
})
To add localized messages, use the <chrome-i18n>
block with the locale
attribute. One for each locale you need.
Inside of this block, enter the message in JSON format according to the Localization message formats.
Note that:
- All messages inside the component will be isolated from other messages. So, in most cases, you don't have to worry about naming conflicts.
- '$schema' will be automatically excluded from merged messages. So you can safely use it to get hints in your IDE.
To get access to translated message use getMessage
function from vite-plugin-vue-chrome-i18n/getMessage.js
. This function is synonymous with notifications. Under the hood, it automatically searches for messages in an isolated scope of a component or in global scope.
<!-- Any vue single file component -->
<script setup>
import { getMessage } from "vite-plugin-vue-chrome-i18n/getMessage.js";
console.log( getMessage('title') ) // 'Hello!' | 'Привіт!' // messages from local scope
console.log( getMessage('APP_NAME') ) // 'My App' | 'Мій застосунок' // messages from global scope
</script>
<chrome-i18n locale="uk">
{
"$schema": "https://json.schemastore.org/browser.i18n.json",
"title": {
"message": "Привіт!"
}
}
</chrome-i18n>
<chrome-i18n locale="en">
{
"$schema": "https://json.schemastore.org/browser.i18n.json",
"title": {
"message": "Hello!"
}
}
</chrome-i18n>
After build, you should get _locales/en/messages.json
and _locales/uk/messages.json
files with all extracted and scoped messages.