SFC and Cannot translate the value of keypath...

This is not exactly an issue of vue-i18n-loader, I am writing it as a reminder for others that may face this problem: if, inside a single file component, you get the error “Cannot translate the value of keypath…”, it may be cause by npm cache.

Solution:

• Check, double check that your vue-i18n-loader has been properly configured
• Add a syntax error inside the <i18n>{...}</i18n> tag
• Check that webpack does not compile because the loader complains about the syntax error (if it doesn’t, than you didn’t configure properly the vue-i18n-loader inside webpack config file)
• Remove the syntax error
• Remove node_modules folder (the whole folder, not just the i18n folders)
• run npm cache clean
• run npm install

After that, it worked for me (and my colleagues facing the same problem).

[Kouty]

Indeed there is.

...
</template>

<i18n src="./i18n.json"></i18n>

<script>
...

[TugayYaldiz]

As @Kouty 's say; you need to change root component’s $i18n. So there is $root instance property (which reach to the App.vue) available in every component or sub component in your Vue instance. İnstead of changing this.$i18n.locale you can change this.$root.$i18n.locale = newVal in template tags just $root.$i18n.locale = newVal.

No need to emiting events, watching props etc.