:globe_with_meridians: Internationalization plugin for Vue.js

Overview

Vue I18n logo

vue-i18n

Build Status Coverage Status NPM version vue-i18n channel on Discord vue-i18n Dev Token

Internationalization plugin for Vue.js


🥇 Gold Sponsors

🥈 Silver Sponsors

🥉 Bronze Sponsors


⚠️ NOTICE

This repository is for Vue I18n v8.x.

If you want to know about Vue I18n v9, See the this repository)

This repository will be transferred to intlify organization. After that, it will be developed and maintained on intlify.

📖 Documentation

About Vue I18n v8.x, See here

If you want to read Vue I18n v9 docs, See here

📜 Changelog

Detailed changes for each release are documented in the CHANGELOG.md.

Issues

Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.

💪 Contribution

Please make sure to read the Contributing Guide before making a pull request.

©️ License

MIT

Issues
  • Cannot read property 'locale' of undefined

    Cannot read property 'locale' of undefined

    Hi.I use the vue-router with vue-i18n together,when i changed the path,chrome remind a issue image

    my i18n.js

    import Vue from 'vue'
    import VueI18n from 'vue-i18n'
    import cn from './zh-CN.json'
    import jh from './zh-JH.json'
    import store from '../store'
    
    Vue.use(VueI18n)
    
    export default new VueI18n({
      locale: 'zh-JH',
      messages: {
        'zh-CN': cn,
        'zh-JH': jh
      }
    })
    

    vue & vue-i18n version

    ```"vue": "^2.1.0",
    "vue-i18n": "^6.0.0-alpha.2",
    "vue-router": "^2.0.1",```
    
    opened by WangShayne 57
  • Access to vue-i18n assets is not available within a Vue component method when called via a Promise

    Access to vue-i18n assets is not available within a Vue component method when called via a Promise

    vue & vue-i18n version

    vue v2.3.4 vue-i18n v7.0.3 Using with Laravel 5.4, and bundling assets with Webpack via Laravel Mix.

    Reproduction Link

    (Pending, will update post upon completion.)

    Steps to reproduce

    • Prepare a Vue component, with Vue-i18n included as an asset on the top-level Vue instance
    • Prepare a Vue component, which includes a Vue method that accesses this.$t or this.$tc within the method. The method should not be defined using ES6 arrow notation so that the 'this' context is the Vue instance.
    • Call the method as the response or error method from a JS Promise

    What is Expected?

    Access to this.$t is provided via the 'this' binding solution provided by Vue

    What is actually happening?

    vue-i18n is not available (VueComponent property '_i18n' is null). Other Vue instance properties are available in this context, such as this.$store when using vuex, as well as all component data, props and computed properties via 'this'. An attempt to access this.$t generates an error: TypeError: Cannot read property '_t' of null Error is generated here, though the source cause is external of this: https://github.com/kazupon/vue-i18n/blob/9ef7b798e3c1d58dfae4f25e5e6b8c488b86d819/dist/vue-i18n.js#L111

    Status: Need More Info 
    opened by GregPeden 39
  • International pluralization

    International pluralization

    In English, pluralization looks simple: one and many. But it's not too simple for Russian language. And there is some other languages.

    i18n means Internationalization.

    I suggest to use something better for pluralization into $tc()/Vue.tc().

    For example, smart-plurals.


    Now I using it with Vue like this:

    // pluralize.js
    import Vue from 'vue'
    import smartPlurals from 'smart-plurals'
    export default function pluralize(string, amount, lang) {
        string = Vue.t(string, lang).split(' | ')
        return smartPlurals.Plurals.getRule(lang)(amount, string)
    }
    

    So I can now write different amount of plural forms for different languages in one format: singular | plural for English or singular | few | plural for Russian for example.

    And then just pluralize('key', value, Vue.config.lang) as a function in JS

    And {{ $t('key') | pluralize(computedProperty()) }} as a filter in templates:

    <!-- module.vue -->
    <script>
        import filters from './filters'
        export default {
            filters: filters,
            …
        }
    </script>
    
    // filters.js
    import Vue from 'vue'
    import pluralize from './modules/pluralize'
    export default {
        pluralize: function(string, amount) {
            return pluralize(string, amount, Vue.config.lang)
        }
    }
    

    Other sources you can see in this repo.

    opened by Grawl 33
  • How can i use vue-i18n in '.js' file,  I have use it in Vue template and it works.

    How can i use vue-i18n in '.js' file, I have use it in Vue template and it works.

    I have use vue-i18n in template, and it works. but now I also need it can work in js , I have read a issue about <Use $t function outside template enhancement>, i don't know how to config that.

    thanks.

    opened by pzuopin 31
  • How to stub vue-i18n within vue-test-utils

    How to stub vue-i18n within vue-test-utils

    I'm trying to write a test for page that uses vue-i18n plugin. @eddyerburgh has show how to test with mocked plugin. https://github.com/kazupon/vue-i18n/issues/198#issuecomment-316692326 This works fine.

    However in some tests I do not care about translations. Instead mocking translations, I'd like to stub them. What ever I do i get [Vue warn]: Error in render: "TypeError: _vm.$t is not a function".

    opened by Mrkisha 29
  • Vue.locale is not a function - Issue after upgrading to 3.0

    Vue.locale is not a function - Issue after upgrading to 3.0

    I'm getting Unknown TypeError: Vue.locale is not a function

    var VueI18n = require('vue-i18n')
    
    Vue.use(VueI18n)
    Vue.config.lang = 'sv'
    var locales = require('./lang/locales')
    
    Object.keys(locales).forEach(function (lang) {
      Vue.locale(lang, locales[lang])
    })
    

    And in my locales file I have like I had in 2.*:

    module.exports = {
      en: {
        message: 'Hi',
      },
      sv: {
        message: 'Hej',
      }
    }
    
    
    opened by flaird 28
  • Vue.js Avoriaz unit test produces translation warnings when vue-i18n is used

    Vue.js Avoriaz unit test produces translation warnings when vue-i18n is used

    vue & vue-i18n version

    vue: 2.2.2 vue-i18n: 7.0.5

    Reproduction Link

    https://github.com/ndabAP/Vue.js-with-Sails.js-backend-example-project/blob/master/frontend/test/unit/specs/Login.spec.js

    Question at stackoverflow: https://stackoverflow.com/questions/45184859/vue-js-avoriaz-unit-test-produces-translation-warnings-when-vue-i18n-is-used

    Steps to reproduce

    Unit test a working translated Vue.js component with Mocha, PhantomJS and Karma.

    What is Expected?

    Don't get any warnings.

    What is actually happening?

    Multiple warnings that keys are not translated.

    WARN LOG: '[vue-i18n] Cannot translate the value of keypath 'description.first'. Use the value of keypath as default.'

    opened by ndabAP 24
  • Using Vue.t() inside a state of Vuex

    Using Vue.t() inside a state of Vuex

    Hey guys! I'am trying the following code:

    import Vue from 'vue'
    
    export default {
        task: {
            status: [
                { id: 'pending', name: Vue.t('pending') },
                { id: 'done', name: 'Done' }
            ]
        }
    }
    

    That is my state.js which is the state of my VUEX! When I try to use the Vue.t function I have the following error:

    Uncaught TypeError: _vue2.default.t is not a function

    My solution (which I don't think it's the best one also good for performance)

    Let my state.js like that:

    import Vue from 'vue'
    
    export default {
        task: {
            status: [
                { id: 'pending', name: 'pending' },
                { id: 'done', name: 'done' }
            ]
        }
    }
    

    And I've done the following getters (vuex getter)

    import { map } from 'lodash'
    import { trans } from 'utils/helpers/translation' // helper for Vue.t(string)
    
    export const getTaskStatus = ({ task }) => map(task.status, (obj) => {
        return { id: obj.id, name: trans(obj.name) }
    })
    

    Anyone knows how is the best way to make it work?

    opened by bissolli 19
  • vue 2 / Cannot translate the value of keypath

    vue 2 / Cannot translate the value of keypath

    vue & vue-i18n version

    vue 2.0.0.rc3 vue-i18n 4.3.1 vue-loader 9.4.0 vue-router 2.0.0-rc.3

    I updated a project to vue 2, and now most of the translated strings don't display when the component loads for the first time. It makes an error

    [vue-i18n] Cannot translate the value of keypath " ". Use the value of keypath as default.

    When the component is re-used, the translated string appears.

    opened by francoisromain 19
  • build(deps): [security] bump ws from 6.2.1 to 6.2.2 in /examples/sfc

    build(deps): [security] bump ws from 6.2.1 to 6.2.2 in /examples/sfc

    Bumps ws from 6.2.1 to 6.2.2. This update includes security fixes.

    Vulnerabilities fixed

    Sourced from The GitHub Security Advisory Database.

    ReDoS in Sec-Websocket-Protocol header

    Impact

    A specially crafted value of the Sec-Websocket-Protocol header can be used to significantly slow down a ws server.

    Proof of concept

    for (const length of [1000, 2000, 4000, 8000, 16000, 32000]) {
      const value = 'b' + ' '.repeat(length) + 'x';
      const start = process.hrtime.bigint();
    

    value.trim().split(/ *, */);

    const end = process.hrtime.bigint();

    console.log('length = %d, time = %f ns', length, end - start); }

    Patches

    ... (truncated)

    Affected versions: >= 6.0.0 < 6.2.2

    Sourced from The GitHub Security Advisory Database.

    ReDoS in Sec-Websocket-Protocol header

    Impact

    A specially crafted value of the Sec-Websocket-Protocol header can be used to significantly slow down a ws server.

    Proof of concept

    for (const length of [1000, 2000, 4000, 8000, 16000, 32000]) {
      const value = 'b' + ' '.repeat(length) + 'x';
      const start = process.hrtime.bigint();
    

    value.trim().split(/ *, */);

    const end = process.hrtime.bigint();

    console.log('length = %d, time = %f ns', length, end - start); }

    Patches

    ... (truncated)

    Affected versions: >= 5.0.0 < 6.2.2

    Sourced from The GitHub Security Advisory Database.

    ReDoS in Sec-Websocket-Protocol header

    Impact

    A specially crafted value of the Sec-Websocket-Protocol header can be used to significantly slow down a ws server.

    Proof of concept

    for (const length of [1000, 2000, 4000, 8000, 16000, 32000]) {
      const value = 'b' + ' '.repeat(length) + 'x';
      const start = process.hrtime.bigint();
    

    value.trim().split(/ *, */);

    const end = process.hrtime.bigint();

    console.log('length = %d, time = %f ns', length, end - start); }

    Patches

    ... (truncated)

    Affected versions: < 6.2.2

    Release notes

    Sourced from ws's releases.

    6.2.2

    Bug fixes

    • Backported 00c425ec to the 6.x release line (78c676d2).
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Pull request limits (per update run and/or open at any time)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)
    PR: unreviewed Type: Dependency Type: Security 
    opened by dependabot-preview[bot] 0
  • feat: Added formatter, values, path to MessageContext

    feat: Added formatter, values, path to MessageContext

    If you use message function functionality, vue-i18n skips running the formatter on the results. I don't want this, I want to do some custom work in the message function, but then defer all of the formatting back to vue-i18n.

    To make this possible I've added the formatter, all values and path into the MessageContext. I've added a test case for this as well.

    PR: unreviewed 
    opened by fabis94 0
  • Since 8.24.3: nuxt validate() method getting wrong route injected on language switch

    Since 8.24.3: nuxt validate() method getting wrong route injected on language switch

    Reporting a bug? I am using nuxt to build a static generated site. For internationalization I am using nuxt-i18n which has vue-i18n as dependency.

    A few days ago, I updated some packages and suddenly when switching languages using nuxt-i18n switchLocalePath() function some routes where giving errors. These were due to the nuxt hook validate() of the loaded page component somehow getting the nuxt context with the old route injected, not the new one as before.

    E.g. coming from myhost.com/ueber-uns and switching locale to myhost.com/en/about-us, the page component checks using the validate() function if the page route is valid, and if not instantly loads an error page:

    pages/_mainPage/index.vue (Page component):

    async validate({ route, app, params, store, isStatic }) {
       console.log("pages/_mainPage/index.vue, validate()")
    
       console.log("i18n Locale: " + app.i18n.locale) // will output the current i18n locale, which is correct
       console.log("Validated route: ")
       console.log(route) // will output the old route (ueber-uns) not the new route (en/about-us)
    
       // The following will check if the routes params can be found in vuex page store for the current language
       // which will always fail because the is no `ueber-uns` slug in the store for locale `en`
       const page = store.getters["wpapi/pages/getBySlug"](
         params.mainPage,
         app.i18n.locale
       ) 
    
       return page != null
     },
    

    I narrowed the cause down and it seems that since [email protected] this issue appears. The versions before work fine. Therefore I thought I post it here as a bug report although it is closely related to nuxt and nuxt-i18n (-> validate() function).

    If you think this issue has to be solved by nuxt-i18n or nuxt, I apologize for wrongly raising the issue here.

    Module versions (please complete the following information):

    • vue: 2.6.12
    • nuxt: 2.15.2
    • vue-i18n: 8.24.3
    • nuxt-i18n: 6.20.4

    Reproduction Link

    https://codesandbox.io/s/vue-i18nvalidate-0mp02?file=/yarn.lock:331244-331252

    If you use it with vue-i18n v8.24.2 and load the page and click on "Switch to en" you will get the route {name: "index___en",... output from validate via console.log .

    Try changing the vue-i18n version to v8.24.3 wait for build and reload the page, then click on "Switch to en" you will get the route {name:"index___de",... output from validate via console.log .

    Expected behavior

    When switching locales the validate() method should get the route navigated to (not from) injected via the nuxt context.

    Status: Need More Info Status: Review Needed 
    opened by lagset 2
  • Unicode-Support?

    Unicode-Support?

    Hello, I am having .json locales in unicode, like this example. Is there a possibility to handle unicode?

    Thanks in advance, Nik

    opened by Braklord 0
  • SSR Memory Leak

    SSR Memory Leak

    Module versions (please complete the following information):

    • vue:v2.4.1
    • vue-i18n:v8.24.2

    Question

    My Project is using Vue SSR, when tests stress by the ab tool, the memory increases all the time. But when I remove the vue-i18n and tests again, the memory does not increase. So I guess the vue-i18n exists ssr memory leak, what I want to ask that is there anyone has the same question and how to solve? Thanks.

    Status: Need More Info 
    opened by PanZeYong 1
  • Customize functional component name

    Customize functional component name

    Reporting a bug?

    • Impossible to customize the name of functional component <i18n path='...'>

    Module versions (please complete the following information):

    • vue: 2.6.12
    • vue-i18n: 8.22.4

    To Reproduce

    1. Just follow the guide installation https://kazupon.github.io/vue-i18n/installation.html
    import Vue from 'vue'
    import VueI18n from 'vue-i18n'
    
    Vue.use(VueI18n)
    

    Expected behavior I would like use my custom name for i18n functional component (and follow Vue style guide that say we should use pascal case for component naming in SFC https://vuejs.org/v2/style-guide/#Component-name-casing-in-templates-strongly-recommended)

    <template>
     <div> <MyI18n path='hello' /> </div>
    </template>
    

    Expected solutions Solution 1: Redefine component via Vue.Component("MyI18n", FunctionalVueI18nComponentExported)

    Solution 2: use installation option Vue.use(VueI18n, {functionalComponentName: 'MyI18n'}) See: https://forum.vuejs.org/t/how-to-rename-a-plugin-name/26200/3 for more details on that solution

    Workaround Of course, i could create my own MyI18n component and wrapped default but its a non desired abstraction.

    Status: Proposal 
    opened by rdhainaut 0
  • Missing key: variable substitution (using slots) breks

    Missing key: variable substitution (using slots) breks

    Module versions (please complete the following information):

    • vue: 2.6.12
    • vue-i18n: 8.24.4

    Reproduction Link https://codesandbox.io/embed/optimistic-fast-rzgrd?&theme=dark If you add a translation (line 11 in main.js), it works as expected.

    To Reproduce

    • Use a translation key that already has a variable in it (e.g.: Hello, {world}!) with a slot:
      <i18n path="Hello, {world}!" tag="p">
        <template v-slot:world>
          <b>World</b>
        </template>
      </i18n>
    
    • Do not add a translation for it
    • Ensure that you have a "missing" function in the i18n config that returns the key as a value
    const i18n = new VueI18n({
      //....
      missing: (locale, key) => key,
    });
    

    Expected behavior The variable {world} is replaced with <b>World</b> in the HTML rendered output, as if messages (in the vue-i18n config) was set to:

    const i18n = new VueI18n({
      //...
      locale: "en",
      messages: { en: { "Hello, {world}!": "Hello, {world}!" } }
    });
    

    Actual behavior The variable is not replaced. The output shows the raw key: Hello, {world}! If I add a translation for the missing key (as shown above), it works.

    Status: Need More Info 
    opened by MartinRamm 2
  • Lazy loading a locale (setLocaleMessage) runs into

    Lazy loading a locale (setLocaleMessage) runs into "SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data" with InertiaJs

    Module versions (please complete the following information):

    • @inertiajs/inertia: 0.8.7
    • @inertiajs/inertia-vue: 0.5.11
    • laravel-mix: 6.0.13
    • vue: 2.6.12
    • vue-i18n: 8.24.3

    To Reproduce Steps to reproduce the behavior: ex:

    1. New Laravel Project with Inertia
    2. Use the Lazy-Loading code from the documentation
    3. Call "loadLanguageAsync" anywhere

    Expected behavior The function should load the language and set the vue-i18n messages

    Description After upgrading vue-i18n from 8.24.2 to 8.24.3 the loadLanguageAsync function / code from the documentation runs into an error: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data The stacktrace refers to the call of i18n.setLocaleMessage(lang, messages.default) inside the "loadLanguageAsync"-function and "crashes" (after some internal calls) at the render function off my main vue app. In this line: initialPage: JSON.parse(app.dataset.page), of the following code (initialization of vue app):

    // Create Main Vue Instance
    const el = document.getElementById("app");
    new Vue({
      i18n,
      store,
      vuetify,
      render: (h) =>
        h(InertiaApp, {
          props: {
            initialPage: JSON.parse(app.dataset.page),
            resolveComponent: (name) =>
              import(`./Pages/${name}`).then(({ default: page }) => {
                page.layout = page.layout === undefined ? MainLayout : page.layout;
                return page;
              }),
          },
        }),
    }).$mount(el);
    

    Full stack trace

    SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
        render app.js:71
        VueJS 9
            _render
            updateComponent
            get
            run
            flushSchedulerQueue
            nextTick
            flushCallbacks
            promise callback*timerFunc
            nextTick
        watchI18nData vue-i18n.esm.js:1354
        watchI18nData vue-i18n.esm.js:1353
        VueJS 10
            run
            flushSchedulerQueue
            nextTick
            flushCallbacks
            promise callback*timerFunc
            nextTick
            queueWatcher
            update
            notify
            set
        setLocaleMessage vue-i18n.esm.js:1882
        importLocale i18n.js:26
        promise callback*importLocale i18n.js:24
        loadLanguageAsync i18n.js:85
        selection LocaleSwitcher.vue:108
        VueJS 11
        set index.js:29
        updateSingle VItemGroup.js:200
        updateInternalValue VItemGroup.js:167
        onClick VItemGroup.js:103
        register VItemGroup.js:108
        VueJS 2
        toggle index.js:45
        click VListItem.js:98
        VueJS 2
    

    This only happens with the latest release 8.24.3. Workes fine with 8.24.2.

    Any ideas what could lead to this issue or how to solve it? I'm happy to provide any additional informations if need. The source of my project is unfortunatly closed, but its really just the lazyLoad code from the documentation in a new laravel project with jetstream (inertia) scaffolding.

    package.json package.zip

    Status: Need More Info 
    opened by lephro 2
  • `|` is a faulty way of separating choices for pluralized messages

    `|` is a faulty way of separating choices for pluralized messages

    Module versions (please complete the following information):

    • vue: 2.6.12
    • vue-i18n: 8.23.0
    • nuxt-i18n: 6.21.1 (if relevant)

    To Reproduce Have the following translations for a locale:

    {
      "randomKey": "value1 | value2 | value3"
    }
    

    Then call $tc('randomKey', 1) somewhere.

    It may look like there are 4 pluralization choices, but in reality there are 2 choices. First one: "value1 | value2" (the translated string itself contains the | char) Second one: "value3"

    Expected behavior When you call $tc('randomKey', 1) it will return value2 even though it should return value1 | value2.

    This is because this primitive way of separating choices breaks down the very moment you have the pipe symbol (|) somewhere in the translated string.

    Additional context Not sure how no one has run into this issue before, but there definitely needs to be a way to customize the format of translated messages so that you can actually use pipe symbols in your translated strings.

    Something like this makes the most sense for my use case:

    {
      "randomKey": ["value1 | value2", "value3"]
    }
    

    Each array element corresponds to a single choice. But this won't work well with formatFallbackMessages: true.

    At least allow swapping the pipe operator to some other string that is less likely to appear in translation strings.

    Status: Proposal Type: Improvement 
    opened by fabis94 0
  • `missing` option still generates warnings

    `missing` option still generates warnings

    Module versions (please complete the following information):

    • vue: 2.6.12
    • vue-i18n: 8.23.0
    • nuxt-i18n: 6.21.1 (if relevant)

    To Reproduce Use missing Vuei18n contructor option to set a function that ignores all errors, something like this:

    function missing() {
     return "whatever";
    }
    

    Then use one of the translation methods in a Vue template for a key that doesn't exist in any of the translation files:

    <span>$t("This isn't defined in any translation file!")</span>
    

    You'll still get the following warning in development mode:

    Value of key 'This isn't defined in any translation file!' is not a string or function!
    

    Expected behavior From the docs it looks like the above implementation of missing (https://kazupon.github.io/vue-i18n/api/#constructor-options) should suppress all warnings, but it doesn't.

    Additional context From the source code of this package it looks like missing is only used for the first warning that appears - "Cannot translate the value of keypath X. Use the value of keypath as default." The other warning, however, uses no such check and thus the warning is emitted regardless.

    Here you can see missing is used to skip the warning: image

    Here, however, there is no check and warnings are shown always: image

    I want to completely suppress all warnings for the default locale, because I'll use the key as the message and thus won't need to have any translation file for the default locale. In the case of the default locale $t('Some message') will just output Some message

    I know that the API supports supressing all warnings or suppressing all warnings if the fallback locale actually has defined translations, but none of these options work for me because my default/fallback locale won't have any translations (the translation file will essentially just contain {}) and I still want warnings for when other locales have missing keys.

    Status: Proposal Type: Improvement 
    opened by fabis94 0
Releases(v8.24.4)
Owner
kazuya kawaguchi
software engineer, @vuejs core team member, creator of @intlify & i18n enthusiast, @vuejs-jp organizer, and wasm love
kazuya kawaguchi
:globe_with_meridians: Internationalization plugin for Vue.js

vue-i18n Internationalization plugin for Vue.js ?? Gold Sponsors ?? Silver Sponsors ?? Bronze Sponsors ⚠️ NOTICE This repository is for Vue I18n v8.x.

kazuya kawaguchi 6.2k Jun 12, 2021
Localization plugin for vue.js 2.0 using vuex as store

vuex-i18n We are big fans of the awesome vue, vuex and vue-router libraries and were just looking for an easy to use internationalization plugin, empl

Departement of Clinical Research, University Hospital Basel 660 May 25, 2021
Manage vue-i18n localization with static analysis

Analyse all the vue-i18n language files and placeholders of your project. ?? Table of Contents Installation Introduction How to use it? Contribution C

Raffaele Pizzari 136 Jun 10, 2021
Internationalization for vue using the i18next i18n ecosystem.

vue-i18next Internationalization for vue using the i18next i18n ecosystem. https://panter.github.io/vue-i18next/ Introduction 18next goes beyond just

Panter AG 173 Mar 30, 2021
Add i18n to your awesome Vue 3 app 🔉

V-Intl ?? Intl in your dopeass Vue 3 apps ??‍?? Demo Usage In the docs ?? Background The package exposes 5 Intl components, viz., Formatter What it do

Vinayak Kulkarni 11 May 13, 2021
Translate your Vue.js applications with gettext.

vue-gettext Translate Vue.js applications with gettext. Live demo. Contribution Please make sure to read the Pull request guidelines before making a p

Polyconseil 261 May 28, 2021
VueJS plugin for translations

VueTranslate A VueJS (1.x, 2.0+) plugin for basic translations. What is this? Is a plugin to handle basic translations for your components, it adds a

Javis V. Pérez 82 Feb 1, 2021
Simple localization plugin for the amazing Vue.js.

V-Localize About V-Localize is a very simple localization plugin for Vue.js. Your localizations will be available anywhere in your web application wra

John W. Nolette 32 Jul 30, 2020
basic translation plugin for VueJS 2+

basic translation plugin for VueJS 2+ Vue-Polyglot notes Vue-Polyglot doesn't get translation asynchronously in version 2+ This is not a plugin to int

Guillaume Vincent 44 May 27, 2021
Advanced localization support for VueJS

VueJS TS Locale VueJS Plugin for advanced localization of web applications using typescript Links GitHub NPM Installation Should be installed locally

TWC Apps 36 Mar 9, 2021
Plugin for multilanguage VueJS 2.0

vue-multilanguage: control of languages in vuejs We will help you to control the languages in your app for yours components Installation # yarn yarn a

Leonardo Vilarinho 177 Apr 18, 2021
🎏 Helper directives for vue & vue-i18n

vue-i18n-directives ?? Helper directives for Vue.js & vue-i18n. Support Vue.js 2 ➡️ [email protected]>=2.0.0 [master] Vue.js 1 ➡️ vue-i18n-directiv

Nacho Anaya 14 Jan 23, 2019
Visualizer of CWL (Common Workflow Language) workflows for Vue

Vue CWL Vue CWL provides a Vue component for the visualization of CWL (Common Workflow Language) workflows. Motivation Vue CWL uses the fantastic cwl-

Michael Milton 26 May 6, 2021
vue-i18n single file component exporter/importer

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 Comp

Hatice Edis 131 May 31, 2021