Nuxt: How to Load Translations from the BackEnd with an API

profile picture

Nuxt: How to Load Translations from the BackEnd with an API

In this quick tutorial we will see how we can use, in a Nuxt FrontEnd project, the translations that are store in a backend project.

In your nuxt project you will want to fetch the nuxt-i18n package:

yarn add nuxt-i18n

In nuxt.config.js add the following configuration

i18n: {
    locales: [
        {
            code: 'raw'
        },
        {
            code: 'de',
            file: 'de.js'
        },
        {
            code: 'fr',
            file: 'fr.js'
        },
        {
            code: 'nl',
            file: 'nl.js'
        }
    ],
    defaultLocale: 'fr',
    strategy: 'no_prefix',
    lazy: true,
    langDir: 'lang/'
},

Every language has its own file where we will execute an API call to our backend.

Let's create lang/fr.js and put this code inside:

export default async (context, locale) => {
    const axios = require('axios').default

    return await new Promise((resolve) => {
        axios.get(context.env.API_URL + '/translations')
            .then((response) => {
                resolve(response.data)
            })
    })
}

context.env.API_URL means that we have stored the backend URL in our .env file

That's it ! When you reload your project you will see the api call to your backend translations endpoint ๐Ÿ‘Œ

locale
api
nuxt
backend
translations

about me

profile picture

I consider myself as an IT Business Artisan. Or Consultant CTO. I'm a self-taught Web Developper, coach and teacher. My main work is helping and guiding digital startups.

more about me

follow me

newsletter

A weekly email with the latests articles

support my work

Start trading on binance
  • BTC

    BTC

    18SY81ejLGFuJ9KMWQu5zPrDGuR5rDiauM

  • ETH

    ETH

    0x68e8c828b8ce670062a83199cd8f62667c792f23

  • Monero

    XMR

    895bSneY4eoZjsr2hN2CAALkUrMExHEV5Pbg8TJb6ejnMLN7js1gLAXQySqbSbfzjWHQpQhQpvFtojbkdZQZmM9qCFz7BXU

2021 My Dynamic Production SPRL All rights Reserved.