Just a heads-up.

export default {
    methods: {
      checkLocaleExists() {
        let {$i18n, $route, $store} = this;
        let locale = $i18n.locale();
        if (!$i18n.exists(locale)) {
          $store.dispatch(actions.dic.FETCH_LOCALE, locale)
            .then((translations) => {
              $i18n.add(locale, translations);
              $i18n.set(locale);
            });
        } else {
          $i18n.set(locale);
        }
      }
    },
    mounted() {
      this.checkLocaleExists();
    }

If I load translations by AJAX I can not force component to re-render with new translations.
E.g. when component mounted I have already set locale as 'en', then I check that I do not have translations => download translations => add translations => no re-render.

e.g. part of component that use translations:

<template>
    <nav>
        <router-link to="/some">{{ $t('HEADER.MAIN') }}</router-link>
    </nav>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    computed: {
      ...mapState({
        locale: state => state.i18n.locale
      })
    }
  }
</script>

Maybe I have to add some more computed properties? Or how to force re-render my component?

Currently, the flattenTranslations function also flattens lists. For example:

"some.key" : ["some", "list", "of", "values"]

is flattened to

"some.key.0" : "some",
"some.key.1" : "list",
"some.key.2" : "of",
"some.key.3" : "values"

When translating longer paragraphs (Terms&Conditions for example) it is nice to just have a list of them without having to know how many entries that list has. I also don't see any other reason why a list should be flattened.

I vote for keeping lists in. I can also create a PR for this.

Using v1.8.0 and doing testing in the test folder: if I enter at “Number of blocks” 0 then the message comes out “We have 0 blocks” instead of “We have no blocks”. This is weird. Somehow function plurals.getTranslationIndex returns 1 which extracts from the message array “We have 0 blocks”.

Am I wrong or could this be fixed? Thank you

I am trying to use translations object inside the methods. I lost more than 1 hour with this and finally came with this solution, but it is really intuitive to me. Is there any shorter way, because I can't find it in documentation.

export default {
    data () {
        return {
            trans: this.$store.state.i18n.translations[this.$store.state.i18n.locale],
            ...
        }
    },
    methods: {
        ...
        setTitle (index, item) {
            console.log('--- TITLE ---');
            console.log(this.trans['services.' + index + '.items.' + item + '.title']);
            return this.trans['services.' + index + '.items.' + item + '.title'];
        }
        ...
    }
}

Is it possible to somehow import the $t() method so that it can be used outside of component, i.e. in a custom service? By service I mean a set of methods in a separate file, not tied to any Vue component.

Thanks!

Hi,

by default all HTML in a translation key is rendered as string and no possibility is given to render also translated HTML within a translation key. Right? How is it possible to capacitate the package and having something like the component interpolation of <i18n> in vue-i18n? So the code would look like:

<i18n path="term" tag="label" for="tos">
  <a :href="url" target="_blank">{{ $t('tos') }}</a>
</i18n>

… that renders to something like this:

<label for="tos">
  I accept xxx <a href="/term" target="_blank">Term of Service</a>.
</label>

Or more advanced to put HTML to named target-“places” in the parent translation context:

en: {
  info: 'You can {action} until {limit} minutes from departure.',
  change: 'change your flight'
}

… coded as:

<i18n path="info" tag="p">
  <span place="limit">{{ changeLimit }}</span>
  <a place="action" :href="changeUrl">{{ $t('change') }}</a>
</i18n>

… renders to:

<p>
  You can <a href="/change">change your flight</a> until <span>15</span> minutes from departure.
</p>

What can I code to get this functionality? Or how can one implement this?

Or is there another work around to come to this?

If I have the following locales added and my current locale is en-US.

{
    "en": {login: "Login"},
    "en-US": {},
    "en-CA": {}
}

$i18n.keyExists('login') will return false but $t('login') will still render as expected.

I was looking to do something like this

<p v-if="$i18n.keyExists(key)">
    {{ $t(key) }}
