How do you structure `en.js` or `ja.js` files for lazy loading in vue-i18n?

Question

How do you structure `en.js` or `ja.js` files for lazy loading in vue-i18n?

What is the correct format for lazy loading en.js or ja.js? The code below is not working:

// en.js
export default
    {
        title: 'Title',
        greeting: 'How are you'
    };

and

import Vue from 'vue';
import InventoryList from "./components/InventoryList";
import VueI18n from 'vue-i18n';
import messages from 'lang/fa';

Vue.use(VueI18n);

const i18n = new VueI18n({
    locale: 'en',
    fallbackLocale: 'en',
    messages
});

Vue.component('inventory-list', InventoryList);

const app = new Vue({
    i18n,
    el: '#app',
});

Could you please advise on the correct approach?

javascript json vue.js vue-i18n

Answer 1

Answer №1

To properly set up your VueI18n instance, make sure you import all language files and assign them to the appropriate key in the initialization call.

Here's an example of how to do it:

import french from './lang/french' // relative path
import spanish from './lang/spanish' // relative path
...
const i18n = new VueI18n({
 locale: 'en',
 fallbackLocale: 'en',
 messages: {
  english,
  french,
  spanish
 }
});

Answer 2

To properly set up your VueI18n instance, make sure you import all language files and assign them to the appropriate key in the initialization call.

Here's an example of how to do it:

import french from './lang/french' // relative path
import spanish from './lang/spanish' // relative path
...
const i18n = new VueI18n({
 locale: 'en',
 fallbackLocale: 'en',
 messages: {
  english,
  french,
  spanish
 }
});

How do you structure `en.js` or `ja.js` files for lazy loading in vue-i18n?

Answer №1

Similar questions

The onChange method in React is failing to execute within the component

Activate a function when the v-data-table in Vuetify is expanded and then collapsed

The JavaScript creates a select box, but the value does not get sent when the form is submitted

Is implementing a proxy middleware recommended for production use?

Error! The function worker.recognize(...).progress is throwing an error. Any ideas on how to resolve this

I am experiencing difficulties with displaying my array of JSX elements in the render function of my ReactJS application. What could be

AngularJS Login Popup with SpringSecurity

Asynchronous Task paired with JSON, the onSuccess method fails to provide any returns

Only the initial AJAX request is successful, while subsequent requests fail to execute

Utilizing Vue and Nuxt to Filter JSON Data by Category using Content Api

Displaying a Next.js component depending on the environment setting

Is there a way to asynchronously load image src URLs in Vue.js?

The website is failing to extend and reveal content that is being concealed by jQuery

Attempting to transmit information using Ajax to an object-oriented programming (OOP) class

What steps can I take to resolve the issue of JSON data not displaying in my UITableView?

Exit the loop when a certain condition is satisfied within a separate loop while using SCRAPY

Encountering a Vue warning while attempting to perform semantic binding in Vue.js

Determine the number of JavaScript functions present on a webpage using JavaScript

Guide to automatically inserting text into an html form and submitting it without manual intervention

Building a Loading Bar with Two Images Using JavaScript and CSS