May 20, 2024
Vue 3 loyihasiga xalqaro tillarni qo'shish (vue-i18n)
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
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>
<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/
// Maqolada kamchiliklar bo’lishi mumkin. Hech kim xatoliklardan holi emas. Rahmat )