How can I translate app without reloading page in vue.js?

Question

I want to translate my app English to German. on the language change event, I wrote this code

changeLocale (locale) {
      i18n.locale = locale.language
      VueCookies.set('UserLanguage', locale.language)
      // window.location.reload() this one is reloading page 
      this.$root.reload() // this one is not working 
    },

and I want to translate this data in vuejs file :

 DashboardData: [{'name': this.$t('IVR')}, {'name': this.$t('DTML')}, {'name': this.$t('SSH')}]

if I do window.location.reload(), it's working perfectly but I don't want to reload the page so, I am thinking to reload root in vue, I am not sure about this.

Is there any way to reload the root element or all property of the whole app?

I think that `this.$t` is undefined if you try to use it in the `data` block. You could try using `this.$i18n.t` instead, or moving your `DashboardData` to a computed property and keep using `this.$t`. — Ricky Ruiz, Mar 26 '19 at 17:42

score 0 · Answer 1 · answered Mar 26 '19 at 15:51

0

If you are just trying to perform a safe reload via vue.js , there is a simple method you can use ...

vm.$forceUpdate();

for further info you can go here

answered Mar 26 '19 at 15:51

adib

347
3
5

I tried this one but it is not working in this case. – JYOTI SAPARIYA Mar 26 '19 at 15:58
actually i want to reload all proerty of root in vue. – JYOTI SAPARIYA Mar 26 '19 at 15:59
if you are just trying to translate a page ... you can try [this](https://kazupon.github.io/vue-i18n/started.html#html) – adib Mar 26 '19 at 16:07
ya, I am using that one only and translation works(if page reloaded) but when I am passing data vue to HTML I need to reload the page for translation but I do not want to reload the page – JYOTI SAPARIYA Mar 26 '19 at 16:10

score 0 · Answer 2 · answered Mar 28 '19 at 12:44

Why reload ? I am using vue-i18n and i don't reload my page. Here's the code:

home.vue

<v-list-tile @click="locale='fr'">
...
watch:{
   locale(val) {
       this.$i18n.locale=val;
    } 
},
mounted: function() {
   this.locale = this.$i18n.locale;
},

my app.js

...
import VueI18n from 'vue-i18n';
import messages from './lang/messages'
import dateTimeFormats from './lang/dateTimeFormats'
import numberFormats from './lang/numberFormats'
...
Vue.use(VueI18n);
let locale = navigator.language;
const i18n = new VueI18n({
  fallbackLocale: 'gb',
  locale: locale,
  messages,
  dateTimeFormats,
  numberFormats
})
...
const app = new Vue({
    el: '#app',
    router,
    store,
    i18n,
    components:{
        App
    }
});

How can I translate app without reloading page in vue.js?

2 Answers2