</p>

Revie contributed code in commonjs branch and ensure that only the requiered dev dependencies are included (wich might alteady be the case).

I tried to figure out a way to automatically extract strings. There are a number of tools, some for angular, some make file based tools, so far I only tried to get this running as it seemed easy enough to customize https://github.com/flozz/stonejs-tools

I managed to get something extracted by running this command:

stonejs extract "dist/**/*.js" file.pot --functions="$t"

The summary so far:

• It does extract functions, tlang and so on would also work
• Not sure how to extract | translate, not sure I would use that though
• stonejs doesn't parse my ES6 code, I had to run it on top of my dist files which makes the references in the pot file a bit silly
• I have to convert the POT file to a JSON file, there are a lot of tools for this, it's just another step

This feels a bit cumbersome, did anyone try something like this?

Hi, I'm trying to use this with Nuxt as a plugin like so:

import Vue from 'vue'
import vuexI18n from 'vuex-i18n'

import store from '~/store'

import en from '~/locales/en.json'
import fr from '~/locales/fr.json'

Vue.use(vuexI18n.plugin, store())

Vue.i18n.add('en', en)
Vue.i18n.add('fr', fr)

Vue.i18n.set(store().state.locale)

Which works fine however when changing the language in the state (from locale = 'en to locale = 'fr' for example) the strings aren't changed on the fly. Is there any way to achieve this?

Hello,

I have a small question.
You're writing

// translations can be kept in separate files for each language
// i.e. resources/i18n/de.json.

Can you please tell me how to 'load' such an external file ?

Thanks in advance for your reply & help,
Johnny

for translation defined as:
"lang": {
"en": "EN",
"ch": "CH",
},

$t('lang.en') does not work in 1.4
It does work in 1.3.4

Is there any chance to support parametrizing the placeholder syntax for dynamic translations? In the project I'm working we already use double braces ({{ }}). Eg.:

{{ $t('You have {{count}} new messages', {count: 5}) }}

So, should be great to configure {{ and }} as the separators instead of just { and }

Cheers

Hi, I was spending some time trying to decide which vue i18n project to choose, when I've found this one. I think it's by far the easiest approach.

I was wondering if there is a way to make data persistent in localstorage. I've been using vuex-localstorage for my modules and works pretty well. Some of the info in my app needs to be persistent. Also current language.

Is there a way to solve that?

Thank you for your fantastic job!

Can support it, how to achieve it？

Hi, I could not get the plugin to work as I get an exception on startup.

The code that triggers the Error

import Vue from 'vue'
import Vuex from 'vuex'
import VuexI18n from 'vuex-i18n';
import en  from './locales/en/translation.json'

const store = new Vuex.Store({});

Vue.use(VuexI18n.plugin, store);   // <-- Error Here
Vue.i18n.add('en_US', en);
Vue.i18n.fallback('en_US');

The Exception:

Uncaught TypeError: Cannot set property $i18n of #<Vue$3> which has only a getter
    at Object.install (eval at <anonymous> (build.js:2898), <anonymous>:282:22)
    at Function.Vue.use (eval at <anonymous> (build.js:721), <anonymous>:4088:22) 

The library code that triggers the Exception:

	// register vue prototype methods
	Vue.prototype.$i18n = {   // <- Error Here
		locale: getLocale,
		set: setLocale,
		add: addLocale,
		remove: removeLocale,
		fallback: setFallbackLocale,
		exists: checkLocaleExists
	};

Software Versions:

• Vue: 2.3.2
• Vuex-i18n: 1.3.4
• Vuex: 2.3.1

hi,
I have my translation in ajax.
On my home if the component is static the translation is not done.
Thank you for your help
main.js

  methods: {
    starttrans () {

      this.$http.get('/locale-en.json')
        .then(response => response.data)
        .then(function (data) {
          Vue.i18n.add('en', data)
        })
        .catch(function (response) {
          console.log(response)
        })
    }
  },
  created () {
    Vue.i18n.set('en')
    console.log('monted')
    this.starttrans()
  }`

component test.vue

<template>
<div>
  <div class="box-tab">
    {{getIdStore}}
    <div class="">

{{ $tlang($i18n.locale() , 'asset.class') }}
{{ $t('asset.name') }}
{{ $tlang($i18n.locale() , 'asset.gegraphical') }}
  {{ $tlang($i18n.locale() , 'asset.devise') }}
   

    </div>
  </div>
</div>
</template>
<script>
  import Vue from 'vue'
  import Vuex from 'vuex'
  Vue.i18n.set('en')
  Vue.i18n.fallback('en')
module.exports = {
    data: function () {
      return {

      }
    },
    computed: {
      ...Vuex.mapGetters([
        'getIdStore',
        'getSlider'
      ])
    },
    methods: {
    }
}
</script>

Hi there,

I'm looking for a way to include another component within a translation.
So here's a hypothetical example:

"View my <vue-link>profile</vue-link>!"

So basically the translation function should look like this:

$t('view_profile', {'profile': '<vue-link>profile</vue-link>'})

And the string:

"View my {profile}!"

Of course the component won't render when you simply pass it as a parameter. But how can it be done?

(Naturally the translation could be split, but that of course can result in rather awkward partial strings)

Hej,
I was wondering if somebody like component based translations would be possible. What i mean by this is that each component/page would add its own translation, this would keep the separation much cleaner. So each component would do

import english from './en.json'`

and in the component/page

created: function() {
  this.$i18n.add('en', english)
}

I quickly tried this out now, but it seems when you add with the same key, they don't get merged but overwritten.

I have difficulties to implement vuex-i18n together with Nuxt.js (modules mode). Now I get the error message: SyntaxError Unexpected token export

Can someone help please or direct me into the right direction or provide the base setup structure to implement vuex-i18n together with Nuxt.js? A small outline example perhaps?

So far I put the code into folder plugins. As far as I understand our Nuxt.js store operates in “modules mode”, but I’m uncertain how to setup the store/i18n.js because I’m new to this Nuxt.js/Vue(x)

    ├─ plugins
    │   ├─ i18n.js
  …
    ├─ store
    │   ├─ index.js
    │   ├─ i18n.js

The plugins/i18n.js:

// plugins/i18n.js
import Vue from 'vue'
import Vuex from 'vuex'
// load and register the vuex i18n module
import vuexI18n from 'vuex-i18n'

import { english } from '~/locales/en.json'
import { german } from '~/locales/de.json'

const doDebug = process.env.NODE_ENV !== 'production'

const store = new Vuex.Store({
  strict: doDebug
})

Vue.use(
  vuexI18n.plugin,
  store,
  {
    onTranslationNotFound: function (locale, key) {
      console.warn(`vuex-i18n :: Key '${key}' not found for locale '${locale}'`)
    }
  })

// register the locales
Vue.i18n.add('en', english)
Vue.i18n.add('de', german)

// Set the start locale to use
Vue.i18n.set('de')
Vue.i18n.fallback('en')

export default store

Any help? Thank you very much.

Is there a documentation or an example how to use this plugin with vue-router to add language prefixes to routes and to translate route names?

To be able to use the module, I needed to change the main file in package.json to dist/vuex-i18n.cjs.js. I installed vuex-i18n as usual with npm install vuex-i18n --save.

If I don't do that, I get:

ERROR in static/js/vendor.f87486b0e9be75a67cda.js from UglifyJs
SyntaxError: Unexpected token: keyword (default) [./~/vuex-i18n/dist/vuex-i18n.es.js:461,0]

What's wrong?

I'd like to use a single file to handle all of my translations similarly to below but I found that I need to import and use Vue.i18n.add('en', english) on my root Vue instance instead of just being able to add them to the store. Is there a way around this?

I'd like to have something like below.

import Vue from 'vue';
import Vuex from 'vuex';

import english from './translations/english.json';
import german from './translations/german.json';
import french from './translations/french.json';

const debug = process.env.NODE_ENV !== 'production';

const store = new Vuex.Store({
    strict: debug
});

// Add translations directly to the application
Vue.i18n.add('en', english);
Vue.i18n.add('ge', german);
Vue.i18n.add('fr', french);

// Set the start locale to use
Vue.i18n.set('en');

export default store;

SyntaxError: Unexpected token export
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:576:28)
    at Object.Module._extensions..js (module.js:623:10)
    at Module.load (module.js:531:32)
    at tryModuleLoad (module.js:494:12)
    at Function.Module._load (module.js:486:3)
    at Module.require (module.js:556:17)
    at require (internal/module.js:11:18)
    at r (/Users/patrikpotocki/Development/chancehill-vue/node_modules/vue-server-renderer/build.js:8438:16)
error during render : /en/
/Users/patrikpotocki/Development/chancehill-vue/node_modules/vuex-i18n/dist/vuex-i18n.es.js:753
export default index;
^^^^^^

So it complains on export default index; (SSR)

I wonder what approach I'd have to take if I wanted to add some kind of context. By context I refer to gettext, more information about it here https://www.gnu.org/software/gettext/manual/html_node/Contexts.html

I've done a lot of work with gettext before and there's always a point where you need to add a context to support a lot of languages.

I am trying to use the $t() helper function within an component in the template part, but within an object that is passed as prop to the child component. This is not working – is there a way? Thank you.

<template>
…
    <kirby-fieldset :fields="[
     {
        name: 'email',
        label: $t("fields.email.label"),
        type: 'email'
      }
    ]" :values="user" @input="input" />

…
</template>

Hey, I'm new to Vue/Vuex and I'm trying to use this but I'm having some issues.

I'm loading Vuex in a separate directory/file from my main app.js like so:

// store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import vuexI18n from 'vuex-i18n'

Vue.use(vuexI18n.plugin, Vuex)

export default new Vuex.Store({
  //
})

And in my main app.js

import store from './store'
const app = new Vue({
    router: router,
    store: store,
    el: '#app'
})

This throws a Uncaught TypeError: Cannot read property 'hasOwnProperty' of undefined error. Any ideas on how I can make this work?

