ডায়নামিক ল্যাঙ্গুয়েজ সুইচিং

ডায়নামিক ল্যাঙ্গুয়েজ সুইচিং হল এমন একটি প্রক্রিয়া যার মাধ্যমে ব্যবহারকারীরা ওয়েব অ্যাপ্লিকেশনের ভাষা পরিবর্তন করতে পারেন, এবং সেই পরিবর্তনটি স্বয়ংক্রিয়ভাবে UI তে প্রতিফলিত হয়। Vue.js এ ডায়নামিক ল্যাঙ্গুয়েজ সুইচিং করতে আমরা সাধারণত Vue I18n লাইব্রেরি ব্যবহার করি। এটি Vue.js এর জন্য একটি শক্তিশালী আন্তর্জাতিকীকরণ (i18n) প্লাগইন, যা সহজে একাধিক ভাষায় অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে।

এখানে আমরা Vue.js অ্যাপ্লিকেশনে ডায়নামিক ল্যাঙ্গুয়েজ সুইচিং কিভাবে ইনস্টল এবং কনফিগার করতে হয়, তা দেখব।

১. Vue I18n ইনস্টলেশন

প্রথমেই আপনাকে Vue I18n ইনস্টল করতে হবে। এটি Vue.js অ্যাপ্লিকেশনের মধ্যে ভাষার অনুবাদ এবং অন্যান্য আন্তর্জাতিকীকরণ সম্পর্কিত কার্যক্রম পরিচালনা করতে ব্যবহৃত হয়।

Vue I18n ইনস্টল করা

npm install vue-i18n

এটি আপনার প্রোজেক্টে Vue I18n প্লাগইন ইনস্টল করবে।

২. Vue I18n কনফিগারেশন

Vue I18n প্লাগইন ইনস্টল হওয়ার পর, আপনাকে এটি Vue অ্যাপ্লিকেশনের মধ্যে কনফিগার করতে হবে। প্রথমে, আপনি বিভিন্ন ভাষার জন্য অনুবাদ ফাইল তৈরি করবেন এবং তারপর সেই ভাষাগুলো ব্যবহারকারীদের জন্য সিলেক্টেবল করবেন।

Vue I18n কনফিগারেশন এর উদাহরণ:

1. i18n.js ফাইল তৈরি করুন: এই ফাইলে আপনি বিভিন্ন ভাষার জন্য অনুবাদ কনফিগারেশন সংজ্ঞায়িত করবেন।

// src/i18n.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const messages = {
  en: {
    message: {
      hello: 'Hello World!'
    }
  },
  fr: {
    message: {
      hello: 'Bonjour le monde!'
    }
  },
  es: {
    message: {
      hello: '¡Hola Mundo!'
    }
  }
};

const i18n = new VueI18n({
  locale: 'en', // Default locale
  messages
});

export default i18n;

2. Vue ইনস্ট্যান্সে VueI18n ব্যবহার করা: এখন, আপনার মূল অ্যাপ্লিকেশন ফাইলে এই i18n কনফিগারেশনটি যুক্ত করতে হবে।

// main.js
import Vue from 'vue';
import App from './App.vue';
import i18n from './i18n'; // Importing the i18n config

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  i18n // Adding i18n to Vue instance
}).$mount('#app');

৩. ডায়নামিক ল্যাঙ্গুয়েজ সুইচিং

এখন, আমরা Vue অ্যাপ্লিকেশনে ডায়নামিক ল্যাঙ্গুয়েজ সুইচিং ইমপ্লিমেন্ট করব। ব্যবহারকারী যখন একটি নতুন ভাষা নির্বাচন করবেন, তখন অ্যাপ্লিকেশনটি সেই ভাষায় রিফ্রেশ হবে।

ল্যাঙ্গুয়েজ সুইচিং এর উদাহরণ:

<template>
  <div>
    <h1>{{ $t("message.hello") }}</h1>
    <button @click="switchLanguage('en')">English</button>
    <button @click="switchLanguage('fr')">French</button>
    <button @click="switchLanguage('es')">Spanish</button>
  </div>
</template>

<script>
export default {
  methods: {
    switchLanguage(language) {
      this.$i18n.locale = language; // Changing the language dynamically
    }
  }
};
</script>

এখানে:

• $t("message.hello") এই পদ্ধতি দিয়ে আপনি ডায়নামিকভাবে ভাষার অনুবাদ ব্যবহার করতে পারেন। $t() হল Vue I18n এর টেমপ্লেট মেথড যা অনুবাদ টেক্সট রিটার্ন করে।
• switchLanguage(language) মেথডটি ব্যবহার করে আপনি ব্যবহারকারীর নির্বাচিত ভাষায় পরিবর্তন করতে পারেন।

ফলাফল:

• ব্যবহারকারী যখন English, French অথবা Spanish বাটনে ক্লিক করবে, তখন অ্যাপ্লিকেশনটি সেগুলোর মধ্যে ভাষা পরিবর্তন করবে এবং UI তে অনুবাদ হওয়া টেক্সট প্রদর্শিত হবে।

৪. রিফ্রেশ বা রি-রেন্ডারিং

Vue I18n স্বয়ংক্রিয়ভাবে UI রিফ্রেশ করবে, যখন আপনি this.$i18n.locale = language ব্যবহার করে ভাষা পরিবর্তন করবেন। তবে আপনি চাইলে এর সাথে $forceUpdate() ব্যবহার করে UI রি-রেন্ডার করাতে পারেন, যদিও সাধারণভাবে এটি প্রয়োজনীয় নয়।

৫. ভাষা নির্বাচন এবং সেভ করা

কিছু অ্যাপ্লিকেশনে ব্যবহারকারী যখন ভাষা পরিবর্তন করেন, তখন সেই ভাষা ব্রাউজারের কুকিজে বা লোকাল স্টোরেজে সেভ করা হতে পারে, যাতে পরবর্তীতে অ্যাপ্লিকেশন লোড হওয়া সময় সেই ভাষা আবার প্রিলোড হয়।

// Store the selected language in localStorage
switchLanguage(language) {
  this.$i18n.locale = language;
  localStorage.setItem('language', language); // Save selected language to localStorage
}

// On app load, check for stored language and apply it
mounted() {
  const savedLanguage = localStorage.getItem('language');
  if (savedLanguage) {
    this.$i18n.locale = savedLanguage;
  }
}

এখানে, ভাষা পরিবর্তন হলে সেটি localStorage এ সেভ হচ্ছে, এবং পরবর্তীতে অ্যাপ্লিকেশন রি-লোড হলে সেই ভাষা আবার লোড হবে।

সারাংশ

• Vue I18n হল Vue.js অ্যাপ্লিকেশনে ভাষা পরিবর্তন বা আন্তর্জাতিকীকরণের জন্য একটি শক্তিশালী প্লাগইন।
• ডায়নামিক ল্যাঙ্গুয়েজ সুইচিং এর মাধ্যমে ব্যবহারকারীকে বিভিন্ন ভাষায় অ্যাপ্লিকেশন ব্যবহার করার সুবিধা প্রদান করা হয়।
• Vue.js তে আপনি সহজেই ভাষা পরিবর্তন করতে পারেন এবং UI তে তা রিফ্রেশ করতে পারেন।
• ভাষা নির্বাচন ব্যবহারকারীর ব্রাউজারে সেভ করে রাখা যায় যাতে পরবর্তী সময় সেটি পুনরায় ব্যবহার করা যায়।

এই কৌশলটি অ্যাপ্লিকেশনকে আন্তর্জাতিকীকরণ করতে সহায়তা করে এবং একাধিক ভাষায় অ্যাপ্লিকেশন চালানোর জন্য একটি ভালো পদ্ধতি।