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 π
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 meBTC
bc1qgw9a8hyqqwvcls9ln7vhql4mad0qkveutr2td7
ETH
0x3A720717Da03dB6f3c4a4Ff08BC64100205A79d0
2025 © My Dynamic Production SRL All rights Reserved.