Hi,
an 'directive' improvement for the next release:
"v-tbind"

Now i can use it in subcomponents:

<input v-tbind:placeholder="placeholder">

Hey guys

Thanks for your great library! I've used it before in a large project and before I use it again, I figured I would write a little helper for adding translations: here.

If you deem it useful, feel free to link it in your Readme. I'll add functionality as I need it (e.g. removing/updating translations, ordering the translation files alphabetically, maybe syncing with the poeditor.com API, etc.). Contributions are welcome!

Cheers and thanks

I noticed that the i18nVuexModule (the store definition) is missing in the commonjs file. Could you rebuild it and publish on NPM?

Hi,

I'm trying to use pluralization but althouhg I get the correct placeholder (singular and plural based on context), it doesn't get translated.

{{ mutualFriends }} {{ $t('friend_in_common ::: friends_in_common', {}, mutualFriends) }}

For instance, for mutualFriends with values of 1 and 2 I get either

1 friend_in_common

or

2 friends_in_common

but not the translated text.

I use the lastest npm version, namely 1.8.0. Config is as follows:

import vuexI18n from 'vuex-i18n';
import store from './store/index';
import english from './assets/lang/en.json';
import french from './assets/lang/fr.json';

Vue.use(vuexI18n.plugin, store);
Vue.i18n.add('en', english);
Vue.i18n.add('fr', french);

No error is raised.

Thanking you in advance :)

How to get or handle all keys used in app like {{ $t('key') }} ?
I need send to server keys to translate in backend.

First of all, thank you for this awesome plugin!

$t or filter methods seem to be available in templates ony. I'd need to pass translations dynamically via components props inside the router like so:

