Vue 3 loyihasiga xalqaro tillarni qo'shish (vue-i18n)

2024-05-20T19:01:51.144Z

Bugungi kunda web-ilovalar global foydalanuvchilar uchun mo'ljallangan bo'lib, turli tillardagi qo'llab-quvvatlash juda muhim ahamiyatga ega. Vue 3 ilovangizga xalqaro tillarni qo'shish orqali siz kengroq auditoriyaga xizmat qilishingiz mumkin. Bu jarayonni "Vue I18n" yordamida oson amalga oshirish mumkin.

Quyida loyihangizni ko'p tilli qilishni ko'rib chiqamiz.

I18n nima?

I18n - dasturiy ta'minotni global tillarga moslashtirish uchun framework. Bu atama "internationalization" so'zining qisqartmasi bo'lib, "i" harfidan boshlanib, "n" harfigacha bo'lgan oraliqda 18 ta harf borligi uchun "i18n" deb yuritiladi.

Vue loyihasiga I18n qo'shish ketma-ketliklari:

O'rnatish

Loyihangizga vue-i18n@next paketini o'rnatishingiz kerak:

npm install vue-i18n@9

yoki

yarn add vue-i18n@9

Konfiguratsiya

src papkasi ichida i18n.js faylini yaratib, quyidagi kodni kiratamiz va sozlab olamiz:

import { createI18n } from 'vue-i18n';

const messages = {
  en: {
    message: {
      hello: 'Hello world'
    }
  },
  uz: {
    message: {
      hello: 'Salom dunyo'
    }
  }
};

const i18n = createI18n({
  legacy: false,
  locale: 'uz', // asosiy til
  fallbackLocale: 'en', // zaxira tili
  messages,
});

export default i18n;

Asosiy faylda i18n qo'llash

main.js fayliga i18n ob'ektini qo'shamiz:

import { createApp } from 'vue';
import App from './App.vue';
import i18n from './i18n';

createApp(App).use(i18n).mount('#app');

Foydalanish

<template>
  <h1>{{ $t('message.hello') }}</h1>
</template>

<h1>Salom dunyo</h1>

Tilni o'zgartirish

<template>
  <button @click="changeLanguage('uz')">UZ</button>
  <button @click="changeLanguage('en')">EN</button>
</template>
<script setup>

import { useI18n } from 'vue-i18n';
const { locale } = useI18n();

function changeLanguage(lang) {
  locale.value = lang;
}

</script>

🌐 Vue I18n - https://vue-i18n.intlify.dev/