How can i use vue-i18n in '.js' file, I have use it in Vue template and it works. #149

pzuopin · 2017-04-20T06:58:02Z

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.

taotao365s · 2017-04-22T05:05:24Z

this.$t('COMMON.LOGIN')

blogui91 · 2017-04-29T02:45:47Z

same here :( ,
@shipengyan as @pzuopin said, the requiment is to call $t helper in js files, it means not inside a Vue component

blogui91 · 2017-04-29T03:44:04Z

I have found a way but it's so fucking ugly,
in my case as i want to create a handler for server responses i have a module that prints errors depending of the locale.

The only thing that i did was this when the app is mounted call my "provider"

let app = new Vue({
	store,
	i18n,
	el: '#q-app',
	router,
	mounted() {
		this.$nextTick(() => {
		  ResponseServiceProvider.handle(this)
		})
	},
	render: h => h(require('./App'))
	})

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.

kazupon · 2017-05-09T08:24:46Z

You can use the below APIs

v6.x or later: t method of VueI18n

  this.$i18n.t('path', 'en', { foo: 'bar' })

See details:
https://kazupon.github.io/vue-i18n/en/api.html

v5.x: Vue.t function

  Vue.t('path', 'en', { foo: 'bar' })

See details:
https://github.com/kazupon/vue-i18n/blob/5.x/gitbook/api.md

ShiraMiyuko · 2017-11-19T16:36:36Z

I tried to use to set metas on component:

metaInfo: {
  title: this.$i18n.t('blog'),
},

But don't work, the page don't load with this

3ss0 · 2017-11-21T12:42:39Z

try
metaInfo: {
title: this.$i18n.t('message.blog'),
},

verizecom · 2017-12-02T13:34:07Z

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:

export default {
    name: "Home",
    metaInfo() {
        return {
            title: this.$i18n.t('home.seo.title'),
            titleTemplate: '%s - ' + config.app_name,
            htmlAttrs: {
                lang: config.lang,
                amp: undefined
            }
        }
    }
}

https://github.com/declandewet/vue-meta#how-do-i-use-component-props-andor-component-data-in-metainfo

ShiraMiyuko · 2017-12-03T01:07:01Z

@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 ^^

lucpotage · 2017-12-05T10:33:24Z

@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.

export default {
  head () {
    return {
      title: this.$i18n.t('title.main')
    }
  }
}

https://github.com/kazupon/vue-i18n/tree/dev/examples/ssr/nuxt

anselmobattisti · 2018-01-13T18:27:47Z

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'),`

cb109 · 2018-03-28T09:02:37Z

@anselmobattisti Looks like the preferred solution to me, since import order does not matter then and things are nicely separated, well done 👍

hyunoosung · 2018-05-17T03:23:24Z

@anselmobattisti Hey that is awesome!! I could easily follow your solution and get it done in a second!
BTW I tried i18n.t first instead i18n.tc and it worked just fine. What's the difference between tc and t?

laurentpayot · 2018-05-18T09:33:16Z

You can also simply use router.app.$t

// 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')

WillieYang · 2018-06-19T09:25:30Z

@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!!!

joshua1988 · 2018-07-23T02:07:56Z

@anselmobattisti - well done! Thanks a lot!

ThinkerBell1 · 2018-07-23T10:59:52Z

@WillieYang - I have the same problem, this solution isn't reactive..
Have you found a solution for this??
(the other solutions above don't take into account we have pure .js files which aren't related to vue, and therefor don't have import of vue/vue-router, etc... )

WillieYang · 2018-07-24T09:02:35Z

@ThinkerBell1 I haven't found the solution yet, and I am still trying to find a way to resolve it, but if it
still cannot work ultimately, I would put all the data need to be internationalized into the corresponding component rather than into a single js file, it is the only way that I can think of now, sorry for not helping bro.

ThinkerBell1 · 2018-07-24T11:16:46Z

@WillieYang - thanx, that was also what i did at the end..

sensoeurn · 2018-12-27T02:37:18Z

This work for me use to translate vue-chartjs to camboidia language by call: this.$i18n.t('label.months')
in labels in vue-chartjs. look my picture here

methods: {
        initLineChart(){
	this.declaration_data = {
		labels  : this.$i18n.t('label.months'),
			datasets: [
						{
						label               : 'Electronics',
						backgroundColor		: '#e83e8c',
						fillColor           : 'rgba(210, 214, 222, .5)',
						strokeColor         : 'rgba(210, 214, 222, 1)',
						pointColor          : 'rgba(210, 214, 222, 1)',
						pointStrokeColor    : '#c1c7d1',
						pointHighlightFill  : '#fff',
						pointHighlightStroke: 'rgba(220,220,220,1)',
						data                : [65, 59, 80, 81, 56, 55, 40, 50, 48, 67, 67, 45]
						},
						{
						label               : 'Digital Goods',
						backgroundColor		: '#28a745',
						fillColor           : 'rgba(60,141,188,0.9)',
						strokeColor         : 'rgba(60,141,188,0.8)',
						pointColor          : '#3b8bba',
						pointStrokeColor    : 'rgba(60,141,188,1)',
						pointHighlightFill  : '#fff',
						pointHighlightStroke: 'rgba(60,141,188,1)',
						data                : [28, 48, 40, 19, 86, 27, 90, 40, 19, 86, 27, 90]
						}
					]
				}
		}
    }

duykhanhrc · 2019-02-12T01:21:13Z

@WillieYang / @ThinkerBell1

My idea is to provide key of i18n in javascript file only, then using $t() inside vue file.

Something like this:
Instead of:
JS file:

      name: i18n.tc('general.constructions')

Vue file:
{{name}}

You can use:
JS file:

      name: 'general.constructions'

Vue file:
{{$t(name)}}

Then it will be reactive

n05la3 · 2019-03-12T21:09:11Z

@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

SkynI25 · 2019-03-13T04:49:41Z

@anselmobattisti answer works like a charm. And this is how I did based on his answer.
I solved like this.

(If you coded i18n code in main.js (the main.js is entry point which is load Vue and App.vue then initialize application))

seperate i18n related codes in main.js and make a .js file (ex : i18n.js)
export i18n.js like this -> export default new VueI18n({..})
import i18n.js in pure js file.

And t() method works in pure js. Hope it is helpful to someone!

jonnyparris · 2019-09-11T15:26:38Z

@duykhanhrc Thanks for the tip!
If it helps anyone else, I was trying to share input validation rules between vuetify components and ended up with something like the following:

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'
};

ebubekirtabak · 2019-11-12T08:44:55Z

You have to import 'i18n' in your component.
For example:

<script>
import i18n from '@/i18n'

{
...
data: () => {
return {
 message: i18n.t('message'),
}
}
...
}

wilsonwu · 2020-02-29T18:25:33Z

You have to import 'i18n' in your component.
For example:
<script>
import i18n from '@/i18n'

{
...
data: () => {
return {
 message: i18n.t('message'),
}
}
...
}

It works, but why directly call this.$i18n.t('xxx') not work?

ebubekirtabak · 2020-03-01T18:13:06Z

@wilsonwu
Actually I don't know, maybe it was lazy loading.

jingyuLin1999 · 2020-05-22T01:24:27Z

elegant
How to change language? I did this, but it not work.

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

christhofer · 2020-08-07T09:28:56Z

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'),`

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...?

zhouhanxiaoxiao · 2020-08-31T08:33:29Z

import i18n from "@/i18n";

abhimatta · 2020-10-16T05:34:21Z

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'),`

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

alex-gru · 2020-12-16T10:58:21Z

This approach works for me like a charm - I use this statement inside a store action:

this.app.i18n.t("example.message.key")

Found in the Vue forum here: https://forum.vuejs.org/t/how-to-use-t-from-vue-i18n-inside-vuex-action/22146/3

codelegant · 2022-01-14T08:13:27Z

use ()=>string instead string，data can't be reactive, but function can.

const header = i18n.global.t('header'); // not work
const header = () =>  i18n.global.t('header');
header() // work, reactive

SimonHawesome · 2022-07-04T20:15:57Z

Syntax has changed from v8 to v9. Thanks @codelegant!

i18n.t('string') // v8
i18n.global.t('string') // v9

brennanleez-coder · 2022-07-12T08:44:40Z

@SimonHawesome just saved my life, thanks for the recent update!

jeancampregher · 2022-10-25T14:11:30Z

Syntax has changed from v8 to v9. Thanks @codelegant!
i18n.t('string') // v8
i18n.global.t('string') // v9

Thanks a lot!!

ahmedmohamedeid98 · 2023-07-12T15:19:24Z

import { useI18n } from 'vue-i18n';
const name = ref(useI118n().t('name'));

kazupon closed this as completed May 9, 2017

po5i mentioned this issue Feb 16, 2018

Use $t function outside template #17

Closed

laurentpayot mentioned this issue Jun 18, 2018

Using Vue.t() inside a state of Vuex #101

Closed

YoshiMannaert mentioned this issue Jan 11, 2019

How can I use $t in vue.js methods? martinlindhe/laravel-vue-i18n-generator#51

Closed

dzyubadmytro mentioned this issue Aug 1, 2019

Is there a way to get reactivity on the translations in script on language change? #673

Closed

chrismayer mentioned this issue May 2, 2024

Refactor VueI18n creation to own module wegue-oss/wegue#387

Merged

How can i use vue-i18n in '.js' file, I have use it in Vue template and it works. #149

How can i use vue-i18n in '.js' file, I have use it in Vue template and it works. #149

Comments

pzuopin commented Apr 20, 2017

taotao365s commented Apr 22, 2017 • edited Loading

blogui91 commented Apr 29, 2017

blogui91 commented Apr 29, 2017 • edited Loading

kazupon commented May 9, 2017

ShiraMiyuko commented Nov 19, 2017 • edited Loading

3ss0 commented Nov 21, 2017

verizecom commented Dec 2, 2017

ShiraMiyuko commented Dec 3, 2017

lucpotage commented Dec 5, 2017

anselmobattisti commented Jan 13, 2018 • edited Loading

cb109 commented Mar 28, 2018

hyunoosung commented May 17, 2018

laurentpayot commented May 18, 2018 • edited Loading

WillieYang commented Jun 19, 2018 • edited Loading

joshua1988 commented Jul 23, 2018

ThinkerBell1 commented Jul 23, 2018

WillieYang commented Jul 24, 2018

ThinkerBell1 commented Jul 24, 2018

sensoeurn commented Dec 27, 2018 • edited Loading

duykhanhrc commented Feb 12, 2019

n05la3 commented Mar 12, 2019

SkynI25 commented Mar 13, 2019

jonnyparris commented Sep 11, 2019

ebubekirtabak commented Nov 12, 2019 • edited Loading

wilsonwu commented Feb 29, 2020

ebubekirtabak commented Mar 1, 2020

jingyuLin1999 commented May 22, 2020

christhofer commented Aug 7, 2020

zhouhanxiaoxiao commented Aug 31, 2020

abhimatta commented Oct 16, 2020

alex-gru commented Dec 16, 2020

codelegant commented Jan 14, 2022

SimonHawesome commented Jul 4, 2022

brennanleez-coder commented Jul 12, 2022

jeancampregher commented Oct 25, 2022

ahmedmohamedeid98 commented Jul 12, 2023 • edited Loading

taotao365s commented Apr 22, 2017 •

edited

Loading

blogui91 commented Apr 29, 2017 •

edited

Loading

ShiraMiyuko commented Nov 19, 2017 •

edited

Loading

anselmobattisti commented Jan 13, 2018 •

edited

Loading

laurentpayot commented May 18, 2018 •

edited

Loading

WillieYang commented Jun 19, 2018 •

edited

Loading

sensoeurn commented Dec 27, 2018 •

edited

Loading

ebubekirtabak commented Nov 12, 2019 •

edited

Loading

ahmedmohamedeid98 commented Jul 12, 2023 •

edited

Loading