Fetching locales asynchronously in nuxt.js using i18n and axios: A step-by-step guide

Question

Fetching locales asynchronously in nuxt.js using i18n and axios: A step-by-step guide

I am facing an issue with getting the location asynchronously. Whenever I try to implement my code, it results in a "Maximum call stack size exceeded" error. How can I resolve this issue?

Previously, I attempted to retrieve the location by using the axios command within the messages object.

~/plugins/i18n.js

import Vue from "vue";
import VueI18n from "vue-i18n";
import axios from 'axios';

Vue.use(VueI18n);

export default async ({ app, store }) => {
    app.i18n = new VueI18n({
    locale: 'fr',
    fallbackLocale: 'en',
    messages: {
        en: await axios.get('https://some-api/en/locale'),
        fr: await axios.get('https://some-api/fr/locale')
    }
});

}

My goal is to fetch my locales asynchronously before the page gets rendered.

javascript vue.js vuejs2 axios nuxt.js

Answer 1

Answer №1

If you want to fetch and set locale messages before creating a Vue instance, you can use the beforeCreate hook like this:

const localization = new VueLocalization();
new Vue({
  el: appElement,
  localization,
  beforeCreate() {
    const vueInstance = this;
    fetch(url)
      .then((res) => {
        vueInstance.$localization.setLocaleMessage('en', res.data);
    });
  }
});

Answer 2

If you want to fetch and set locale messages before creating a Vue instance, you can use the beforeCreate hook like this:

const localization = new VueLocalization();
new Vue({
  el: appElement,
  localization,
  beforeCreate() {
    const vueInstance = this;
    fetch(url)
      .then((res) => {
        vueInstance.$localization.setLocaleMessage('en', res.data);
    });
  }
});

Answer 3

Answer №2

To implement middleware, refer to: https://nuxtjs.org/api/pages-middleware#the-middleware-property

You can also retrieve data using axios from the module in the store and invoke it within nuxtServerInit:

export default actions {
async nuxtServerInit({dispatch}){
  await dispatch('apicallmodule/apicallAction')
}

Answer 4

To implement middleware, refer to: https://nuxtjs.org/api/pages-middleware#the-middleware-property

You can also retrieve data using axios from the module in the store and invoke it within nuxtServerInit:

export default actions {
async nuxtServerInit({dispatch}){
  await dispatch('apicallmodule/apicallAction')
}

Fetching locales asynchronously in nuxt.js using i18n and axios: A step-by-step guide

Answer №1

Answer №2

Similar questions

Exploring Symfony2 controller integration with Javascript arguments

Include a selection of images within a popover box

Displaying components in a loop and utilizing the index in the child component's method (VueJS)

Encountering Axios 404 error while trying to access the routes directory

utilize JavaScript on every element that has a specific identifier

Is there a way to establish a connection with a secondary Firestore database in Node.js, allowing for the use of multiple Firestore databases

Optimizing the file size of a Laravel app.js post Vuetify installation to reduce its

Retrieve an item from a MongoDB database using Mongoose

Renovating code structure in JavaScript

Tips for effectively utilizing the display: inline property in conjunction with ng-repeat

You can disregard the first option in a multiple select box using jQuery

Gauging Screen Size: A Comparison between Media Queries and JavaScript for Adjusting Div Position

Endless AngularJS loop using ng-view

Dealing with JSON can sometimes create a challenge when working with the shape of React state, specifically when encountering

Error: NgFor can only be used to bind to data structures that are iterable, such as Arrays. JSON arrays are

Is there a way for my code to detect when a function and a timeout are in progress?

Using JavaScript to generate dynamic folders in Alfresco is not functioning as expected

Repeated module imports

Persisted state in Vuex fails to retain data after the page is refreshed

Display complete information of the selected list in a modal window by clicking on it in PHP Yii