javascript - Vue i18n translation for single file components - Stack Overflow

admin管理员组

文章数量:1023204

I'm using laravel and currently trying to do multilanguage pages, So i've found this pretty neat plugin called VueI18N for translations and got it working (somehow) by installing it via npm and then putting the following code in my app.js

//app.js
window.Vue = require('vue');

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

//tons of more ponents here
Vueponent('vue-test', require('./ponents/VueTestFileForLocalization.vue').default);

const messages = {
    en: {
        message: {
            hello: 'Hello, {name}!'
        }
    },
    de: {
        message: {
            hello: 'Guten Tag, {name}!'
        }
    }
};

const i18n = new VueI18n({
    locale: 'de',
    messages
});


  
const app = new Vue({
    el: '#vue-app',
    i18n
});

Then in my vue-test i tried outputting this successfully:

 <template>
   <div>{{ $t('message.hello', { name: 'John' }) }}</div>
 </template>
 <script>
 export default {
   data() {
     return {};
   },
   created() {
     this.$i18n.locale = 'en';
   }
 };
 </script>

and by changing the locale i can also display the other language. Great. Now I think with so many ponents, I might have a problem defining all the localization inside app.js , and its not beautiful either. So I tried looking up This link here to the docs for single file ponents but unsuccessfully, unfortunately. I copy-pasted the code, (vue-i18n-loader should also be installed by laravel by default) and modified the webpack file. The error I get seems pretty mon after research but I cannot seem to fix it.

Value of key 'hello' is not a string!
Cannot translate the value of keypath 'hello'. Use the value of keypath as default

It does simply output whatever the key is i specify in message.

Does any of you out there have an idea, what I might have done wrong or forgot to setup? Any hints would be appreciated very very much. Thank you for your time Best regards, Desory

I'm using laravel and currently trying to do multilanguage pages, So i've found this pretty neat plugin called VueI18N for translations and got it working (somehow) by installing it via npm and then putting the following code in my app.js

//app.js
window.Vue = require('vue');

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

//tons of more ponents here
Vue.ponent('vue-test', require('./ponents/VueTestFileForLocalization.vue').default);

const messages = {
    en: {
        message: {
            hello: 'Hello, {name}!'
        }
    },
    de: {
        message: {
            hello: 'Guten Tag, {name}!'
        }
    }
};

const i18n = new VueI18n({
    locale: 'de',
    messages
});


  
const app = new Vue({
    el: '#vue-app',
    i18n
});

Then in my vue-test i tried outputting this successfully:

 <template>
   <div>{{ $t('message.hello', { name: 'John' }) }}</div>
 </template>
 <script>
 export default {
   data() {
     return {};
   },
   created() {
     this.$i18n.locale = 'en';
   }
 };
 </script>

and by changing the locale i can also display the other language. Great. Now I think with so many ponents, I might have a problem defining all the localization inside app.js , and its not beautiful either. So I tried looking up This link here to the docs for single file ponents but unsuccessfully, unfortunately. I copy-pasted the code, (vue-i18n-loader should also be installed by laravel by default) and modified the webpack file. The error I get seems pretty mon after research but I cannot seem to fix it.

Value of key 'hello' is not a string!
Cannot translate the value of keypath 'hello'. Use the value of keypath as default

It does simply output whatever the key is i specify in message.

Does any of you out there have an idea, what I might have done wrong or forgot to setup? Any hints would be appreciated very very much. Thank you for your time Best regards, Desory

• javascript
• laravel
• vue.js
• vuejs2
• translation

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Apr 15, 2020 at 4:06 DesoryDesory 4311 silver badge55 bronze badges 1

• You show the parts that are working, perhaps show how you are currently loading vue-loader and vue-i18n-loader. Also your webpack config and package.json files. The versions of what you load might help. – Leon Vismer Commented Apr 15, 2020 at 4:42

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

While not a direct answer to your question I recently found another approach to the same problem that is less effort when it es to maintaining translations.

