vue-automatic-i18n

Automatically translate vue 2 project with any translation api.

Usage

// main.ts
import VueI18n from 'vue-i18n'
import VueAutomaticI18n from 'vue-automatic-i18n'
Vue.use(VueI18n)
Vue.use(VueAutomaticI18n)

// vue.config.js
const { VueAutomaticI18nPlugin } = require('vue-automatic-i18n/dist/plugin')
module.exports = {
  configureWebpack: {
    plugins: [
      new VueAutomaticI18nPlugin({
        cbInit: async () => {
          // any initialization goes here
        },
        pathGlobs: ['src/**/*.vue'],
        // Use ISO-639-1 language code as locale names, refer to:
        // https://cloud.google.com/translate/docs/languages
        locales: ['en', 'zh-CN', 'zh-TW', 'ja', 'ko', 'it', 'fr', 'es', 'vi', 'tr', 'de', 'pt', 'ru'],
        // where you want to put all the generated locale files
        dist: 'src/i18n/locales',
        cbTrans: async (params) => {
          // params.content - source content
          // params.source - source locale code
          // params.target - target locale code
          // return the translated content by translation api, like Google Translate
        },
      })
    ]
  }
}

<template>
<div>
  {{ $i18nTrans({ en: 'Get started', 'zh-CN': '立刻开始' }) }}
  {{ $i18nTrans({ en: 'Get improved' }) }}
  {{ $i18nTrans({ 'zh-CN': '随意发挥' }) }}
  {{ $i18nTrans({ en: 'Write anything', 'zh-CN': '随意书写' }, { source: 'zh-CN' }) }}
<div>
</template>

Remeber to load the generated locale files in vue-i18n, refer to the doc at: https://kazupon.github.io/vue-i18n/guide/lazy-loading.html