routes: [
   {
     path: '/',
     name: 'Login',
     component: login,
     props: { title: localizedTitle }
  }
]

Is this possible? How should it be done?

Sorry, I didn't capture the error messages.

Im using vuex-i18n in nuxt framework. Nuxt gave me the errors related with vuex-i18n.

It said the errors occurred in ADD_LOCALE.

I thought it was caused by 'flattenTranslations' and it was pointing the field of 'undefined'.

I saw the message at the time, but it was bundled by nuxt. so the field name is not the original one.

Anyway I fixed it with replacement it with your older vuex-i18n.min.js.

If it's possible please make it fixed. Thanks

It seems that there is no way to check if a given translation message exists. I can use $i18n.exists to check if a local exists, but that's it.

I'd like to be able to perform the same checks that the plugin does when deciding what to render (for example when to fall back to the key), so I can decide to not render anything in any given situation. For example, if there is no translation for the title of the current page, I'd rather just render the app title than the untranslated key as the page title. So something like the following:

computed: {
    pageTitle: function () {
        var messageKey = 'pageTitles.' + this.$route.name;
        return 'My App' + (this.$i18n.messageExists(key) ? ' - ' + this.$t(key) : '');
    }
}

Is this possible currently?

I'm using the vuex-persistedstate plugin, but for some reason i18n is not stuck in the store, any ideas?

Hi all,

i am using the following {{ $t('name') }}
in some components i am getting the subject error in some other it is working.
the translation is being printed correctly but the i am getting the error in the console.
Anyone to advise please.

If a key is not found in (de.json),the unavailable key values will be taken from the fallback locale (en.json)

God, I wrote {{$in Vue (“content”)}} can switch in English, but in JS this.cont = this.$t (”content“) to display only a word, after switching to no effect, this is what happened in the ah, no wrong, why can be written in HTML, JS assigned to data data binding is not? Call for help!!!

Will be interesting some way to pluralizate like https://kazupon.github.io/vue-i18n/pluralization.html

Hi,

How to translate a placeholder i have tried placeholder="{{ $t('placehoder') }}"
i also tried placeholder="{{ 'placeholder' | translate }}"

please advise

I'm getting the following error:

<rejected> TypeError: Cannot read property 'dep' of undefined
    at ADD_LOCALE (/Users/patrikpotocki/Development/chancehill-vue/node_modules/vuex-i18n/dist/vuex-i18n.min.js:40:29)
    at wrappedMutationHandler (/Users/patrikpotocki/Development/chancehill-vue/node_modules/vuex/dist/vuex.js:597:5)
    at commitIterator (/Users/patrikpotocki/Development/chancehill-vue/node_modules/vuex/dist/vuex.js:321:7)
    at Array.forEach (native)
    at /Users/patrikpotocki/Development/chancehill-vue/node_modules/vuex/dist/vuex.js:320:11
    at Store._withCommit (/Users/patrikpotocki/Development/chancehill-vue/node_modules/vuex/dist/vuex.js:408:3)
    at Store.commit (/Users/patrikpotocki/Development/chancehill-vue/node_modules/vuex/dist/vuex.js:319:8)
    at Object.boundCommit [as commit] (/Users/patrikpotocki/Development/chancehill-vue/node_modules/vuex/dist/vuex.js:275:19)
    at addLocale (/Users/patrikpotocki/Development/chancehill-vue/node_modules/vuex-i18n/dist/vuex-i18n.min.js:83:12)
    at wrappedActionHandler (/Users/patrikpotocki/Development/chancehill-vue/node_modules/vuex/dist/vuex.js:604:15) }  reason:  TypeError: Cannot read property 'dep' of undefined
    at ADD_LOCALE (/Users/patrikpotocki/Development/chancehill-vue/node_modules/vuex-i18n/dist/vuex-i18n.min.js:40:29)
    at wrappedMutationHandler (/Users/patrikpotocki/Development/chancehill-vue/node_modules/vuex/dist/vuex.js:597:5)
    at commitIterator (/Users/patrikpotocki/Development/chancehill-vue/node_modules/vuex/dist/vuex.js:321:7)
    at Array.forEach (native)
    at /Users/patrikpotocki/Development/chancehill-vue/node_modules/vuex/dist/vuex.js:320:11
    at Store._withCommit (/Users/patrikpotocki/Development/chancehill-vue/node_modules/vuex/dist/vuex.js:408:3)
    at Store.commit (/Users/patrikpotocki/Development/chancehill-vue/node_modules/vuex/dist/vuex.js:319:8)
    at Object.boundCommit [as commit] (/Users/patrikpotocki/Development/chancehill-vue/node_modules/vuex/dist/vuex.js:275:19)
    at addLocale (/Users/patrikpotocki/Development/chancehill-vue/node_modules/vuex-i18n/dist/vuex-i18n.min.js:83:12)
    at wrappedActionHandler (/Users/patrikpotocki/Development/chancehill-vue/node_modules/vuex/dist/vuex.js:604:15)