I put all my translations in JSON files so I can share the same translations between Laravel backend and Vue front end.

I did this based on this: https://www.codeandweb./babeledit/tutorials/how-to-translate-your-vue-app-with-vue-i18n

So as per: https://laravel./docs/7.x/localization#using-translation-strings-as-keys

Create resources/lang/en.json etc. with contents:

{
"my_message": "This is my message in english",
...
}

I'd create resources/js/i18n.js containing:

import Vue from "vue";
import VueI18n from "vue-i18n";
Vue.use(VueI18n);

function loadLocaleMessages() {
    const locales = require.context(
        "../lang",
        true,
        /[A-Za-z0-9-_,\s]+\.json$/i
    );
    const messages = {};
    locales.keys().forEach(key => {
        const matched = key.match(/([A-Za-z0-9-_]+)\./i);
        if (matched && matched.length > 1) {
            const locale = matched[1];
            messages[locale] = locales(key);
        }
    });
    return messages;
}

export default new VueI18n({
    locale: process.env.VUE_APP_I18N_LOCALE || "en",
    fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || "en",
    messages: loadLocaleMessages()
});

and in app.js import that as follows:

//Localise
import i18n from "./i18n";
Vue.use(i18n);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding ponents to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */
const app = new Vue({
    i18n,
    el: "#app"
});

You can then use the same translations in your blade templates with the __ helper and in Vue with $t(...)

I had the same problem, i solved it by restarting the server.

Run npm run serve again.

Hope it helps someone in the future..

Try the changes below for app.js and your code should work fine:

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import App from './ponents/VueTestFileForLocalization.vue';

Vue.use(VueI18n);

const messages = {
  en: {
      message: {
          hello: 'Hello, {name}!'
      }
  },
  de: {
      message: {
          hello: 'Guten Tag, {name}!'
      }
  }
};

const i18n = new VueI18n({
  locale: 'de',
  messages
});

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#vue-app');

I'm using laravel and currently trying to do multilanguage pages, So i've found this pretty neat plugin called VueI18N for translations and got it working (somehow) by installing it via npm and then putting the following code in my app.js

//app.js
window.Vue = require('vue');

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

//tons of more ponents here
Vueponent('vue-test', require('./ponents/VueTestFileForLocalization.vue').default);

const messages = {
    en: {
        message: {
            hello: 'Hello, {name}!'
        }
    },
    de: {
        message: {
            hello: 'Guten Tag, {name}!'
        }
    }
};

const i18n = new VueI18n({
    locale: 'de',
    messages
});


  
const app = new Vue({
    el: '#vue-app',
    i18n
});

Then in my vue-test i tried outputting this successfully:

 <template>
   <div>{{ $t('message.hello', { name: 'John' }) }}</div>
 </template>
 <script>
 export default {
   data() {
     return {};
   },
   created() {
     this.$i18n.locale = 'en';
   }
 };
 </script>

and by changing the locale i can also display the other language. Great. Now I think with so many ponents, I might have a problem defining all the localization inside app.js , and its not beautiful either. So I tried looking up This link here to the docs for single file ponents but unsuccessfully, unfortunately. I copy-pasted the code, (vue-i18n-loader should also be installed by laravel by default) and modified the webpack file. The error I get seems pretty mon after research but I cannot seem to fix it.

Value of key 'hello' is not a string!
Cannot translate the value of keypath 'hello'. Use the value of keypath as default

It does simply output whatever the key is i specify in message.

Does any of you out there have an idea, what I might have done wrong or forgot to setup? Any hints would be appreciated very very much. Thank you for your time Best regards, Desory

I'm using laravel and currently trying to do multilanguage pages, So i've found this pretty neat plugin called VueI18N for translations and got it working (somehow) by installing it via npm and then putting the following code in my app.js

//app.js
window.Vue = require('vue');

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

