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

Tips for sending <p> data to a router function with HTML

Implementing a nested ng-repeat for organizing limited data

Guidelines for incorporating role-based permissions in a React application

refusing to display the pop-up in a separate window

Dynamic Website (Link Relationships / Responsive Design / Content Rendering with CSS and HTML)

Having issues with JavaScript and MySQL data retrieval following XMLHttp update to the database

How to navigate to the next page in Vue form submission in Laravel

Slick slider issue: Unexpected TypeError - the slick method is undefined for o[i]

Toggle jQuery to hide a div and update its CSS styling

Having trouble dividing an HTML file?

Tips for resolving the issue of Vue 3 router with multiple calls to next()

Utilizing NextJS to retrieve cookie data within React components

Dynamically taking input in Vue JS while using v-for loop

Tips for properly formatting functional Vue components?

Angular 8 fails to retain data upon page refresh

What is the best way to merge setInterval with mouseenter events?

Having trouble sending values via POST request in Node.js using Express

Creating a step wizard form with ReactJs can be accomplished by breaking down the form into

What is the best way to showcase the information of each object on a click event in Vue.js?

I am facing an issue where the module pattern functions perfectly on JSBin, but fails to work properly