-
-
Notifications
You must be signed in to change notification settings - Fork 861
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How can i use vue-i18n in '.js' file, I have use it in Vue template and it works. #149
Comments
this.$t('COMMON.LOGIN') |
same here :( , |
I have found a way but it's so fucking ugly, The only thing that i did was this when the app is mounted call my "provider"
i said ugly because i had to pass whole context, which i think it's a bad practice but for the moment it saves me. |
You can use the below APIs
this.$i18n.t('path', 'en', { foo: 'bar' }) See details:
Vue.t('path', 'en', { foo: 'bar' }) See details: |
I tried to use to set metas on component:
But don't work, the page don't load with this |
try |
Following the vue-meta documentation , it says: "Easy. Instead of defining metaInfo as an object, define it as a function and access this as usual" This is an example working for me:
|
@3ss0 I tried your method but still not working, the @verizecom method work like charm, seems a vue-meta stuff and not related with vue-i18n. Sorry for the inconvenients and thanks to both for help me to solve it ^^ |
@verizecom Thank you for the solution. However, I didn't find a way to make it work with a Nuxt static generation. I used the @kazupon example with SSR.
https://github.com/kazupon/vue-i18n/tree/dev/examples/ssr/nuxt |
I found a 'elegant' solution first you need a file lang.js like this import Vue from 'vue'
import VueI18n from 'vue-i18n'
import { ptBR } from './ptBR'
Vue.use(VueI18n)
// Create VueI18n instance with options
export const i18n = new VueI18n({
locale: 'pt-BR', // set locale
messages: {
'pt-BR': ptBR
}
})
then you need to import it inside your js file and use the tc ou t method in your js code import { i18n } from './language/lang'
export default {
items: [
{
name: 'Home',
url: '/dashboard',
icon: 'icon-speedometer'
},
{
name: i18n.tc('general.constructions'),` |
@anselmobattisti Looks like the preferred solution to me, since import order does not matter then and things are nicely separated, well done 👍 |
@anselmobattisti Hey that is awesome!! I could easily follow your solution and get it done in a second! |
You can also simply use // router.js
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export const router = new VueRouter() // non-template file
import { router } from './router'
router.app.$t('foo') |
@anselmobattisti However, it cannot work when I use a language switch button to change the locale value in lang.js file, I mean, the data on the webpage cannot be internationalized automatically, only if I re-render the whole page(component). Can you give me some advice? Thanks!!! |
@anselmobattisti - well done! Thanks a lot! |
@WillieYang - I have the same problem, this solution isn't reactive.. |
@ThinkerBell1 I haven't found the solution yet, and I am still trying to find a way to resolve it, but if it |
@WillieYang - thanx, that was also what i did at the end.. |
This work for me use to translate vue-chartjs to camboidia language by call: this.$i18n.t('label.months')
|
My idea is to provide key of i18n in javascript file only, then using $t() inside vue file. Something like this:
Vue file: You can use:
Vue file: Then it will be reactive |
@WillieYang and @ThinkerBell1, i faced the same issue of reactivity. The work around i came up with was to change my js file into a function that returns the object following @anselmobattisti's solution. Then in my template, i bound the function to a computed property and used the computed property instead and the language button worked. Hope it helps someone facing the the same problem |
@anselmobattisti answer works like a charm. And this is how I did based on his answer. (If you coded i18n code in main.js (the main.js is entry point which is load Vue and App.vue then initialize application))
And t() method works in pure js. Hope it is helpful to someone! |
@duykhanhrc Thanks for the tip! Form.vue: import { sensibleCharLength } from "~/shared/validationRules";
get nameRules() {
return this.buildValidationRules([sensibleCharLength]);
}
buildValidationRules(rules: Rule[]) {
return rules.map(this.generateRule);
}
generateRule(rule: Rule) {
return (value: string | number | boolean) =>
rule.passCondition(value) || this.$t(rule.failureMsgKey);
} In validationRules.ts: export const sensibleCharLength = {
passCondition: (value: string) => {
const MAX_LENGTH = 50;
return value.length < MAX_LENGTH;
},
failureMsgKey: 'validations.tooMany'
}; |
You have to import 'i18n' in your component.
|
It works, but why directly call this.$i18n.t('xxx') not work? |
@wilsonwu |
let messages = {
en: {
...enLocale,
...elementEnLocale
},
zh: {
...zhLocale,
...elementZhLocale
}
}
const i18n = new VueI18n({
locale: "en",
// set locale messages
messages
})
export function changeLanguage(lang) {
try {
i18n.locale = lang
} catch (e) {
console.log("Error while change language to <{}> : {error}".params(lang, e.message))
}
}
changeLanguage("zh") |
Won't this make new instance of i18n for every imports? Let's say I have 20 js files, then it will create 20 new instances...? |
import i18n from "@/i18n"; |
I did the same, but I want to translate the error message received from an API, it didn't work for this. Can anyone help on this |
This approach works for me like a charm - I use this statement inside a store action:
Found in the Vue forum here: https://forum.vuejs.org/t/how-to-use-t-from-vue-i18n-inside-vuex-action/22146/3 |
use ()=>string instead string,data can't be reactive, but function can.
|
Syntax has changed from v8 to v9. Thanks @codelegant!
|
@SimonHawesome just saved my life, thanks for the recent update! |
Thanks a lot!! |
|
I have use vue-i18n in template, and it works. but now I also need it can work in js , I have read a issue about <Use $t function outside template enhancement>, i don't know how to config that.
thanks.
The text was updated successfully, but these errors were encountered: