Need help with vue-i18n-service?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

edisdev
131 Stars 13 Forks 23 Commits 6 Opened issues

Description

vue-i18n single file component exporter/importer

Services available

!
?

Need anything else?

Contributors list

# 24,198
Rails
GraphQL
Crystal
wechat
11 commits
# 256,400
JavaScr...
HTML
vuejs
Vue.js
6 commits
# 7,218
sentry
Nuxt.js
nuxtjs
CSS
2 commits

vue-i18n-service

The translation team (not developers) wants a file with all the keys to translate. But I love to use translations in Single File Components.

And I found a solution to make everyone happy:

vue-i18n-service export|import

Vue I18n Service makes to manage SFC translations easier in a file. It collects all the

 definitions in Single File Components and collects them into a file.

What's the flow:

Hello.vue
```vue

{ "en": { "hello": "Hi 🙁" }, "tr": { "hello": "Selam" } } ```

⬇️

npx vue-i18n-service export > translations.json
json
{
  "src/components/Hello.vue": {
    "en": {
      "hello": "Hi 🙁"
    },
    "tr": {
      "hello": "Selam"
    }
  }
}

✏️

translations.edited.json
{
  "src/components/Hello.vue": {
    "en": {
      "hello": "Hello 🙂"
    },
    "tr": {
      "hello": "Merhaba"
    }
  }
}

Editing
translations.json
using Web UI

Open https://edisdev.github.io/vue-i18n-translator/ and drop

translations.json
file which you've just generated. It will parse it and generate an useful interface to translate.

vue-i18n-translator

⬇️

npx vue-i18n-service import < translations.edited.json
updating file src/components/Hello.vue
```vue

{ "en": { "hello": "Hello 🙂" }, "tr": { "hello": "Merhaba" } } ```

And all is OK. Doesn't matter how many files you have, it simply distributes without any problem and any conflict.

Exporting i18n's in SFCs

This will generate a

translations.json
file (or whatever you named).
npx vue-i18n-service export > translations.json

It has a simple format:

{
  "": {
    "": {
      "": ""
    }
  }
}

Here is an example:

{
  "src/components/Hello.vue": {
    "en": {
      "hello": "Hello"
    },
    "tr": {
      "hello": "Merhaba"
    }
  },
  "src/views/World.vue": {
    "en": {
      "world": "World"
    },
    "tr": {
      "world": "Dünya"
    }
  }
}

--dir

By default,

vue-i18n-service
looks for SFCs in the
src/
directory, if your components are in another directory, specify it by passing the
--dir
flag:
npx vue-i18n-service export --dir=client/ > translations.json

Importing
translations.json
file to the SFCs

After bulk changing files, you can distribute import all the files calling

import
command.
npx vue-i18n-service import < translations.json

This will update

.vue
files and replace them with changes.

Creating new locale from other locale

You can creating a new locale by copying another locale

create
command
  npx vue-i18n-service create 'newlocale' 'extendedLocale'

Contributors

Fatih Kadir Akın
Fatih Kadir Akın
Hatice Edis
Hatice Edis
Paul Gascou-Vaillancourt
Paul Gascou-Vaillancourt

License

MIT.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.