Vue-i18n: Vue.locale is not a function - Issue after upgrading to 3.0

[flaird]

I'm getting Unknown TypeError: Vue.locale is not a function

var VueI18n = require('vue-i18n')

Vue.use(VueI18n)
Vue.config.lang = 'sv'
var locales = require('./lang/locales')

Object.keys(locales).forEach(function (lang) {
  Vue.locale(lang, locales[lang])
})

And in my locales file I have like I had in 2.*:

module.exports = {
  en: {
    message: 'Hi',
  },
  sv: {
    message: 'Hej',
  }
}

[kazupon]

Thank you for your reporting!!
I cannot confirm the this issue.
https://jsfiddle.net/kazupon/y2rs433v/1/

Can you tell me the how to include vue-i18n script to your app enviroment please?

[mdeprezzo]

I've the same error. I'm using it with vue-router. And i don't know why doesn't works.
I import it correctly like that:

import VueI18n from 'vue-i18n';

and then

Vue.use(VueI18n);

with the others plugins. But inside my App component, if i tried to use Vue.locale i got that error. Any suggestions?

------------------ update

I solve by put the locale setting before router.start. And then i can access to $t function inside the template. But inside from my other components i can't access to Global Vue.t

[kazupon]

Related https://github.com/vuejs/vue-validator/issues/188

[kazupon]

In my enviroment, I reproduced this issue.

This issue occured when execute router#start method in advance of installation with Vue.use when we use vue-router plugin.
We must install with Vue.use in advance of router#start.

[mdeprezzo]

Can you paste a simple example about that ?

[kazupon]

installation example:

import Vue from 'vue'
import App from './App.vue'
import VueI18n from 'vue-i18n'
import VueRouter from 'vue-router'
import { locales } from './locales'

Vue.use(VueRouter)

let Foo = Vue.extend({
  template: '<p>This is foo!</p>'
})
let Bar = Vue.extend({
  template: '<p>This is bar! {{ $t("message")}}</p>'
})

Vue.use(VueI18n)
Vue.config.lang = 'en'
Object.keys(locales).forEach(function (lang) {
  Vue.locale(lang, locales[lang])
})

let router = new VueRouter()
router.map({
  '/foo': {
    component: Foo
  },
  '/bar': {
    component: Bar
  }
})

router.start(App, 'body')

[mdeprezzo]

For me doens't works yet for the global function like Vue.t, if try to call inside another component. Btw i can use the $t function inside template. Thanks a lot man !!

[kazupon]

For me doens't works yet for the global function like Vue.t,

Thank you for your feedback!
Can you provide the minimum reproduction code please ?

[mdeprezzo]

Sure. I'll try.
So this is what that i've inside my main.js:

import Vue from 'Vue'
import App from './components/App.vue'
import VueI18n from 'vue-i18n'
import VueRouter from 'vue-router'
import VueValidator from 'vue-validator'
import VueResource from 'vue-resource'
import infiniteScroll from 'vue-infinite-scroll'

import locales from './locales'
import config from './config'
import { configRouter } from './config/route-config'

Vue.use(VueRouter)
Vue.use(VueValidator)
Vue.use(VueResource)
Vue.use(infiniteScroll)
Vue.use(VueI18n)

const router = new VueRouter({
    hashbang: true,
    saveScrollPosition: true,
    history: true
})

configRouter(router)

document.addEventListener('deviceready', function () {
    Vue.config.lang = config.language();
    Object.keys(locales).forEach(function (lang) {
        Vue.locale(lang, locales[lang])
    })   

    router.start(App, '#app')
}, false);

I'm using vue with cordova, so i need to include route.start and the initialization of vue i18n inside deviceready, to access navigator.globalization.getPreferredLanguage function. And that's all!

[peterthomashorn]

I have the same issue (vue-i18n@^4.0.1) but I do not use vue-router. It is just Vue.js and a custom component. This is my script:

import Vue  from 'vue';
import Search from './search.vue';
import VueI18n from 'vue-i18n';

$(document).foundation();

var locales = {
    de: {
        labels: {
            fairs: "Messen"
        }
    },
    en: {
        labels: {
            fairs: "Fairs"
        }
    }
};

Vue.use(VueI18n);

var documentLanguage = $('html').attr('lang');

Vue.config.lang = documentLanguage;

Object.keys(locales).forEach(function (lang) {
    Vue.locale(lang, locales[lang]);
});

The line setting the locale strings (Vue.locale(lang, locales[lang]);) results in the error _coboo-4a6b9317b0.js:11410 Uncaught TypeError: _vue2.default.locale is not a function_. Browserify compiles it to:

