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.
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.
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.
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.
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.
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
})
}
})
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With