Vue.js মাল্টিপল ল্যাঙ্গুয়েজ সাপোর্ট (i18n)

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

এখানে আমরা vue-i18n লাইব্রেরি ব্যবহার করে Vue.js অ্যাপ্লিকেশনে মাল্টিপল ভাষা সাপোর্ট (i18n) কিভাবে যোগ করতে হয় তা দেখাবো।

১. vue-i18n ইনস্টলেশন

প্রথমে আপনার প্রোজেক্টে vue-i18n ইনস্টল করতে হবে। এটি npm অথবা yarn ব্যবহার করে ইনস্টল করা যায়।

ইনস্টলেশন:

npm install vue-i18n

বা

yarn add vue-i18n

২. vue-i18n কনফিগারেশন

এবার, vue-i18n কে আপনার Vue প্রোজেক্টে কনফিগার করা প্রয়োজন। নিচে একটি সাধারণ কনফিগারেশন দেওয়া হলো যেখানে দুইটি ভাষা (ইংরেজি এবং বাংলা) যুক্ত করা হয়েছে।

src/main.js ফাইলে Vue-i18n কনফিগারেশন:

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

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

// ভাষার অনুবাদ ডেটা
const messages = {
  en: {
    message: {
      hello: 'Hello, world!',
      welcome: 'Welcome to the Vue.js application'
    }
  },
  bn: {
    message: {
      hello: 'হ্যালো, বিশ্ব!',
      welcome: 'Vue.js অ্যাপ্লিকেশনে স্বাগতম'
    }
  }
};

// Vue-i18n কনফিগারেশন
const i18n = new VueI18n({
  locale: 'en',  // ডিফল্ট ভাষা
  messages,      // ভাষার অনুবাদ
});

new Vue({
  render: h => h(App),
  i18n,  // Vue-i18n যুক্ত করা
}).$mount('#app');

এখানে:

• messages অবজেক্টে ইংরেজি (en) এবং বাংলা (bn) ভাষার অনুবাদ ডেটা দেওয়া হয়েছে।
• locale: 'en' দ্বারা ডিফল্ট ভাষা ইংরেজি নির্ধারণ করা হয়েছে।

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

এখন, আপনি Vue টেমপ্লেটে i18n এর মাধ্যমে ভাষা ব্যবহার করতে পারবেন। {{ $t('key') }} সিনট্যাক্স দিয়ে আপনি নির্দিষ্ট ভাষার অনুবাদ অ্যাক্সেস করতে পারবেন।

উদাহরণ:

<template>
  <div>
    <p>{{ $t('message.hello') }}</p>
    <p>{{ $t('message.welcome') }}</p>

    <button @click="changeLanguage('en')">English</button>
    <button @click="changeLanguage('bn')">বাংলা</button>
  </div>
</template>

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

এখানে:

• {{ $t('message.hello') }} এর মাধ্যমে আপনি hello কিজের জন্য অনুবাদটি দেখাতে পারবেন, যেটি বর্তমান নির্বাচিত ভাষার উপর ভিত্তি করে পরিবর্তিত হবে।
• দুইটি বাটন তৈরি করা হয়েছে, একটিতে ইংরেজি এবং অন্যটিতে বাংলা ভাষা পরিবর্তন করার অপশন দেওয়া হয়েছে।

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

ভাষা পরিবর্তনের জন্য আপনি Vue-i18n এর $i18n.locale প্রপার্টি ব্যবহার করতে পারেন। উপরের উদাহরণে, changeLanguage মেথডের মাধ্যমে ভাষা পরিবর্তন করা হচ্ছে। যখন ব্যবহারকারী একটি ভাষা সিলেক্ট করে, তখন this.$i18n.locale পরিবর্তিত হবে এবং অ্যাপ্লিকেশনটি সেই ভাষায় রেন্ডার হবে।

৫. ভাষা ফাইল আলাদা করা

যদি আপনার অ্যাপ্লিকেশনে অনেক ভাষা থাকে, তবে আপনি প্রতিটি ভাষার অনুবাদ আলাদা ফাইলে রাখতে পারেন, যাতে প্রোজেক্টটি আরও পরিষ্কার এবং স্কেলেবল থাকে।

উদাহরণ:

1. src/locales/en.json

{
  "message": {
    "hello": "Hello, world!",
    "welcome": "Welcome to the Vue.js application"
  }
}

2. src/locales/bn.json

{
  "message": {
    "hello": "হ্যালো, বিশ্ব!",
    "welcome": "Vue.js অ্যাপ্লিকেশনে স্বাগতম"
  }
}

