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:

1. All messages inside the component will be isolated from other messages. So, in most cases, you don't have to worry about naming conflicts.
2. '$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.