//tons of more ponents here
Vue.ponent('vue-test', require('./ponents/VueTestFileForLocalization.vue').default);

const messages = {
    en: {
        message: {
            hello: 'Hello, {name}!'
        }
    },
    de: {
        message: {
            hello: 'Guten Tag, {name}!'
        }
    }
};

const i18n = new VueI18n({
    locale: 'de',
    messages
});


  
const app = new Vue({
    el: '#vue-app',
    i18n
});

Then in my vue-test i tried outputting this successfully:

 <template>
   <div>{{ $t('message.hello', { name: 'John' }) }}</div>
 </template>
 <script>
 export default {
   data() {
     return {};
   },
   created() {
     this.$i18n.locale = 'en';
   }
 };
 </script>

and by changing the locale i can also display the other language. Great. Now I think with so many ponents, I might have a problem defining all the localization inside app.js , and its not beautiful either. So I tried looking up This link here to the docs for single file ponents but unsuccessfully, unfortunately. I copy-pasted the code, (vue-i18n-loader should also be installed by laravel by default) and modified the webpack file. The error I get seems pretty mon after research but I cannot seem to fix it.

Value of key 'hello' is not a string!
Cannot translate the value of keypath 'hello'. Use the value of keypath as default

It does simply output whatever the key is i specify in message.

Does any of you out there have an idea, what I might have done wrong or forgot to setup? Any hints would be appreciated very very much. Thank you for your time Best regards, Desory

• javascript
• laravel
• vue.js
• vuejs2
• translation

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Apr 15, 2020 at 4:06 DesoryDesory 4311 silver badge55 bronze badges 1

• You show the parts that are working, perhaps show how you are currently loading vue-loader and vue-i18n-loader. Also your webpack config and package.json files. The versions of what you load might help. – Leon Vismer Commented Apr 15, 2020 at 4:42

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

While not a direct answer to your question I recently found another approach to the same problem that is less effort when it es to maintaining translations.

I put all my translations in JSON files so I can share the same translations between Laravel backend and Vue front end.

I did this based on this: https://www.codeandweb./babeledit/tutorials/how-to-translate-your-vue-app-with-vue-i18n

So as per: https://laravel./docs/7.x/localization#using-translation-strings-as-keys

Create resources/lang/en.json etc. with contents:

{
"my_message": "This is my message in english",
...
}

I'd create resources/js/i18n.js containing:

import Vue from "vue";
import VueI18n from "vue-i18n";
Vue.use(VueI18n);

function loadLocaleMessages() {
    const locales = require.context(
        "../lang",
        true,
        /[A-Za-z0-9-_,\s]+\.json$/i
    );
    const messages = {};
    locales.keys().forEach(key => {
        const matched = key.match(/([A-Za-z0-9-_]+)\./i);
        if (matched && matched.length > 1) {
            const locale = matched[1];
            messages[locale] = locales(key);
        }
    });
    return messages;
}

export default new VueI18n({
    locale: process.env.VUE_APP_I18N_LOCALE || "en",
    fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || "en",
    messages: loadLocaleMessages()
});

and in app.js import that as follows:

//Localise
import i18n from "./i18n";
Vue.use(i18n);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding ponents to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */
const app = new Vue({
    i18n,
    el: "#app"
});

You can then use the same translations in your blade templates with the __ helper and in Vue with $t(...)

I had the same problem, i solved it by restarting the server.

Run npm run serve again.

Hope it helps someone in the future..

Try the changes below for app.js and your code should work fine:

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import App from './ponents/VueTestFileForLocalization.vue';

Vue.use(VueI18n);

const messages = {
  en: {
      message: {
          hello: 'Hello, {name}!'
      }
  },
  de: {
      message: {
          hello: 'Guten Tag, {name}!'
      }
  }
};

const i18n = new VueI18n({
  locale: 'de',
  messages
});

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#vue-app');

本文标签： javascriptVue i18n translation for single file componentsStack Overflow