Sometimes we build apps and think only about the English speaking users. But there are different language speaking users who might want to use your app because itās really good, but the language becomes a barrier.
Today letās explore the option of adding different languages to your Nuxt.js app.
vue-i8n
with the following commandnpm install vue-i8n
// or
yarn add vue-i8n
plugins/i8n.js
and add the following initial setup for i8n.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'),
// ---- Your other languages ----
// 'hi': require('~/locales/hindi.json'),
// 'mal': require('~/locales/malayalam.json'),
// 'tam': require('~/locales/tamil.json')
},
});
app.i18n.path = (link) => {
if (app.i18n.locale === app.i18n.fallbackLocale) {
return `/${link}`;
}
return `/${app.i18n.locale}/${link}`;
};
};
nuxt.config.json
file:module.exports = {
plugins: ['~/plugins/i18n.js'],
// ... your other configurations
};
locales/en.json
add your translations for the English language:{
"hello": "Hello"
}
For another language ex: Hindi you could create one more file locales/hi.json
with the same JSON key as in English and the translated value.
Ex for Hindi:
{
"hello": "ą¤Øą¤®ą¤øą„ą¤¤ą„"
}
Now in your component or pages file, you can directly call
<p>
{{ $t('hello') }}
</p>
There are various ways you can set the language chosen by the user. The example that I tried out was using cookies for example. You could replace it with your custom profile API or saving it in local/session storage, etc, or using a route based locale selection.
Create a file middleware/i8n.js
with:
export default async function({ app, store }) {
// Set Language
const locale = app.$cookies.get('app-lang');
app.i18n.locale = locale;
store.commit('SET_LANG', locale);
}
and add it in nuxt.config.json
module.exports = {
router: {
middleware: ['i18n', 'autoLogin'],
},
// ... other configs
};
I have used Cookie-Universal-Nuxt for this example. If you want to use the same, follow the instructions in the link provided. (Pretty simple, just install and add it in nuxt.config.js
ā module section)
Then in the store, I have set up different ālocalesā available and the current ālocaleā
export const state = () => ({
locale: 'en',
locales: ['en', 'hi']
});
// ...
export const mutations = {
SET_LANG(state, locale) {
if (state.locales.includes(locale)) {
state.locale = locale;
}
}
});
// ... Incase you need to call the action
export const actions = {
setLocale(context, value) {
context.commit('SET_LANG', value);
},
});
In the locales/en.json
file instead of directly putting key-value pairs, you could organize it based on the section of your page.
Ex:
{
"menu": {
"home": "Home",
"feedback": "Feedback",
"profile": "Profile"
}
}
Thatās it! If you have followed all the steps along, you have successfully setup i8n for your Nuxt.js project and increase the number of people who use your website.