{"id":36561,"date":"2025-12-19T22:40:55","date_gmt":"2025-12-19T19:40:55","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=36561"},"modified":"2025-12-19T22:40:55","modified_gmt":"2025-12-19T19:40:55","slug":"vue-js-uygulamalarinda-vue-i18n-ile-uluslararasilasma-i18n-entegrasyonu","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamalarinda-vue-i18n-ile-uluslararasilasma-i18n-entegrasyonu\/","title":{"rendered":"Vue.js Uygulamalar\u0131nda vue-i18n ile Uluslararas\u0131la\u015fma (i18n) Entegrasyonu"},"content":{"rendered":"

<\/p>\n

Vue.js Uygulamalar\u0131nda vue-i18n ile Uluslararas\u0131la\u015fma (i18n) Entegrasyonu<\/h2>\n

Giri\u015f: Uluslararas\u0131la\u015fma (i18n) Nedir ve Neden \u00d6nemlidir?<\/h2>\n
G\u00fcn\u00fcm\u00fcz k\u00fcresel dijital d\u00fcnyas\u0131nda, yaz\u0131l\u0131m uygulamalar\u0131n\u0131n farkl\u0131 dilleri ve k\u00fclt\u00fcrel tercihleri desteklemesi bir l\u00fcks olmaktan \u00e7\u0131k\u0131p temel bir gereksinim haline gelmi\u015ftir. \u0130\u015fte tam bu noktada uluslararas\u0131la\u015fma (internationalization – i18n) kavram\u0131 devreye girer. i18n, bir yaz\u0131l\u0131m uygulamas\u0131n\u0131n farkl\u0131 dilleri ve b\u00f6lgeleri destekleyecek \u015fekilde tasarlanmas\u0131 ve geli\u015ftirilmesi s\u00fcrecini ifade eder. “i18n” k\u0131saltmas\u0131, “internationalization” kelimesindeki ‘i’ harfi ile ‘n’ harfi aras\u0131nda 18 harf bulunmas\u0131ndan gelir. Bu s\u00fcre\u00e7, sadece metinlerin \u00e7evrilmesini de\u011fil, ayn\u0131 zamanda tarih, saat, say\u0131 formatlar\u0131, para birimleri ve hatta sa\u011fdan sola yaz\u0131m gibi k\u00fclt\u00fcrel farkl\u0131l\u0131klar\u0131n da dikkate al\u0131nmas\u0131n\u0131 kapsar.<\/p>\n
Uluslararas\u0131la\u015fman\u0131n yak\u0131n bir kuzeni ise yerelle\u015ftirme (localization – l10n) kavram\u0131d\u0131r. l10n, i18n s\u00fcreciyle haz\u0131rlanm\u0131\u015f bir uygulaman\u0131n belirli bir dil ve k\u00fclt\u00fcrel b\u00f6lgeye (locale) uyarlanmas\u0131 i\u015flemidir. Bu, \u00e7evirileri yapmak, k\u00fclt\u00fcrel olarak uygun g\u00f6rselleri se\u00e7mek ve b\u00f6lgesel standartlara g\u00f6re formatlar\u0131 ayarlamak gibi ad\u0131mlar\u0131 i\u00e7erir. K\u0131sacas\u0131, i18n uygulamay\u0131 k\u00fcresel pazara haz\u0131r hale getirirken, l10n bu haz\u0131rl\u0131\u011f\u0131 belirli pazarlara \u00f6zel hale getirir.<\/p>\n

Neden i18n \u00d6nemlidir?<\/h3>\n
Uygulamalar\u0131n\u0131zda i18n kullanman\u0131n bir\u00e7ok \u00f6nemli avantaj\u0131 vard\u0131r:<\/p>\n
* Geni\u015f Kitlelere Ula\u015f\u0131m:<\/strong> Uygulaman\u0131z\u0131 birden fazla dilde sunarak, dil bariyeri nedeniyle eri\u015femeyece\u011finiz milyonlarca potansiyel kullan\u0131c\u0131ya kap\u0131 aralars\u0131n\u0131z. Bu, pazar pay\u0131n\u0131z\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilir.
\n* Geli\u015fmi\u015f Kullan\u0131c\u0131 Deneyimi:<\/strong> Kullan\u0131c\u0131lar, kendi ana dillerinde bir uygulama kulland\u0131klar\u0131nda kendilerini daha rahat ve g\u00fcvende hissederler. Bu, uygulaman\u0131zla etkile\u015fimlerini art\u0131r\u0131r ve daha olumlu bir deneyim sunar.
\n* Rekabet Avantaj\u0131:<\/strong> \u00d6zellikle ni\u015f pazarlarda, yerelle\u015ftirilmi\u015f bir uygulama sunmak, rakiplerinize kar\u015f\u0131 \u00f6nemli bir avantaj sa\u011flayabilir.
\n* K\u00fclt\u00fcrel Hassasiyet:<\/strong> Farkl\u0131 k\u00fclt\u00fcrlerin normlar\u0131na ve beklentilerine sayg\u0131 g\u00f6stermek, marka itibar\u0131n\u0131z\u0131 g\u00fc\u00e7lendirir ve k\u00fcresel \u00e7apta daha kabul edilebilir bir imaj yarat\u0131r.
\n* S\u00fcrd\u00fcr\u00fclebilirlik ve \u00d6l\u00e7eklenebilirlik:<\/strong> Uygulamay\u0131 ba\u015ftan i18n uyumlu hale getirmek, gelecekte yeni diller eklemeyi \u00e7ok daha kolay ve maliyetsiz hale getirir.<\/p>\n
Vue.js, modern ve reaktif kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in pop\u00fcler bir JavaScript \u00e7er\u00e7evesidir. Vue ekosistemi, i18n entegrasyonunu kolayla\u015ft\u0131rmak i\u00e7in g\u00fc\u00e7l\u00fc bir k\u00fct\u00fcphane olan `vue-i18n<\/code>‘i sunar. Bu makalede, vue-i18n<\/code> k\u00fct\u00fcphanesini kullanarak Vue.js uygulamalar\u0131n\u0131za uluslararas\u0131la\u015fma yeteneklerini nas\u0131l entegre edece\u011finizi ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n`

vue-i18n K\u00fct\u00fcphanesine Giri\u015f<\/h2>\nvue-i18n<\/code>, Vue.js uygulamalar\u0131 i\u00e7in resmi olarak \u00f6nerilen ve en \u00e7ok kullan\u0131lan uluslararas\u0131la\u015fma k\u00fct\u00fcphanesidir. Geli\u015ftiricilere, \u00e7ok dilli uygulamalar olu\u015fturmak i\u00e7in kapsaml\u0131 ve kullan\u0131m\u0131 kolay bir API sunar.<\/p>\n vue-i18n’in Temel \u00d6zellikleri<\/h3>\n* Basit ve Sezgisel API:<\/strong> Mesaj \u00e7evirileri, parametre ekleme, \u00e7o\u011fulculuk, tarih ve say\u0131 formatlama gibi i\u015flemleri kolayla\u015ft\u0131ran temiz bir API’ye sahiptir. \n* Vue Entegrasyonu:<\/strong> Vue bile\u015fenleriyle sorunsuz bir \u015fekilde entegre olur. $t<\/code>, $tc<\/code>, $d<\/code>, $n<\/code> gibi global inject edilen y\u00f6ntemler ve <\/code> bile\u015feni arac\u0131l\u0131\u011f\u0131yla kolayca eri\u015filebilir. \n* Dinamik Dil De\u011fi\u015fimi:<\/strong> \u00c7al\u0131\u015fma zaman\u0131nda dil de\u011fi\u015ftirme yetene\u011fi sunar, b\u00f6ylece kullan\u0131c\u0131lar istedikleri zaman uygulama dilini de\u011fi\u015ftirebilirler. \n* \u00c7o\u011fulculuk Kurallar\u0131:<\/strong> Farkl\u0131 dillerin karma\u015f\u0131k \u00e7o\u011fulculuk kurallar\u0131n\u0131 (\u00f6rne\u011fin, \u0130ngilizce’de tekil\/\u00e7o\u011ful, Arap\u00e7a’da 6 farkl\u0131 form) destekler. \n* Tarih ve Say\u0131 Formatlama:<\/strong> Belirli bir dilin k\u00fclt\u00fcrel kurallar\u0131na g\u00f6re tarihleri, saatleri ve say\u0131lar\u0131 formatlama yetene\u011fi sa\u011flar. \n* Mod\u00fcler Yap\u0131:<\/strong> Dil dosyalar\u0131n\u0131 ayr\u0131 ayr\u0131 y\u00f6netmeye olanak tan\u0131r, bu da b\u00fcy\u00fck uygulamalarda organizasyonu kolayla\u015ft\u0131r\u0131r. \n* Lazy Loading (Tembel Y\u00fckleme) Deste\u011fi:<\/strong> Performans\u0131 art\u0131rmak i\u00e7in dil dosyalar\u0131n\u0131 yaln\u0131zca ihtiya\u00e7 duyuldu\u011funda y\u00fcklemeye olanak tan\u0131r.<\/p>\n Kurulum<\/h3>\nvue-i18n<\/code>‘i projenize eklemek olduk\u00e7a basittir. npm veya yarn kullanarak y\u00fckleyebilirsiniz:<\/p>\n # npm ile\nnpm install vue-i18n@next\n\nyarn ile<\/h2>\nyarn add vue-i18n@next<\/code><\/pre>\nBu makale yaz\u0131ld\u0131\u011f\u0131 s\u0131rada vue-i18n<\/code>‘in 9.x s\u00fcr\u00fcm\u00fc (Vue 3 ile uyumlu) en g\u00fcncel s\u00fcr\u00fcmd\u00fcr. @next<\/code> etiketiyle en son kararl\u0131 s\u00fcr\u00fcm\u00fc al\u0131rs\u0131n\u0131z. Vue 2 kullan\u0131yorsan\u0131z, vue-i18n@8<\/code> s\u00fcr\u00fcm\u00fcn\u00fc kullanman\u0131z gerekir.<\/p>\n Temel Kullan\u0131m: Mesajlar\u0131 Tan\u0131mlama ve G\u00f6r\u00fcnt\u00fcleme<\/h2>\nvue-i18n<\/code>‘i bir Vue.js uygulamas\u0131nda kullanmaya ba\u015flamak i\u00e7in \u00f6ncelikle bir i18n<\/code> \u00f6rne\u011fi olu\u015fturmam\u0131z ve bunu Vue uygulamam\u0131za entegre etmemiz gerekir.<\/p>\n i18n \u00d6rne\u011fi Olu\u015fturma<\/h3>\nGenellikle, src\/main.js<\/code> veya ayr\u0131 bir i18n.js<\/code> dosyas\u0131nda i18n<\/code> \u00f6rne\u011fini olu\u015ftururuz.<\/p>\n \/\/ src\/i18n.js\nimport { createI18n } from 'vue-i18n';\n\n\/\/ Dil mesajlar\u0131n\u0131 tan\u0131mlay\u0131n\nconst messages = {\n en: {\n message: {\n hello: 'Hello world',\n welcome: 'Welcome to our application!',\n greeting: 'Good morning!',\n farewell: 'Goodbye!'\n }\n },\n tr: {\n message: {\n hello: 'Merhaba d\u00fcnya',\n welcome: 'Uygulamam\u0131za ho\u015f geldiniz!',\n greeting: 'G\u00fcnayd\u0131n!',\n farewell: 'G\u00fcle g\u00fcle!'\n }\n }\n};\n\n\/\/ i18n \u00f6rne\u011fini olu\u015fturun\nconst i18n = createI18n({\n locale: 'en', \/\/ Varsay\u0131lan dil\n fallbackLocale: 'en', \/\/ Bir \u00e7eviri bulunamazsa kullan\u0131lacak yedek dil\n messages, \/\/ Dil mesajlar\u0131\n legacy: false, \/\/ Composition API ile uyumluluk i\u00e7in Vue 3'te gereklidir\n globalInjection: true \/\/ Global $t, $tc, vb. kullan\u0131m\u0131n\u0131 etkinle\u015ftirir\n});\n\nexport default i18n;<\/code><\/pre>\nArd\u0131ndan, bu i18n<\/code> \u00f6rne\u011fini Vue uygulamam\u0131za entegre etmeliyiz:<\/p>\n \/\/ src\/main.js\nimport { createApp } from 'vue';\nimport App from '.\/App.vue';\nimport i18n from '.\/i18n'; \/\/ i18n \u00f6rne\u011fini i\u00e7e aktar\u0131n\n\nconst app = createApp(App);\n\napp.use(i18n); \/\/ i18n eklentisini kullan\n\napp.mount('#app');<\/code><\/pre>\nVue Bile\u015fenlerinde this.$t()<\/code> Kullan\u0131m\u0131<\/h3>\ni18n<\/code> \u00f6rne\u011fini Vue uygulamam\u0131za entegre ettikten sonra, herhangi bir bile\u015fen i\u00e7inde this.$t()<\/code> y\u00f6ntemini kullanarak \u00e7evrilmi\u015f mesajlara eri\u015febiliriz. globalInjection: true<\/code> ayar\u0131 sayesinde $t<\/code> global olarak eri\u015filebilir hale gelir.<\/p>\n \n