ট্রান্সলেশন ফাইলস এবং ম্যাসেজ হ্যান্ডলিং

Vue.js এ আন্তর্জাতিকীকরণ (Internationalization) বা i18n এর জন্য ট্রান্সলেশন এবং ম্যাসেজ হ্যান্ডলিং একটি গুরুত্বপূর্ণ প্রক্রিয়া। এটি বিভিন্ন ভাষায় অ্যাপ্লিকেশন কনটেন্ট প্রদর্শন করার সুযোগ দেয়, যা বিশেষত বৈশ্বিক বা মাল্টি-ভাষী অ্যাপ্লিকেশন তৈরি করতে সহায়ক। Vue.js তে এই কার্যকারিতা যোগ করার জন্য আপনি vue-i18n লাইব্রেরি ব্যবহার করতে পারেন, যা ভাষা পরিবর্তন এবং ট্রান্সলেশন ফাইল হ্যান্ডলিংকে সহজ করে তোলে।

১. vue-i18n ইনস্টল করা

প্রথমে vue-i18n প্যাকেজটি ইনস্টল করতে হবে। এটি Vue.js অ্যাপ্লিকেশনে আন্তর্জাতিকীকরণ (i18n) যোগ করার জন্য একটি জনপ্রিয় এবং শক্তিশালী লাইব্রেরি।

ইনস্টলেশন:

npm install vue-i18n

২. Vue.js অ্যাপে vue-i18n কনফিগার করা

একবার vue-i18n ইনস্টল হয়ে গেলে, এটি Vue.js অ্যাপ্লিকেশনে কনফিগার করতে হবে। আপনি সাধারণত main.js বা app.js ফাইলে এটি ইনস্টল এবং কনফিগার করবেন।

vue-i18n কনফিগারেশন উদাহরণ:

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

// vue-i18n ইনস্টল করা
Vue.use(VueI18n);

// ট্রান্সলেশন ফাইল (ইংরেজি এবং বাংলা)
const messages = {
  en: {
    greeting: 'Hello!',
    farewell: 'Goodbye!'
  },
  bn: {
    greeting: 'হ্যালো!',
    farewell: 'বিদায়!'
  }
};

// VueI18n ইন্সট্যান্স তৈরি করা
const i18n = new VueI18n({
  locale: 'en', // ডিফল্ট ভাষা
  messages,      // ভাষার ট্রান্সলেশন
});

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

এখানে:

• Vue.use(VueI18n) দিয়ে Vue তে vue-i18n লাইব্রেরি ইনস্টল করা হয়েছে।
• messages অবজেক্টে ইংরেজি (en) এবং বাংলা (bn) ভাষার জন্য ট্রান্সলেশন রাখা হয়েছে।
• i18n কনফিগারেশনে ডিফল্ট ভাষা (locale) en হিসেবে সেট করা হয়েছে।

৩. ট্রান্সলেশন ফাইলস

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

উদাহরণ ট্রান্সলেশন ফাইল:

// en.js
export default {
  greeting: 'Hello!',
  farewell: 'Goodbye!'
};

// bn.js
export default {
  greeting: 'হ্যালো!',
  farewell: 'বিদায়!'
};

এগুলো একসাথে main.js বা app.js তে একত্রিত করতে পারেন:

import en from './locales/en';
import bn from './locales/bn';

const messages = {
  en,
  bn
};

এভাবে, আপনি যখন নতুন ভাষা যোগ করবেন, তখন সহজে একটি নতুন ট্রান্সলেশন ফাইল তৈরি করতে পারবেন।

৪. টেমপ্লেটে ট্রান্সলেশন ব্যবহার করা

টেমপ্লেটে আপনি {{$t()}} বা v-t ডিরেকটিভ ব্যবহার করে ট্রান্সলেশন কনটেন্ট দেখতে পারেন।

{{$t()}} উদাহরণ:

<template>
  <div>
    <h1>{{ $t('greeting') }}</h1> <!-- greeting ট্রান্সলেশন ফিচার -->
    <p>{{ $t('farewell') }}</p>   <!-- farewell ট্রান্সলেশন ফিচার -->
  </div>
</template>

এখানে, $t('greeting') এবং $t('farewell') vue-i18n এর মাধ্যমে ট্রান্সলেশন মেসেজগুলো দেখাচ্ছে। আপনি এই মেসেজগুলো ইংরেজি বা বাংলায় দেখাতে পারবেন, তার ভিত্তিতে যা ডিফল্ট ভাষায় সেট করা আছে।

৫. ভাষা পরিবর্তন করা

Vue.js অ্যাপ্লিকেশনটির ভাষা পরিবর্তন করতে আপনি i18n.locale ব্যবহার করতে পারেন। এটি ব্যবহার করে আপনি অ্যাপ্লিকেশনের ভাষা ডাইনামিকভাবে পরিবর্তন করতে পারবেন।

ভাষা পরিবর্তন উদাহরণ:

<template>
  <div>
    <button @click="changeLanguage('en')">English</button>
    <button @click="changeLanguage('bn')">বাংলা</button>
    
    <h1>{{ $t('greeting') }}</h1>
    <p>{{ $t('farewell') }}</p>
  </div>
</template>

<script>
export default {
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang; // ভাষা পরিবর্তন করা
    }
  }
}
</script>

এখানে, changeLanguage মেথডটি ইউজারের ক্লিকের মাধ্যমে ভাষা পরিবর্তন করে। যখন ইউজার একটি ভাষা বেছে নেয়, তখন অ্যাপ্লিকেশনটি সেই ভাষায় রিফ্রেশ হয়ে যাবে।

৬. প্লুরালস এবং কাস্টম প্লেসহোল্ডারস

Vue-i18n আপনাকে প্লুরাল (plural) এবং কাস্টম প্লেসহোল্ডারস (placeholders) এর জন্য মেসেজ ফরম্যাটিং করতে সহায়তা করে।

প্লুরাল উদাহরণ:

const messages = {
  en: {
    message: {
      hello: 'Hello!',
      items: 'You have {count} item|You have {count} items' // Plural
    }
  },
  bn: {
    message: {
      hello: 'হ্যালো!',
      items: 'আপনার {count} আইটেম আছে|আপনার {count} আইটেম আছে' // Plural
    }
  }
};

প্লুরাল কাস্টমাইজ করা:

<p>{{ $t('message.items', { count: itemCount }) }}</p>

এখানে { count: itemCount } দ্বারা count ভ্যালু পাঠানো হচ্ছে, যা প্লুরাল হিসেব অনুযায়ী সঠিক মেসেজ নির্বাচন করবে।

সারাংশ

• vue-i18n লাইব্রেরি ব্যবহার করে Vue.js অ্যাপ্লিকেশনে আন্তর্জাতিকীকরণ (i18n) যোগ করা যায়।
• ট্রান্সলেশন ফাইল সাধারণত আলাদা আলাদা ভাষার জন্য তৈরি করা হয়, যা messages অবজেক্টে সংরক্ষণ করা হয়।
• টেমপ্লেটে ট্রান্সলেশন ব্যবহার করার জন্য $t() মেথড এবং v-t ডিরেকটিভ ব্যবহার করা হয়।
• ভাষা পরিবর্তন করতে i18n.locale ব্যবহার করে ইউজারের ইন্টারঅ্যাকশনের মাধ্যমে ভাষা পরিবর্তন করা যায়।
• প্লুরাল এবং প্লেসহোল্ডারস সাপোর্টের মাধ্যমে, আপনি ডাইনামিক কনটেন্ট এবং প্লুরাল কেস সঠিকভাবে হ্যান্ডল করতে পারেন।

Vue.js অ্যাপ্লিকেশনগুলিতে vue-i18n ব্যবহার করে সহজেই ভাষার ট্রান্সলেশন হ্যান্ডলিং এবং আন্তর্জাতিকীকরণ সম্পাদন করা যায়।