CODEWITHSUNDEEP
vue.jsvuejs2
KevinHu
KevinHu

Reputation: 1029

vue i18n - using it as a javascript object (not inside the template)?

Is it possible to use vue, vue-i18n only with javascript (as an object), not in the template ?

I want to use it in something like window.confirm, is that possible ?

Thanks.

Upvotes: 10

Views: 13197

Answers (3)

Chinthaka Dinadasa
Chinthaka Dinadasa

Reputation: 3471

Yes, Import i18n.js configuration file where you need to get 18n values, (Where you've configured i18n With Vue.js project)

import i18n from '@/plugins/i18n'

Using @ to get a path from the root.

Then

Attach values with 

i18n.t('salesOrder'),

Upvotes: 1

Ramy Tamer
Ramy Tamer

Reputation: 640

Using inside a component for Version 6.x or Later:

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

Or 

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

For version 5.x:

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

Source: https://github.com/kazupon/vue-i18n/issues/149#issuecomment-300096155

Upvotes: 2

Gerardo Rosciano
Gerardo Rosciano

Reputation: 901

yes it's possible, i never used the plugin, but it looks pretty straightforward:

first you create the instance:

// Ready translated locale messages
const messages = {
  en: {
    message: {
      greeting: 'hi {name}'
    }
  },
  es: {
    message: {
      greeting: 'hola {name}'
    }
  }
}

// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: 'es', // set locale
  messages, // set locale messages
})

(be aware 'const' is es6)

Then you can use it in any js where i18n var exists:

i18n.t('greeting', { name: 'kazupon' }) // -> hola kazupon

Doc:

http://kazupon.github.io/vue-i18n/en/started.html

http://kazupon.github.io/vue-i18n/en/migrations.html

Upvotes: 7

Related Questions