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

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"

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]);
});

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

@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
  })
})

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)
})

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.

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

has the same question in vue2

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.