এবং পরে src/main.js ফাইলে ভাষা ফাইলগুলো ইম্পোর্ট করা যাবে:

import Vue from 'vue';
import App from './App.vue';
import VueI18n from 'vue-i18n';
import en from './locales/en.json';
import bn from './locales/bn.json';

Vue.use(VueI18n);

const messages = {
  en: en,
  bn: bn
};

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

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

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

৬. প্লাগইন ও লাইব্রেরি ব্যবহার

Vue.js-এ মাল্টিপল ল্যাঙ্গুয়েজ সাপোর্ট করতে বিভিন্ন প্লাগইন ও লাইব্রেরি ব্যবহৃত হয়। vue-i18n এর পাশাপাশি, আপনি vue-i18n-extract (অনুবাদ ফাইল এক্সট্র্যাক্ট করার জন্য), vuex-i18n (Vuex এর সাথে i18n ইন্টিগ্রেশন) ইত্যাদি লাইব্রেরি ব্যবহার করতে পারেন।

সারাংশ

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

এভাবে Vue.js অ্যাপ্লিকেশনে মাল্টিপল ল্যাঙ্গুয়েজ সাপোর্ট যোগ করে আপনি বিশ্বের বিভিন্ন অঞ্চলের ব্যবহারকারীদের জন্য অ্যাপ্লিকেশনটি আরও প্রাসঙ্গিক এবং অ্যাক্সেসযোগ্য করতে পারেন।

লোকালাইজেশন (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 প্লাগইন ব্যবহার করে আপনার অ্যাপ্লিকেশনটি বহু ভাষায় উপলব্ধ করতে এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সহায়তা করবে।

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 ব্যবহার করে সহজেই ভাষার ট্রান্সলেশন হ্যান্ডলিং এবং আন্তর্জাতিকীকরণ সম্পাদন করা যায়।

ডায়নামিক ল্যাঙ্গুয়েজ সুইচিং হল এমন একটি প্রক্রিয়া যার মাধ্যমে ব্যবহারকারীরা ওয়েব অ্যাপ্লিকেশনের ভাষা পরিবর্তন করতে পারেন, এবং সেই পরিবর্তনটি স্বয়ংক্রিয়ভাবে 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 তে তা রিফ্রেশ করতে পারেন।
• ভাষা নির্বাচন ব্যবহারকারীর ব্রাউজারে সেভ করে রাখা যায় যাতে পরবর্তী সময় সেটি পুনরায় ব্যবহার করা যায়।

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

Vue.js অ্যাপ্লিকেশন তৈরির সময় অনেক ক্ষেত্রেই ডেট এবং কারেন্সি ডেটার ফরম্যাটিং প্রয়োজন হয়। এই প্রক্রিয়াগুলি সহজে করতে Vue.js কিছু বিল্ট-ইন মেথড এবং প্লাগইন প্রদান করে। এখানে আমরা ডেট এবং কারেন্সি ফরম্যাটিং করার কিছু সাধারণ পদ্ধতি আলোচনা করব।

১. ডেট ফরম্যাটিং

ডেট ফরম্যাটিং করার জন্য Vue.js এর মধ্যে সরাসরি কোনো বিল্ট-ইন ফিচার নেই, তবে আপনি JavaScript এর Intl.DateTimeFormat অথবা Moment.js লাইব্রেরি ব্যবহার করে সহজেই ডেটা ফরম্যাট করতে পারেন। এছাড়া, Vue.js এর filters (Vue 2.x এ) এবং computed properties (Vue 3.x এ) ব্যবহার করে ফরম্যাটিং করা যেতে পারে।

১.১. Intl.DateTimeFormat ব্যবহার করা

Intl.DateTimeFormat হল JavaScript এর একটি বিল্ট-ইন API যা আপনাকে আন্তর্জাতিক স্ট্যান্ডার্ডে ডেটা ফরম্যাট করতে সাহায্য করে।

<template>
  <div>
    <p>{{ formatDate(currentDate) }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date()
    };
  },
  methods: {
    formatDate(date) {
      const options = { year: 'numeric', month: 'long', day: 'numeric' };
      return new Intl.DateTimeFormat('en-US', options).format(date);
    }
  }
};
</script>

এখানে, Intl.DateTimeFormat এর মাধ্যমে ডেটাকে ফরম্যাট করা হয়েছে, এবং এটি month-day-year ফরম্যাটে ডেটা দেখাবে।

১.২. Moment.js ব্যবহার করা

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

Moment.js ইনস্টল করুন:

npm install moment