var _vue = require('vue');
var _vue2 = _interopRequireDefault(_vue);
var _search = require('./search.vue');
var _search2 = _interopRequireDefault(_search);
var _vueI18n = require('vue-i18n');
var _vueI18n2 = _interopRequireDefault(_vueI18n);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

$(document).foundation();

var locales = {
    de: {
        labels: {
            fairs: "Messen"
        }
    },
    en: {
        labels: {
            fairs: "Fairs"
        }
    }
};

_vue2.default.use(_vueI18n2.default);
var documentLanguage = $('html').attr('lang');
_vue2.default.config.lang = documentLanguage;

Object.keys(locales).forEach(function (lang) {
    _vue2.default.locale(lang, locales[lang]);
});

[jackmakesthings]

I'm seeing the same issue as the last commenter - simple Vue app, no router or anything, and the same Uncaught TypeError: _vue2.default.locale is not a function error in the console. I'm using webpack (the standard vue-cli webpack setup) for compilation. Vue v.1.0.21, Vue-i18n v.4.4.0.

Help?

[yageek]

Same issue. Here is my main.js:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'

import auth from './auth'

import ListNews from './components/news/ListNews'
import AddNews from './components/news/AddNews'
import Login from './components/Login'

import ListTrainings from './components/trainings/ListTrainings'
import AddTraining from './components/trainings/AddTraining'
import Home from './components/Home'
import axios from 'axios'
import VueMoment from 'vue-moment'
import VueI18n from 'vue-i18n'
import Locales from './translations'

Vue.use(VueI18n)
Vue.use(VueRouter)
Vue.use(VueMoment)

Vue.config.lang = 'fr'

Object.keys(Locales).forEach(function (lang) {
  Vue.locale(lang, Locales[lang])
})
console.debug('Setting up router...')
const routes = [
  { path: '/login', component: Login },
  { path: '/', component: Home, beforeEnter: auth.requiresAuth },
  // News
  { path: '/news', component: ListNews, beforeEnter: auth.requiresAuth },
  { path: '/createNews', component: AddNews, beforeEnter: auth.requiresAuth },
  { path: '/news/edit/:newsID', component: AddNews, beforeEnter: auth.requiresAuth },
  // Training
  { path: '/trainings', component: ListTrainings, beforeEnter: auth.requiresAuth },
  { path: '/createTraining', component: AddTraining, beforeEnter: auth.requiresAuth },
  { path: '/trainings/edit/:trainingID', component: AddTraining, beforeEnter: auth.requiresAuth },
  { path: '*', redirect: '/' }
]

const router = new VueRouter({
  mode: 'history',
  routes,
  linkActiveClass: 'is-active'
})

axios.interceptors.response.use((response) => {
  return response
}, function (error) {
  // Do something with response error
  if (error.response.status === 401) {
    console.log('unauthorized, logging out ...')
    auth.logout()
    router.go('/login')
  }
  return Promise.reject(error)
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  router: router
})

EDIT: Fixed by using the new init from 6.0.0-alpha1.

[r00takaspin]

Getting same issue with 6.0.0-alpha.2:
Uncaught TypeError: _vue2.default.locale is not a function

import Passport from './src/components/documents/Passport.vue'
import Form8 from './src/components/documents/Form8.vue'
import BootstrapVue from 'bootstrap-vue'

import Vue from 'vue'
import jQuery from 'jquery'
import VeeValidate from 'vee-validate'
import VueResource from 'vue-resource'
import VueI18n from 'vue-i18n'

Vue.use(BootstrapVue)
Vue.use(VeeValidate)
Vue.use(VueResource)
Vue.use(VueI18n)

Vue.config.lang = 'en'

Vue.locale('en', {test: 'test'})

Vue.component('passport', Passport)
Vue.component('form8', Form8)

jQuery(document).ready(function() {
  new Vue({
    el: '#vue-app',
    data: {
      identity: gon.identity,
      residence: gon.residence,
      countries: gon.countries
    },
    components: ['passport', 'form8']
  })
})

[yageek]

@r00takaspin Try to use:

import Passport from './src/components/documents/Passport.vue'
import Form8 from './src/components/documents/Form8.vue'
import BootstrapVue from 'bootstrap-vue'

import Vue from 'vue'
import jQuery from 'jquery'
import VeeValidate from 'vee-validate'
import VueResource from 'vue-resource'
import VueI18n from 'vue-i18n'

Vue.use(BootstrapVue)
Vue.use(VeeValidate)
Vue.use(VueResource)
Vue.use(VueI18n)

var i18n = new VueI18n({
  locale: 'en',
  messages: {test: 'test'}
})

Vue.component('passport', Passport)
Vue.component('form8', Form8)

