Vue I18n প্লাগইন ব্যবহার করে লোকালাইজেশন

লোকালাইজেশন (Localization) হল বিভিন্ন ভাষায় ওয়েব অ্যাপ্লিকেশন বা পণ্য পরিবেশন করার প্রক্রিয়া, যাতে এটি বিভিন্ন দেশের বা অঞ্চলের ব্যবহারকারীদের জন্য উপযুক্ত হয়। Vue I18n হল Vue.js এর জন্য একটি জনপ্রিয় প্লাগইন যা সহজেই ভিন্ন ভাষায় অ্যাপ্লিকেশনটির কনটেন্ট প্রদর্শন করার সুবিধা প্রদান করে।

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

১. Vue I18n প্লাগইন ইন্সটল করা

Vue I18n ইন্সটল করতে নীচের কমান্ডটি ব্যবহার করুন:

npm install vue-i18n

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

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

Vue I18n কনফিগারেশন করা:

1. main.js ফাইলে Vue I18n সেটআপ করুন:

import { createApp } from 'vue'
import App from './App.vue'
import { createI18n } from 'vue-i18n'

const messages = {
  en: {
    welcome: 'Welcome to Vue.js',
    description: 'This is a localized app!'
  },
  fr: {
    welcome: 'Bienvenue sur Vue.js',
    description: 'Ceci est une application localisée!'
  }
}

const i18n = createI18n({
  locale: 'en',  // ডিফল্ট ভাষা
  messages,      // ভাষার ডেটা
})

const app = createApp(App)
app.use(i18n)
app.mount('#app')

এখানে:

• messages: এটি একটি অবজেক্ট যা বিভিন্ন ভাষার জন্য কনটেন্ট ধারণ করে। আপনি এখানে বিভিন্ন ভাষার জন্য কাস্টম ম্যাসেজ যোগ করতে পারেন।
• locale: এটি ডিফল্ট ভাষা নির্দেশ করে (এখানে ইংরেজি 'en')। আপনি এটি পরিবর্তন করে ভাষা সুইচ করতে পারেন।

৩. টেমপ্লেটের মধ্যে ভাষার ডেটা ব্যবহার করা

এখন আপনি Vue কম্পোনেন্টের মধ্যে {{$t()}} হেল্পার মেথড ব্যবহার করে ভাষা পরিবর্তন করতে পারেন।

উদাহরণ:

<template>
  <div>
    <h1>{{ $t('welcome') }}</h1>   <!-- ভাষার জন্য ডেটা -->
    <p>{{ $t('description') }}</p> <!-- ভাষার জন্য ডেটা -->
    <button @click="changeLanguage">Switch Language</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeLanguage() {
      const newLang = this.$i18n.locale === 'en' ? 'fr' : 'en'
      this.$i18n.locale = newLang // ভাষা পরিবর্তন করা
    }
  }
}
</script>

এখানে:

• $t() মেথড ব্যবহার করে আপনি ভাষার ডেটা অ্যাক্সেস করছেন। এই মেথড ভাষার কনটেন্ট ফিরিয়ে দেবে, যেমন welcome, description।
• changeLanguage মেথড ব্যবহার করে ভাষা পরিবর্তন করা হচ্ছে। আপনি যখন বাটনে ক্লিক করবেন, ভাষা ইংরেজি থেকে ফরাসিতে (বা ফরাসি থেকে ইংরেজি) পরিবর্তিত হবে।

৪. ভাষার ডেটা ফাইল আলাদা করা

এটি একটি ভালো প্র্যাকটিস যে আপনি ভাষার ডেটা আলাদা আলাদা ফাইলে রাখবেন। যেমন:

locales/en.js:

export default {
  welcome: 'Welcome to Vue.js',
  description: 'This is a localized app!'
}

locales/fr.js:

export default {
  welcome: 'Bienvenue sur Vue.js',
  description: 'Ceci est une application localisée!'
}

main.js তে ফাইলগুলি ইনপোর্ট করা:

import { createApp } from 'vue'
import App from './App.vue'
import { createI18n } from 'vue-i18n'
import en from './locales/en'
import fr from './locales/fr'

const i18n = createI18n({
  locale: 'en',
  messages: {
    en,
    fr
  }
})

const app = createApp(App)
app.use(i18n)
app.mount('#app')

এভাবে আপনি ভাষার কনটেন্ট সহজেই আলাদা আলাদা ফাইলে রাখতে পারেন, যা বড় অ্যাপ্লিকেশনের ক্ষেত্রে আরও সংগঠিত এবং স্কেলেবল হয়ে ওঠে।

৫. Vue I18n এর অন্যান্য বৈশিষ্ট্য

• Pluralization: Vue I18n প্লুরালাইজেশন সমর্থন করে, যা সংখ্যার উপর ভিত্তি করে বিভিন্ন অনুবাদ প্রদর্শন করতে সাহায্য করে।

  const messages = {
    en: {
      items: 'You have {count} item | You have {count} items'
    }
  }
  

  এখানে {count} ডাইনামিক প্যারামিটার এবং এর মান অনুযায়ী প্লুরালাইজড মেসেজ পরিবর্তিত হবে।

• Date and Time Formatting: Vue I18n তারিখ এবং সময় ফরম্যাটিং সমর্থন করে, যা বিভিন্ন ভাষায় ভিন্ন হতে পারে।

  const messages = {
    en: {
      greeting: 'Today is {date, date, long}'
    }
  }
  

  এইভাবে, আপনি তারিখ এবং সময়কে লোকালাইজড ফরম্যাটে প্রদর্শন করতে পারবেন।

সারাংশ

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