Moment.js ব্যবহার করার উদাহরণ:

<template>
  <div>
    <p>{{ formatDate(currentDate) }}</p>
  </div>
</template>

<script>
import moment from 'moment';

export default {
  data() {
    return {
      currentDate: new Date()
    };
  },
  methods: {
    formatDate(date) {
      return moment(date).format('MMMM Do YYYY, h:mm:ss a');
    }
  }
};
</script>

এখানে, moment(date).format() ব্যবহার করে ডেটা একটি নির্দিষ্ট ফরম্যাটে রেন্ডার করা হয়েছে, যেমন "September 15th 2021, 5:00:00 pm"।

১.৩. Vue 3.x এ computed পদ্ধতি ব্যবহার করা

Vue 3.x এ, আপনি computed properties ব্যবহার করে ডেটা ফরম্যাটিং করতে পারেন।

<template>
  <div>
    <p>{{ formattedDate }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date()
    };
  },
  computed: {
    formattedDate() {
      const options = { year: 'numeric', month: 'long', day: 'numeric' };
      return new Intl.DateTimeFormat('en-US', options).format(this.currentDate);
    }
  }
};
</script>

এখানে computed প্রপার্টি ব্যবহার করে ডেটা ফরম্যাটিং করা হয়েছে।

২. কারেন্সি ফরম্যাটিং

কারেন্সি ফরম্যাটিং করার জন্য Vue.js এ Intl.NumberFormat বা Number.toLocaleString() ব্যবহার করা যেতে পারে। এই API গুলি ডেটার ফরম্যাটিং এবং কারেন্সি সিম্বল যুক্ত করার জন্য খুবই কার্যকরী।

২.১. Intl.NumberFormat ব্যবহার করা

Intl.NumberFormat ব্যবহার করে সহজেই কারেন্সি ফরম্যাট করা যায়।

<template>
  <div>
    <p>{{ formatCurrency(amount) }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      amount: 12345.67
    };
  },
  methods: {
    formatCurrency(value) {
      return new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD'
      }).format(value);
    }
  }
};
</script>

এখানে, Intl.NumberFormat দিয়ে $12,345.67 এর মতো একটি কারেন্সি ফরম্যাট তৈরি করা হয়েছে।

২.২. Number.toLocaleString() ব্যবহার করা

Number.toLocaleString() একটি বিল্ট-ইন জাভাস্ক্রিপ্ট ফাংশন যা সংখ্যাকে কারেন্সি ফরম্যাটে রূপান্তর করতে সহায়তা করে।

<template>
  <div>
    <p>{{ formatCurrency(amount) }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      amount: 98765.43
    };
  },
  methods: {
    formatCurrency(value) {
      return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
    }
  }
};
</script>

এখানে, .toLocaleString('en-US', { style: 'currency', currency: 'USD' }) ব্যবহার করে $98,765.43 এর মতো কারেন্সি ফরম্যাট করা হয়েছে।

৩. Vue.js Filters (Vue 2.x)

Vue 2.x এ আপনি filters ব্যবহার করে ডেটা ফরম্যাটিং করতে পারেন। এটি বিশেষভাবে ইউজার ইন্টারফেসে ডেটা প্রেজেন্টেশন ফরম্যাট করার জন্য উপযোগী।

// main.js or a component
Vue.filter('currency', function(value) {
  return '$' + value.toLocaleString();
});

// In the template
<template>
  <div>
    <p>{{ 12345.67 | currency }}</p>
  </div>
</template>

এখানে, currency নামক একটি filter তৈরি করা হয়েছে যা সংখ্যা গুলোকে ডলার ফরম্যাটে রূপান্তর করবে।

সারাংশ

• ডেট ফরম্যাটিং: Vue.js এ ডেটা ফরম্যাটিং করতে Intl.DateTimeFormat বা Moment.js ব্যবহার করা যায়। এটি আপনাকে ডেটাকে একটি নির্দিষ্ট আন্তর্জাতিক স্ট্যান্ডার্ডে রূপান্তর করতে সহায়তা করে।
• কারেন্সি ফরম্যাটিং: Intl.NumberFormat অথবা Number.toLocaleString() ব্যবহার করে আপনি সহজেই কারেন্সি ডেটা ফরম্যাট করতে পারবেন।
• Vue Filters (Vue 2.x): Vue 2.x এ filters ব্যবহার করে সহজেই ডেটা ফরম্যাট করা যায়, যা ইউজার ইন্টারফেসে ডেটার প্রেজেন্টেশন সহজ করে তোলে।

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