Search for a command to run...
Exploring the new tools and techniques on frontend development. Loves to meet up with new people and participate in the community. I do interesting stuff on codepen https://codepen.io/nirazanbasnet
A few months ago, my product manager dropped something in the team channel. "We are adding an AI agent to the platform next quarter. It will handle follow-ups automatically." Just like that. One messa
f youโre diving into React, youโve likely come across the โuseRef hook. But what exactly is โuseRef(), and how can it make your life easier? In this post weโll cover what โuseRef is, walk through five
A bug that only happens for some users, that you can never reproduce, that isn't in your code. Welcome to the React + browser-translation crash โ what causes it, why it's so sneaky, and the battle-tested one-file fix.
Upgrading a core production database is usually the stuff of dev nightmares. It often involves maintenance windows, scheduled downtime, and the looming fear of a botched migration. But what if you cou
We are moving into products that adapt, predict and react with real context. Designing only interfaces is not enough anymore. We are designing experiences that understand the user. Designers and digital agencies are now challenged to move beyond trad...
Engineering at JoBins
167 posts
Welcome to Engineering at JoBins โ where we share the stories, insights, and lessons from building a world-class hiring platform. From system design and scalability to developer tools and team culture, our engineers write about the real challenges we solve every day. Whether you're a curious developer or a fellow builder, we hope our experiences inspire and inform your own engineering journey.
Creating a multilingual application can dramatically increase its accessibility and reach. This blog post guides you through creating a language switcher component in a Vue.js application using the vue-i18n plugin. This functionality allows users to switch between different languages, enhancing accessibility and reaching a broader audience.
Before diving into the code, let's ensure our project is properly structured. A dedicated lang folder is created within the src directory to store language files (e.g., en.json, ja.json) for better organization. This is where we'll hold our language files, as shown in the screenshot below:
Having a separate folder for each language keeps things organized, enabling easier management of translations.
Also, here is the sample json file of en and ja
en.json
{
"welcome": "Welcome!"
}
ja.json
{
"welcome": "ใใใใ๏ผ"
}
First, let's install the vue-i18n package by running the following command in your project:
npm install vue-i18n
Next, we need to configure the vue-i18n plugin. The main.js file is updated to import and use the i18n instance, making localization features accessible throughout the app.
import { createApp } from 'vue';
import App from './App.vue';
import i18n from './i18n';
const app = createApp(App);
app.use(i18n);
app.mount('#app');
This file serves as the core for handling translations. It uses the createI18n function to initialize vue-i18n. Language files (en.json and ja.json) are imported and assigned to the messages option.
A fallback mechanism is set using fallbackLocale to ensure a default language displays if the chosen language isn't available. legacy is set to false for improved compatibility.
import { createI18n } from 'vue-i18n';
import en from './lang/en/en.json';
import ja from './lang/ja/ja.json';
const i18n = createI18n({
legacy: false,
locale: localStorage.getItem('lang') || 'en',
fallbackLocale: 'en',
messages: {
en,
ja,
},
});
export default i18n;
A new Vue component named LanguageSwitcher.vue is created.
<template>
<div>
<button @click="setLanguage('en')" style="margin-right: 8px">English</button>
<button @click="setLanguage('ja')">Japanese</button>
</div>
</template>
<script setup>
import { useI18n } from 'vue-i18n';
import { watchEffect } from 'vue';
const { locale } = useI18n();
const setLanguage = (newLang) => {
locale.value = newLang;
localStorage.setItem('lang', newLang);
};
watchEffect(() => {
const storedLang = localStorage.getItem('lang');
if (storedLang) {
locale.value = storedLang;
}
});
</script>
setLanguage Function:
This function takes a new language code (newLang) as input.
It updates the locale.value of the i18n instance with the new language.
The user's preference is saved to localStorage using localStorage.setItem('lang', newLang).
watchEffect:
This monitors changes in localStorage.
If a stored language preference (lang) exists in localStorage, it retrieves the value and updates the locale.value of the i18n instance accordingly. This ensures the app reflects the user's saved language preference upon loading.
In essence, this component provides a user interface to switch languages and persists the user's choice in localStorage.
Now, let's use our LanguageSwitcher in the main App.vue:
<template>
<div>
<LanguageSwitcher />
<p>{{ t('welcome') }}</p>
</div>
</template>
<script setup>
import { useI18n } from 'vue-i18n';
import LanguageSwitcher from './components/LanguageSwitcher.vue';
const { t } = useI18n();
</script>
Here, the t function from useI18n is used to display the translated "welcome" message based on the current locale.
If you encounter a legacy mode error related to vue-i18n, update your vite.config.js file as instructed.
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
vue({
reactivityTransform: true,
}),
],
});
And remember to set the legacy: false option in the i18n.js file, as shown in Step 3.
To see this language switcher in action, visit the live demo
https://stackblitz.com/edit/vuejs-language-switcher-i18n?file=README.md
By following these steps, you can create a functional language switcher in your Vue.js application using vue-i18n. This enhances user experience by catering to a wider audience and providing language options. Remember to thoroughly test the switcher and translations for a seamless multilingual experience.
Feel free to share your thoughts and opinions and leave me a comment if you have any problems or questions. ๐๐
Till then, Keep on Hacking, Cheers
Happy coding! ๐๐ฉโ๐ป๐จโ๐ป