Vue-i18n: Using vue-i18n with json files instead

[bonchevski]

Hello, so I am about to start using the plugin ,however I failed finding examples or pointers on how to utilize .json Files. The gist of it is this:
I have 7 .json files - all in different languages(translations of one another) which i need to switch between in my app (basically in Vuex , within the store mutations ,actions etc)
The folder structure is standart and I have created a
-- translations[folder]
--example.json[files]
I can't figure out how to point to these files to get my translations from them , a basic example would probably get me going , thank you in advance! Sorry for the inconvenience I may cause.
Yours truly,

[kimuraz]

Something like this: https://github.com/kimuraz/vue-i18n-json ?

[bonchevski]

@kimuraz Not exactly... I think , cause I have 7 json files that need to be switched between using vuex mutations and cases for each language. I attempted a couple of times to fetch(),axios.get() the folder containing those files , although I might be completely wrong in my approach.
The basic Idea is to switch between the jsons for each translation using state and functions within the store that call the change of state and commit it (action,mutations) etc. That's why I was thinking that calling it somehow with fetch,axios etc and storing the resp.data of each to the state would be optimal for those needs...

[dekadentno]

If I understood correctly, you want something like this:
Two json files for two different languages:

// en.json
{
    "hello": "Hello"
}

```javascript
// de.json
{
"hello": "Guten tag"
}

In the same folder, you can add an index.js file:
```javascript
// index.js
import en from './en.json'
import hr from './de.json'

export const defaultLocale = 'en'

export const languages = {
  en: en,
  de: de,
}

After that, in your main.js file you should do this:

// main.js
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

import { languages } from './i18n/index.js'
import { defaultLocale } from './i18n/index.js'
const messages = Object.assign(languages)

Vue.config.productionTip = false

var i18n = new VueI18n({
  locale: defaultLocale,
  fallbackLocale: 'de',
  messages
})

...
// don't forget to pass i18n to the Vue instance
new Vue({
  router,
  i18n,
  render: (h) => h(App),
}).$mount('#app')

[bonchevski]

If I understood correctly, you want something like this:
Two json files for two different languages:

// en.json
{
    "hello": "Hello"
}

// de.json
{
    "hello": "Guten tag"
}

In the same folder, you can add an index.js file:

// index.js
import en from './en.json'
import hr from './de.json'

export const defaultLocale = 'en'

export const languages = {
  en: en,
  de: de,
}

After that, in your main.js file you should do this:

// main.js
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

import { languages } from './i18n/index.js'
import { defaultLocale } from './i18n/index.js'
const messages = Object.assign(languages)

Vue.config.productionTip = false

var i18n = new VueI18n({
  locale: defaultLocale,
  fallbackLocale: 'de',
  messages
})

...
// don't forget to pass i18n to the Vue instance
new Vue({
  router,
  i18n,
  render: (h) => h(App),
}).$mount('#app')

Actally the json file looks like this
{
library : {
"hello": "Hello from library"
},
documents: {
"hello": "Hello from documents"
}
i can't $t(documents.hello)

[dekadentno]

@bonchevski I think that's not a valid json file. Try it like this:

{
   "library":{
      "hello":"Hello from library"
   },
   "documents":{
      "hello":"Hello from documents"
   }
}

[MaTToX3]

If I understood correctly, you want something like this:
Two json files for two different languages:

// en.json
{
    "hello": "Hello"
}

// de.json
{
    "hello": "Guten tag"
}

In the same folder, you can add an index.js file:

// index.js
import en from './en.json'
import hr from './de.json'

export const defaultLocale = 'en'

export const languages = {
  en: en,
  de: de,
}

After that, in your main.js file you should do this:

// main.js
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

import { languages } from './i18n/index.js'
import { defaultLocale } from './i18n/index.js'
const messages = Object.assign(languages)

Vue.config.productionTip = false

var i18n = new VueI18n({
  locale: defaultLocale,
  fallbackLocale: 'de',
  messages
})

...
// don't forget to pass i18n to the Vue instance
new Vue({
  router,
  i18n,
  render: (h) => h(App),
}).$mount('#app')

Exactly what I was looking for - works great paired together with .json files that are part of Laravel application!

[ghost]

From my perspective better create default locale folder near assets and in those folder store localization files. I mean it's better for developer and who will work with those files.

For big projects rather difficult to manage big files with localization and for that store files in pages folder. For now i don't know complexity of this but in vue files
```
vueI18n: {
messages: {

``` and manage in big projects it's something like pain

├── assets
├── locales
| ├── en.json
| └── de.json
├── pages
| ├── Home
| | ├── Home.vue
| | ├── locales
| | └── └── en.json
└── └── about.vue

In Nuxt strict structure for components and pages so for locales also will be good.

Any ideas?

Thanks

[aditig492]

+1

[ZtheLeader]

From my perspective better create default locale folder near assets and in those folder store localization files. I mean it's better for developer and who will work with those files.

For big projects rather difficult to manage big files with localization and for that store files in pages folder. For now i don't know complexity of this but in vue files

vueI18n: {
        messages: {

``` and manage in big projects it's something like pain

├── assets
├── locales
|   ├── en.json
|   └── de.json
├── pages
|   ├── Home
|   |  ├── Home.vue
|   |  ├── locales
|   |  └──  └── en.json
└── └── about.vue

In Nuxt strict structure for components and pages so for locales also will be good.

Any ideas? 

Thanks

@uharbachou Hi I am trying to implement similar structure for my i18n files. But my translations from the component folders are not being fetched. Can you help me on it ? Did you make some changes in default i18n.js file ?

[Sendoo]

@ZtheLeader +1
And me interesting, how to realize this structure?

[ZtheLeader]

@Sendoo I found out the solution. You just give src to your separate i18n.json file. Like

<i18n src="source-to-your-file"></i18n>

For more info: http://kazupon.github.io/vue-i18n/guide/sfc.html#multiple-custom-blocks

[stefandevo]

// main.js
 import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

import { languages } from './i18n/index.js'
import { defaultLocale } from './i18n/index.js'
const messages = Object.assign(languages)

The Object.assign does not work on IE. Can I replace it with something else?

[dekadentno]

// main.js
 import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

import { languages } from './i18n/index.js'
import { defaultLocale } from './i18n/index.js'
const messages = Object.assign(languages)

The Object.assign does not work on IE. Can I replace it with something else?

https://stackoverflow.com/questions/42091600/how-to-merge-object-in-ie-11

[peterver]

// main.js
 import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

import { languages } from './i18n/index.js'
import { defaultLocale } from './i18n/index.js'
const messages = Object.assign(languages)

The Object.assign does not work on IE. Can I replace it with something else?

https://stackoverflow.com/questions/42091600/how-to-merge-object-in-ie-11

Or add a polyfill and make your code futureproof : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Polyfill

Personally I use polyfill.io in most of my projects as it polyfills based on the browser's needs : https://polyfill.io/v3/