Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Nuxt-i18n: how to load messages asynchronously?

I am building a multilingual Nuxt web app.
Using this example from the official documentation (Codepen link), I no longer want to use local JSON files where my translations are saved to work as defined in the code below:

messages: {
      'en': require('~/locales/en.json'), # I want to get this asynchronously from an HTTP URL
      'fr': require('~/locales/fr.json') # I want to get this asynchronously from an HTTP URL
    }

I wonder what available alternatives to set asynchronously en and fr values by reading the JSON data from a URL instead?

plugins/i18n.js:

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

export default ({ app, store }) => {
  // Set i18n instance on app
  // This way we can use it in middleware and pages asyncData/fetch
  app.i18n = new VueI18n({
    locale: store.state.locale,
    fallbackLocale: 'en',
    messages: {
      'en': require('~/locales/en.json'), # How to get this asynchronously?
      'fr': require('~/locales/fr.json') # # How to get this asynchronously?
    }
  })

  app.i18n.path = (link) => {
    if (app.i18n.locale === app.i18n.fallbackLocale) {
      return `/${link}`
    }

    return `/${app.i18n.locale}/${link}`
  }
}

What I tried:

messages: {
      'en': axios.get(url).then((res) => {        
         return res.data
        } ),
      'fr': require('~/locales/fr.json')
    }

Where url points to the /locals/en.json file which is hosted on my Github profile.

like image 778
Billal Begueradj Avatar asked Oct 02 '18 07:10

Billal Begueradj


People also ask

What is internationalization with nuxt JS?

Search engine optimization (SEO) is a great way to reach more people organically and conquer new markets. Nuxt, a popular JavaScript framework, can significantly help your application rank better on Google. This tutorial will walk you through the internationalization process with Nuxt.js from start to finish.

What is nuxt and how can it help your application rank better?

Nuxt, a popular JavaScript framework, can significantly help your application rank better on Google. This tutorial will walk you through the internationalization process with Nuxt.js from start to finish. Search engine optimization (SEO) is a core element of a strong global growth strategy.

How do I run a nuxt application on localhost?

After the installation is complete, navigate to the project directory and run the application: Open http://localhost:3000/ in your browser and you’ll see the default application page. In this tutorial, we’ll use a library called nuxt-i18n, based on vue-i18n, with some Nuxt-specific localization options.

Does localazy work with nuxt projects?

Localazy is fully ready to support your multilingual Nuxt projects. Learn how to get started, and enjoy seamless integration and localization automation with the Nuxt internationalization library and Localazy. If you don't have an existing Nuxt project, you may easily create one by following their installation documentation.


1 Answers

You can use axios with await directly in the constructor:

export default async ({ app, store }) => {
  app.i18n = new VueI18n({ //construction a new VueI18n
    locale: store.state.i18n.locale,
    fallbackLocale: 'de',
    messages: {
      'de': await axios.get('http://localhost:3000/lang/de.json').then((res) => {
        return res.data
      }),
      'en': await axios.get('http://localhost:3000/lang/en.json').then((res) => {
        return res.data
      })
    }
  })
}
like image 110
lighthoue-js Avatar answered Sep 19 '22 08:09

lighthoue-js