jQuery(document).ready(function() {
  new Vue({
    el: '#vue-app',
    data: {
      identity: gon.identity,
      residence: gon.residence,
      countries: gon.countries
    },
    components: ['passport', 'form8'],
    i18n: i18n
  })
})

[r00takaspin]

@yageek thanks a lot, it really works fine. I just tried to implement another example.

[superchangme]

has the same question in vue2

[syntachaosx]

@r00takaspin @yageek , thanks your example, but i still can't understand how to input multi-locale to i18n instance . And how to render string that i expected in html template.
In template, use{{ $i18n.t('message.test') }}, will getting a warning '[vue-i18n] Cannot translate the value of keypath 'message.test'. Use the value of keypath as default.'
My script is a sample pages, use .vue file, no vue-router.
Could you tell me how to next ? thanks a lot

[yageek]

@warcryDoggie If you have set up everything like the code upwards:

• To use the translation in the template:

{{ $t("keyPath") }}

• To use translation in the components part:

this.$i18n.t('keyPath')

[superchangme]

i just move vue-i18n to version 5.0.3
just ok:-)

[FrankFang]

Beta is beta

"vue-i18n":"5.0.3",

[Senci]

@yageek thanks, your suggestion worked. 👍

[jopicornell]

I had the same issue, and then I figured out that the version that npm installs is the 6.0.0-alpha. Why is put a alpha as the last version in npm repository?

I think is the main reason this issue is opened.

[alexcroox]

Can confirm, npm install vue-i18n is installing "^6.0.0-alpha.2" which is triggering the error

Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0_vue___default.a.locale is not a function when following the getting started guide exactly (setting up before initiating vue-router etc)

The error goes away if I manually force in package.json "vue-i18n": "^5.0.3"

[antarasi]

Probably you don't have to downgrade to version 5.03:
Once you encounter similar issues, first check if you are instantiating i18n in 6.* way, because API has braking changes in this version:
http://kazupon.github.io/vue-i18n/en/started.html
Other braking changes are described here:
http://kazupon.github.io/vue-i18n/en/migrations.html
There is a lot of examples in the internet using previous API version that may cause a lot confusion at first glance.

[tvld]

This is indeed frustrating. We tried today to go live with a production and then run into one submodule that caused a complete break.. this one. The breaking changes are indeed breaking. Can confirm that )))

This no longer works, and there seems no simple migration info? What is the replacement for Vue.locale ?

var VueI18n = require('vue-i18n')  // https://kazupon.github.io/vue-i18n/
Vue.use(VueI18n)

// Load files from lang folder
const loadLocales = [
  { "isocode": "en", "language": "English" },
  { "isocode": "nl", "language": "Nederlands" }
]

loadLocales.forEach(function (lang) {
  // loading files such as en.js and nl.js
  let langObj = require("../lang/" + lang.isocode)
  Vue.locale(lang.isocode, langObj)
})

[johnmerced]

I'm having the same issue - I'm using v6.1.0.

[tvld]

I managed to get this working in two steps.

1 - in locales.js:

import Vue from 'vue'

/** LANGUAGES / LOCALES */
import VueI18n from 'vue-i18n'  // https://kazupon.github.io/vue-i18n/
Vue.use(VueI18n)

// Load files from lang folder
const loadLocales = [
  { "isocode": "en", "language": "English" },
  { "isocode": "nl", "language": "Nederlands" }
]
let messages = {}

loadLocales.forEach(function (lang) {
  // loading files such as en.js and nl.js
  let langObj = require("../lang/" + lang.isocode)
  messages[lang.isocode] = langObj
})

// set browser language Footer component can change the language
let lang = Vue.config.lang || window.navigator.userLanguage || window.navigator.language || "en"

// this seems to have become obsolete in vue-i18n / v6:
Vue.config.lang = lang.substr(0, 2) // "en-US" >> "en"

const i18n = new VueI18n({
  locale: Vue.config.lang, // set locale
  fallbackLocale: 'en',
  silentTranslationWarn: false,
  messages // set locale messages
})
export default i18n

2- and in index.js:

// Language and locales
import i18n from "./assets/js/locales"

// Router for serving url's
import router from './assets/js/router'

/** MOUNT THE APP */
new Vue({
  router,
  i18n,
  extends: {
    template: '<div id="app"><router-view></router-view></div>'
  }
}).$mount('#app')

I have created another ticket for the failing Vue.config.lang #148

[kazupon]

I mentioned in #148, Vue.config.lang is deprecated in v6 or later.
And also In about Vue.locale, it is deprecated in V6 or later.
See the docs:
https://kazupon.github.io/vue-i18n/en/migrations.html#vuelocale-replaced