Comments (28)
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"
from vue-i18n.
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]);
});
from vue-i18n.
i just move vue-i18n to version 5.0.3
just ok:-)
from vue-i18n.
@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
})
})
from vue-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)
})
from vue-i18n.
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.
from vue-i18n.
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.
from vue-i18n.
has the same question in vue2
from vue-i18n.
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
from vue-i18n.
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?
from vue-i18n.
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
from vue-i18n.
Related kazupon/vue-validator#188
from vue-i18n.
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
.
from vue-i18n.
Can you paste a simple example about that ?
from vue-i18n.
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')
from vue-i18n.
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 !!
from vue-i18n.
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 ?
from vue-i18n.
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!
from vue-i18n.
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?
from vue-i18n.
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']
})
})
from vue-i18n.
@yageek thanks a lot, it really works fine. I just tried to implement another example.
from vue-i18n.
@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
from vue-i18n.
@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')
from vue-i18n.
Beta is beta
"vue-i18n":"5.0.3",
from vue-i18n.
@yageek thanks, your suggestion worked. 👍
from vue-i18n.
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.
from vue-i18n.
I'm having the same issue - I'm using v6.1.0.
from vue-i18n.
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
from vue-i18n.
Related Issues (20)
- Fallback when value is undefined.
- [Vue3, Vite] Error if string value contain HTML and special characters HOT 3
- Parsing of language file fails when using functions HOT 1
- How to use component interpolation for array (multiple) translations
- Returning an Empty String for Undefined Keys in Vue-i18n HOT 1
- Use pluralization in component interpolation.
- The safari browser does not show words correctly when a language is switched.
- YAML parser doesn't process valid YAML HOT 1
- [v9.8.0] Suppressing automatic locale fallback with `!` breaks `n`/`$n` number formatting HOT 1
- Reuse of international fields
- Avoid duplicate code for `numberFormats` and `dateTimeFormats `
- Avaliblity to set `keySeperator`
- Dynamic currency
- 语言包在线修改
- Fallback formatting fails when key is not defined in fallback translation
- [vue-i18n] Cannot find VueI18n instance!
- Hyphens in placeholders causing error `Unterminated closing brace` in vue-i18n@9 HOT 1
- Uncaught (in promise) SyntaxError: Must be called at the top of a `setup` function
- Keys containing __proto__ are handled inconsistently
- Keys containing 'toString' may have surprising results
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-i18n.