I am using i18n library in Vue.js for language translation. I want to to import in it my script and store a value in data, but I have trouble with importing it. How should I import it? I tried with import $t from "./i18n"; but that just returns this error: Module not found: Error: Can't resolve './i18n'

here is my code:

script>
import Header from "../ponents/Header";
import $ from "jquery";
import $t from "./i18n";

export default {
  name: "GroupPermissions",
  ponents: {
    Header
  },
  data() {
    return {
      showAddGroupDialog: false,
      updatePermissionDialog: false,
      itemsToBeDeleted: [],
      permissions: $t("groupPermissions.table.permissions")
    };

and my main.js:

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

import VueMaterial from "vue-material";
import "vue-material/dist/vue-material.min.css";
import "vue-material/dist/theme/default.css";
import "vue-multiselect/dist/vue-multiselect.min.css";
import $ from "jquery";
import Multiselect from "vue-multiselect";
import i18n from "./i18n";
import "@/plugins/echarts";
import Sticky from 'vue-sticky-directive'

Vueponent("multiselect", Multiselect);
Vue.use(VueMaterial);
Vue.use(Sticky);

Vue.config.productionTip = false;

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

I am using i18n library in Vue.js for language translation. I want to to import in it my script and store a value in data, but I have trouble with importing it. How should I import it? I tried with import $t from "./i18n"; but that just returns this error: Module not found: Error: Can't resolve './i18n'

here is my code:

script>
import Header from "../ponents/Header";
import $ from "jquery";
import $t from "./i18n";

export default {
  name: "GroupPermissions",
  ponents: {
    Header
  },
  data() {
    return {
      showAddGroupDialog: false,
      updatePermissionDialog: false,
      itemsToBeDeleted: [],
      permissions: $t("groupPermissions.table.permissions")
    };

and my main.js:

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

import VueMaterial from "vue-material";
import "vue-material/dist/vue-material.min.css";
import "vue-material/dist/theme/default.css";
import "vue-multiselect/dist/vue-multiselect.min.css";
import $ from "jquery";
import Multiselect from "vue-multiselect";
import i18n from "./i18n";
import "@/plugins/echarts";
import Sticky from 'vue-sticky-directive'

Vue.ponent("multiselect", Multiselect);
Vue.use(VueMaterial);
Vue.use(Sticky);

Vue.config.productionTip = false;

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

• javascript
• internationalization
• vue-i18n

2 Answers 2

If you'd like use vue-i18n, in your main.js you should import vue-i18n library first and create an i18n variable like this:

import VueI18n from 'vue-i18n';

const i18n = new VueI18n({
    locale: 'en',
    messages: { 'en': { title: 'Title' }},
});

and pass the i18n var to your Vue in main.js as you did it:

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

After this, in your ponent you will have a this.$t('title') method that will return with 'Title' value.

This link may help for you: http://kazupon.github.io/vue-i18n/started.html#javascript

Imre showed how to install the vue-i18n globally. I'll just add that you can also import an instance of i18n and use it in any javascript file, not only within Vue ponents.

If you export i18n like this

import VueI18n from 'vue-i18n';

export const i18n = new VueI18n({
    locale: 'en',
    messages: { 'en': { title: 'Title' }},
});

you can then use it in Vue ponents, though using this.$t() is preferable.

<script>
import Header from "../ponents/Header";
import $ from "jquery";
import { i18n } from "./i18n";

export default {
  name: "GroupPermissions",
  ponents: {
    Header
  },
  data() {
    return {
      showAddGroupDialog: false,
      updatePermissionDialog: false,
      itemsToBeDeleted: [],
      permissions: i18n.t("groupPermissions.table.permissions")
    };
</script>

But more relevantly, you can use this anywhere else.

//some-function.js
import { i18n } from "./i18n";

function someFunction() {
  console.log(i18n.t(...));
}