On this.$i18n.remove(oldLang); invoking remove the following error occurs

vuex-i18n.min.js?0fec:253 Uncaught (in promise) ReferenceError: copy is not defined

Inspected the code the variable copy is not declared in the remove locale function

` REMOVE_LOCALE: function REMOVE_LOCALE(state, payload) {

		// check if the given locale is present in the state
		if (state.translations.hasOwnProperty(payload.locale)) {

			// check if the current locale is the given locale to remvoe
			if (state.locale === payload.locale) {
				// reset the current locale
				state.locale = null;
			}

			// create a copy of the translations object
			var translationCopy = Object.assign({}, state.translations);

			// remove the given locale
			delete translationCopy[payload.locale];

			// set the state to the new object
			state.translations = copy;
		}
	}`

state.translations = copy;

Cannot read property 'split' of null at translateInLanguage.. in Vue- Quasar framework.. any solutions?

Hi,

I am using vue in combination with server side rendering (Razor views from ASP.NET MVC).
I am using the vuex-i18n plugin to get translations inside vue components (which are off-course not rendered server side).

The way I set the translations is the following

Vue.i18n.add('@LanguageHelper.CurrentFrontendLanguageSymbol', {
            'label_result': '@("label_result".Translate())' });

The LanguageHelper and Translate functions provide the necessary values on the server side rendering time. They will later be used inside some vue components like this
{{ $t("label_result") }}

The problem I am facing is with special characters.
For example if "label_result".Translate() gives the value "résultat" then what I get from $t("label_result") is r#233;sultat. The special characters are encoded in ascii.

Do you know why this happens?

Hi guys!

Great work on this.
I was trying yo find the way to transform the translations to avoid write them many times (upperCase, snakeCase, etc.).
Finally I'm doing this to share the translation component thought all the app.
Maybe this is a good feature:

In my case I'm using lodash to do my transformations and here I can wrap the different requirements.

Vue.mixin({
  methods: {
    locale: function (translate, data) {
      return data && data.toUpper ? _.toUpper(this.$t(translate, data)) : this.$t(translate, data)
    }
  }
})

Hi,

A locale can be:

en en-UK en-US nl nl-NL nl-BE ...

Imagine I set the fallback locale to "en" and the actual locale to "nl-BE" (based on browser)

If a translation is missing from "nl-BE", I expect that the first fallback is "nl" and if it is still missing then fallback to "en".

In the current implementation this scenario falls back immediately to "en"

Looking forward to your feedback

Thanks
Gerd

Hi,

Thank you for this great module. Correct me if I'm wrong, but there's not builtin method to access a given translation from within methods.

For instance, if I want to pass a translated text to some functions, the only way to do it is directly via the store:

methods: {
  displayNotification() {
    this.$notify(this.$store.state.i18n.translations[this.$store.state.i18n.locale].notificationString);
  }
}

It would be awesome to have a helper method for that. Like this.$i18n.translate('blabla');