Internationalization with Vuetify
I'm trying to make an app with multiple languages.
I did what the documentation says but it does not work.
this my code.
window.Vue = require('vue');
import Vuetify from './Vuetify/vuetify';
import en from './Vuetify/Lang/en/en.ts';
import es from './Vuetify/Lang/es/es.ts';
Vue.use(Vuetify, {
lang: {
locales: {
es,
en,
},
current: 'es'
}
})
const app = new Vue({
el: '#app',
components: {
"vue-landing": require('./components/ExampleComponent.vue'),
},
created() {
this.$vuetify.lang.current = 'es'
},
}).$mount('#app');
In my component
<template>
<v-content>
{{ $vuetify.t('noDataText') }}
</v-content>
</template>
Everything compiles normal without errors, but it does not translate anything. the results are always what I write within the function.
In this case what appears is
noDataText
vue.js vuejs2 vuetify.js
edited Dec 4 '18 at 20:43
C-Jay
51214
asked Nov 23 '18 at 20:15
Alberto OrtegaAlberto Ortega
262
add a comment |
I'm trying to make an app with multiple languages.
I did what the documentation says but it does not work.
this my code.
window.Vue = require('vue');
import Vuetify from './Vuetify/vuetify';
import en from './Vuetify/Lang/en/en.ts';
import es from './Vuetify/Lang/es/es.ts';
Vue.use(Vuetify, {
lang: {
locales: {
es,
en,
},
current: 'es'
}
})
const app = new Vue({
el: '#app',
components: {
"vue-landing": require('./components/ExampleComponent.vue'),
},
created() {
this.$vuetify.lang.current = 'es'
},
}).$mount('#app');
In my component
<template>
<v-content>
{{ $vuetify.t('noDataText') }}
</v-content>
</template>
Everything compiles normal without errors, but it does not translate anything. the results are always what I write within the function.
In this case what appears is
noDataText
vue.js vuejs2 vuetify.js
edited Dec 4 '18 at 20:43
C-Jay
51214
asked Nov 23 '18 at 20:15
Alberto OrtegaAlberto Ortega
262
Does it work for you if you set the language to English?this.$vuetify.lang.current = 'en'
– C-Jay
Dec 4 '18 at 22:09
It does not work but use i18n outside the instance and it worked
– Alberto Ortega
Dec 5 '18 at 14:47
add a comment |
I'm trying to make an app with multiple languages.
I did what the documentation says but it does not work.
this my code.
window.Vue = require('vue');
import Vuetify from './Vuetify/vuetify';
import en from './Vuetify/Lang/en/en.ts';
import es from './Vuetify/Lang/es/es.ts';
Vue.use(Vuetify, {
lang: {
locales: {
es,
en,
},
current: 'es'
}
})
const app = new Vue({
el: '#app',
components: {
"vue-landing": require('./components/ExampleComponent.vue'),
},
created() {
this.$vuetify.lang.current = 'es'
},
}).$mount('#app');
In my component
<template>
<v-content>
{{ $vuetify.t('noDataText') }}
</v-content>
</template>
Everything compiles normal without errors, but it does not translate anything. the results are always what I write within the function.
In this case what appears is
noDataText
vue.js vuejs2 vuetify.js
edited Dec 4 '18 at 20:43
C-Jay
51214
asked Nov 23 '18 at 20:15
Alberto OrtegaAlberto Ortega
262
I'm trying to make an app with multiple languages.
I did what the documentation says but it does not work.
this my code.
window.Vue = require('vue');
import Vuetify from './Vuetify/vuetify';
import en from './Vuetify/Lang/en/en.ts';
import es from './Vuetify/Lang/es/es.ts';
Vue.use(Vuetify, {
lang: {
locales: {
es,
en,
},
current: 'es'
}
})
const app = new Vue({
el: '#app',
components: {
"vue-landing": require('./components/ExampleComponent.vue'),
},
created() {
this.$vuetify.lang.current = 'es'
},
}).$mount('#app');
In my component
<template>
<v-content>
{{ $vuetify.t('noDataText') }}
</v-content>
</template>
Everything compiles normal without errors, but it does not translate anything. the results are always what I write within the function.
In this case what appears is
noDataText
vue.js vuejs2 vuetify.js
vue.js vuejs2 vuetify.js
edited Dec 4 '18 at 20:43
C-Jay
51214
asked Nov 23 '18 at 20:15
Alberto OrtegaAlberto Ortega
262
edited Dec 4 '18 at 20:43
C-Jay
51214
asked Nov 23 '18 at 20:15
Alberto OrtegaAlberto Ortega
262
edited Dec 4 '18 at 20:43
C-Jay
51214
edited Dec 4 '18 at 20:43
C-Jay
51214
edited Dec 4 '18 at 20:43
C-Jay
51214
51214
asked Nov 23 '18 at 20:15
Alberto OrtegaAlberto Ortega
262
asked Nov 23 '18 at 20:15
Alberto OrtegaAlberto Ortega
262
asked Nov 23 '18 at 20:15
Alberto OrtegaAlberto Ortega
262
262
Does it work for you if you set the language to English?this.$vuetify.lang.current = 'en'
– C-Jay
Dec 4 '18 at 22:09
It does not work but use i18n outside the instance and it worked
– Alberto Ortega
Dec 5 '18 at 14:47
add a comment |
Does it work for you if you set the language to English?this.$vuetify.lang.current = 'en'
– C-Jay
Dec 4 '18 at 22:09
It does not work but use i18n outside the instance and it worked
– Alberto Ortega
Dec 5 '18 at 14:47
Does it work for you if you set the language to English?
this.$vuetify.lang.current = 'en'– C-Jay
Dec 4 '18 at 22:09
Does it work for you if you set the language to English?
this.$vuetify.lang.current = 'en'– C-Jay
Dec 4 '18 at 22:09
It does not work but use i18n outside the instance and it worked
– Alberto Ortega
Dec 5 '18 at 14:47
It does not work but use i18n outside the instance and it worked
– Alberto Ortega
Dec 5 '18 at 14:47
add a comment |
2 Answers
2
active
oldest
votes
I would suggest you to use vue-i18n instead of what are u trying to do. I am using vue at work for enterprise projects and I can suggest you to use it. Here you an check docs vue-i18n. I am happy to answer your other questions if you have any about vue and it's plugins.
answered Nov 23 '18 at 22:31
ali.turanali.turan
3671416
add a comment |
Not sure, which version of vuetify.js you are using, but Spanish locale was added, as per this issue, in version 1.4.0 which is not yet released, may be that is the issue.
Update:
There is an error in vuetify translation document as logged in this issue, change your template to:
<template>
<v-content>
{{ $vuetify.t('$vuetify.noDataText') }}
</v-content>
</template>
and it will fix your issue.
Online demo.
answered Dec 4 '18 at 20:17
Dipen ShahDipen Shah
7,18011529
ok you're right about that but english doesn't work either.
– C-Jay
Dec 5 '18 at 21:43
@C-Jay do you see any error in the console? Do you have definednoDataTextkey in default exported object in fileen.ts?
– Dipen Shah
Dec 5 '18 at 21:57
No error. Theen.tsis the same as described here: Vuetify internationalization
– C-Jay
Dec 5 '18 at 22:22
@C-Jay See updates.
– Dipen Shah
Dec 6 '18 at 4:23
Wonderful, it works! @ali.turan you should mark this solution as correct.
– C-Jay
Dec 6 '18 at 10:58
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53452496%2finternationalization-with-vuetify%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
I would suggest you to use vue-i18n instead of what are u trying to do. I am using vue at work for enterprise projects and I can suggest you to use it. Here you an check docs vue-i18n. I am happy to answer your other questions if you have any about vue and it's plugins.
answered Nov 23 '18 at 22:31
ali.turanali.turan
3671416
add a comment |
I would suggest you to use vue-i18n instead of what are u trying to do. I am using vue at work for enterprise projects and I can suggest you to use it. Here you an check docs vue-i18n. I am happy to answer your other questions if you have any about vue and it's plugins.
answered Nov 23 '18 at 22:31
ali.turanali.turan
3671416
add a comment |
I would suggest you to use vue-i18n instead of what are u trying to do. I am using vue at work for enterprise projects and I can suggest you to use it. Here you an check docs vue-i18n. I am happy to answer your other questions if you have any about vue and it's plugins.
answered Nov 23 '18 at 22:31
ali.turanali.turan
3671416
I would suggest you to use vue-i18n instead of what are u trying to do. I am using vue at work for enterprise projects and I can suggest you to use it. Here you an check docs vue-i18n. I am happy to answer your other questions if you have any about vue and it's plugins.
answered Nov 23 '18 at 22:31
ali.turanali.turan
3671416
answered Nov 23 '18 at 22:31
ali.turanali.turan
3671416
answered Nov 23 '18 at 22:31
ali.turanali.turan
3671416
answered Nov 23 '18 at 22:31
ali.turanali.turan
3671416
3671416
add a comment |
add a comment |
Not sure, which version of vuetify.js you are using, but Spanish locale was added, as per this issue, in version 1.4.0 which is not yet released, may be that is the issue.
Update:
There is an error in vuetify translation document as logged in this issue, change your template to:
<template>
<v-content>
{{ $vuetify.t('$vuetify.noDataText') }}
</v-content>
</template>
and it will fix your issue.
Online demo.
answered Dec 4 '18 at 20:17
Dipen ShahDipen Shah
7,18011529
ok you're right about that but english doesn't work either.
– C-Jay
Dec 5 '18 at 21:43
@C-Jay do you see any error in the console? Do you have definednoDataTextkey in default exported object in fileen.ts?
– Dipen Shah
Dec 5 '18 at 21:57
No error. Theen.tsis the same as described here: Vuetify internationalization
– C-Jay
Dec 5 '18 at 22:22
@C-Jay See updates.
– Dipen Shah
Dec 6 '18 at 4:23
Wonderful, it works! @ali.turan you should mark this solution as correct.
– C-Jay
Dec 6 '18 at 10:58
add a comment |
Not sure, which version of vuetify.js you are using, but Spanish locale was added, as per this issue, in version 1.4.0 which is not yet released, may be that is the issue.
Update:
There is an error in vuetify translation document as logged in this issue, change your template to:
<template>
<v-content>
{{ $vuetify.t('$vuetify.noDataText') }}
</v-content>
</template>
and it will fix your issue.
Online demo.
answered Dec 4 '18 at 20:17
Dipen ShahDipen Shah
7,18011529
ok you're right about that but english doesn't work either.
– C-Jay
Dec 5 '18 at 21:43
@C-Jay do you see any error in the console? Do you have definednoDataTextkey in default exported object in fileen.ts?
– Dipen Shah
Dec 5 '18 at 21:57
No error. Theen.tsis the same as described here: Vuetify internationalization
– C-Jay
Dec 5 '18 at 22:22
@C-Jay See updates.
– Dipen Shah
Dec 6 '18 at 4:23
Wonderful, it works! @ali.turan you should mark this solution as correct.
– C-Jay
Dec 6 '18 at 10:58
add a comment |
Not sure, which version of vuetify.js you are using, but Spanish locale was added, as per this issue, in version 1.4.0 which is not yet released, may be that is the issue.
Update:
There is an error in vuetify translation document as logged in this issue, change your template to:
<template>
<v-content>
{{ $vuetify.t('$vuetify.noDataText') }}
</v-content>
</template>
and it will fix your issue.
Online demo.
answered Dec 4 '18 at 20:17
Dipen ShahDipen Shah
7,18011529
Not sure, which version of vuetify.js you are using, but Spanish locale was added, as per this issue, in version 1.4.0 which is not yet released, may be that is the issue.
Update:
There is an error in vuetify translation document as logged in this issue, change your template to:
<template>
<v-content>
{{ $vuetify.t('$vuetify.noDataText') }}
</v-content>
</template>
and it will fix your issue.
Online demo.
answered Dec 4 '18 at 20:17
Dipen ShahDipen Shah
7,18011529
edited Dec 6 '18 at 4:32
answered Dec 4 '18 at 20:17
Dipen ShahDipen Shah
7,18011529
answered Dec 4 '18 at 20:17
Dipen ShahDipen Shah
7,18011529
answered Dec 4 '18 at 20:17
Dipen ShahDipen Shah
7,18011529
7,18011529
ok you're right about that but english doesn't work either.
– C-Jay
Dec 5 '18 at 21:43
@C-Jay do you see any error in the console? Do you have definednoDataTextkey in default exported object in fileen.ts?
– Dipen Shah
Dec 5 '18 at 21:57
No error. Theen.tsis the same as described here: Vuetify internationalization
– C-Jay
Dec 5 '18 at 22:22
@C-Jay See updates.
– Dipen Shah
Dec 6 '18 at 4:23
Wonderful, it works! @ali.turan you should mark this solution as correct.
– C-Jay
Dec 6 '18 at 10:58
add a comment |
ok you're right about that but english doesn't work either.
– C-Jay
Dec 5 '18 at 21:43
@C-Jay do you see any error in the console? Do you have definednoDataTextkey in default exported object in fileen.ts?
– Dipen Shah
Dec 5 '18 at 21:57
No error. Theen.tsis the same as described here: Vuetify internationalization
– C-Jay
Dec 5 '18 at 22:22
@C-Jay See updates.
– Dipen Shah
Dec 6 '18 at 4:23
Wonderful, it works! @ali.turan you should mark this solution as correct.
– C-Jay
Dec 6 '18 at 10:58
ok you're right about that but english doesn't work either.
– C-Jay
Dec 5 '18 at 21:43
ok you're right about that but english doesn't work either.
– C-Jay
Dec 5 '18 at 21:43
@C-Jay do you see any error in the console? Do you have defined
noDataText key in default exported object in file en.ts?– Dipen Shah
Dec 5 '18 at 21:57
@C-Jay do you see any error in the console? Do you have defined
noDataText key in default exported object in file en.ts?– Dipen Shah
Dec 5 '18 at 21:57
No error. The
en.ts is the same as described here: Vuetify internationalization– C-Jay
Dec 5 '18 at 22:22
No error. The
en.ts is the same as described here: Vuetify internationalization– C-Jay
Dec 5 '18 at 22:22
@C-Jay See updates.
– Dipen Shah
Dec 6 '18 at 4:23
@C-Jay See updates.
– Dipen Shah
Dec 6 '18 at 4:23
Wonderful, it works! @ali.turan you should mark this solution as correct.
– C-Jay
Dec 6 '18 at 10:58
Wonderful, it works! @ali.turan you should mark this solution as correct.
– C-Jay
Dec 6 '18 at 10:58
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53452496%2finternationalization-with-vuetify%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Does it work for you if you set the language to English?
this.$vuetify.lang.current = 'en'– C-Jay
Dec 4 '18 at 22:09
It does not work but use i18n outside the instance and it worked
– Alberto Ortega
Dec 5 '18 at 14:47