Intlayer

--- createdAt: 2024-08-11 updatedAt: 2025-08-23 title: vue-i18n vs Intlayer description: Membandingkan vue-i18n dengan Intlayer untuk internasionalisasi (i18n) dalam aplikasi Vue/Nuxt keywords: - vue-i18n - Intlayer - Internasionalisasi - i18n - Blog - Vue - Nuxt - JavaScript slugs: - blog - vue-i18n-vs-intlayer --- # vue-i18n VS Intlayer | Internasionalisasi Vue (i18n) Panduan ini membandingkan dua opsi i18n populer untuk **Vue 3** (dan **Nuxt**): **vue-i18n** dan **Intlayer**. Kami fokus pada tooling Vue modern (Vite, Composition API) dan mengevaluasi: 1. **Arsitektur & organisasi konten** 2. **TypeScript & keamanan** 3. **Penanganan terjemahan yang hilang** 4. **Strategi routing & URL** 5. **Performa & perilaku pemuatan** 6. **Pengalaman pengembang (DX), tooling & pemeliharaan** 7. **SEO & skalabilitas proyek besar** <TOC/> > **ringkasan**: Keduanya dapat melokalkan aplikasi Vue. Jika Anda menginginkan **konten yang dibatasi pada komponen**, **tipe TypeScript yang ketat**, **pemeriksaan kunci hilang saat build-time**, **kamus yang di-tree-shake**, dan **bantuan router/SEO yang sudah termasuk** serta **Editor Visual & terjemahan AI**, **Intlayer** adalah pilihan yang lebih lengkap dan modern. --- ## Posisi tingkat tinggi - **vue-i18n** - Perpustakaan i18n de-facto untuk Vue. Format pesan yang fleksibel (gaya ICU), blok SFC `<i18n>` untuk pesan lokal, dan ekosistem besar. Keamanan dan pemeliharaan skala besar sebagian besar menjadi tanggung jawab Anda. - **Intlayer** - Model konten yang berfokus pada komponen untuk Vue/Vite/Nuxt dengan **pengetikan TS yang ketat**, **pemeriksaan saat build-time**, **tree-shaking**, **bantuan router & SEO**, **Editor Visual/CMS** opsional, dan **terjemahan dibantu AI**. --- ## Perbandingan Fitur Berdampingan (Fokus pada Vue) | Fitur | **Intlayer** | **vue-i18n** | | ------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | | **Terjemahan dekat komponen** | ✅ Ya, konten ditempatkan bersama per komponen (misal, `MyComp.content.ts`) | ✅ Ya, melalui blok SFC `<i18n>` (opsional) | | **Integrasi TypeScript** | ✅ Lanjutan, tipe **strict** yang dihasilkan otomatis & autocompletion kunci | ✅ Typing yang baik; **keamanan kunci strict memerlukan pengaturan/disiplin tambahan** | | **Deteksi terjemahan yang hilang** | ✅ Peringatan/eror **saat build-time** dan tampilan TS | ⚠️ Fallback/peringatan saat runtime | | **Konten kaya (komponen/Markdown)** | ✅ Dukungan langsung untuk node kaya dan file konten Markdown | ⚠️ Terbatas (komponen melalui `<i18n-t>`, Markdown melalui plugin eksternal) | | **Terjemahan berbasis AI** | ✅ Alur kerja bawaan menggunakan kunci penyedia AI Anda sendiri | ❌ Tidak bawaan | | **Editor Visual / CMS** | ✅ Editor Visual Gratis & CMS opsional | ❌ Tidak bawaan (gunakan platform eksternal) | | **Routing lokal** | ✅ Bantuan untuk Vue Router/Nuxt untuk menghasilkan jalur, URL, dan `hreflang` yang dilokalkan | ⚠️ Bukan inti (gunakan Nuxt i18n atau pengaturan Vue Router kustom) | | **Generasi rute dinamis** | ✅ Ya | ❌ Tidak disediakan (Nuxt i18n menyediakan) | | **Pluralisasi & pemformatan** | ✅ Pola enumerasi; pemformat berbasis Intl | ✅ Pesan gaya ICU; pemformat Intl | | **Format konten** | ✅ `.ts`, `.js`, `.json`, `.md`, `.txt` (YAML dalam pengerjaan) | ✅ `.json`, `.js` (plus blok SFC `<i18n>`) | | **Dukungan ICU** | ⚠️ Dalam pengerjaan | ✅ Ya | | **Bantuan SEO (sitemap, robots, metadata)** | ✅ Bantuan bawaan (framework-agnostik) | ❌ Bukan inti (Nuxt i18n/komunitas) | | **SSR/SSG** | ✅ Bekerja dengan Vue SSR dan Nuxt; tidak menghalangi rendering statis | ✅ Bekerja dengan Vue SSR/Nuxt | | **Tree-shaking (mengirim hanya konten yang digunakan)** | ✅ Per-komponen saat build time | ⚠️ Sebagian; membutuhkan pemisahan kode/manual dan pesan async | | **Lazy loading** | ✅ Per-locale / per-kamus | ✅ Mendukung pesan locale async | | **Purge unused content** | ✅ Ya (saat build) | ❌ Tidak bawaan | | **Maintainabilitas proyek besar** | ✅ Mendorong struktur modular yang ramah sistem desain | ✅ Mungkin, tapi membutuhkan disiplin file/namespace yang kuat | | **Ekosistem / komunitas** | ⚠️ Lebih kecil tapi tumbuh cepat | ✅ Besar dan matang dalam ekosistem Vue | --- ## Perbandingan mendalam ### 1) Arsitektur & skalabilitas - **vue-i18n**: Pengaturan umum menggunakan **katalog terpusat** per locale (opsional dibagi menjadi file/namespace). Blok SFC `<i18n>` memungkinkan pesan lokal tetapi tim sering kembali ke katalog bersama saat proyek berkembang. - **Intlayer**: Mendorong **kamus per-komponen** yang disimpan di samping komponen yang mereka layani. Ini mengurangi konflik antar tim, menjaga konten tetap dapat ditemukan, dan secara alami membatasi penyimpangan/kunci yang tidak terpakai. **Mengapa ini penting:** Dalam aplikasi Vue besar atau sistem desain, **konten modular** lebih mudah diskalakan dibandingkan katalog monolitik. --- ### 2) TypeScript & keamanan - **vue-i18n**: Dukungan TS yang baik; **pengetikan kunci ketat** biasanya membutuhkan skema/generik khusus dan konvensi yang hati-hati. - **Intlayer**: **Menghasilkan tipe yang ketat** dari konten Anda, memberikan **autocompletion IDE** dan **error saat kompilasi** untuk kesalahan ketik/kunci yang hilang. **Mengapa ini penting:** Pengetikan yang kuat menangkap masalah **sebelum** runtime. --- ### 3) Penanganan terjemahan yang hilang - **vue-i18n**: Peringatan/fallback **saat runtime** (misalnya, fallback locale atau kunci). - **Intlayer**: Deteksi **saat build** dengan peringatan/error di seluruh locale dan kunci. **Mengapa ini penting:** Penegakan saat build menjaga UI produksi tetap bersih dan konsisten. --- ### 4) Strategi Routing & URL (Vue Router/Nuxt) - **Keduanya** dapat bekerja dengan rute yang dilokalkan. - **Intlayer** menyediakan helper untuk **menghasilkan path yang dilokalkan**, **mengelola prefix locale**, dan mengeluarkan **`<link rel="alternate" hreflang>`** untuk SEO. Dengan Nuxt, ini melengkapi routing framework. **Mengapa ini penting:** Lebih sedikit lapisan penghubung kustom dan **SEO yang lebih bersih** di berbagai locale. --- ### 5) Performa & perilaku pemuatan - **vue-i18n**: Mendukung pesan locale secara async; menghindari over-bundling adalah tanggung jawab Anda (pisahkan katalog dengan hati-hati). - **Intlayer**: **Melakukan tree-shaking** saat build dan **lazy-load per kamus/locale**. Konten yang tidak digunakan tidak dikirim. **Mengapa ini penting:** Bundle yang lebih kecil dan startup lebih cepat untuk aplikasi Vue multi-locale. --- ### 6) Pengalaman pengembang & tooling - **vue-i18n**: Dokumentasi dan komunitas yang matang; Anda biasanya akan mengandalkan **platform lokalisasi eksternal** untuk alur kerja editorial. - **Intlayer**: Menyediakan **Visual Editor gratis**, **CMS opsional** (ramah Git atau eksternal), **ekstensi VSCode**, utilitas **CLI/CI**, dan **terjemahan berbantuan AI** menggunakan kunci penyedia Anda sendiri. **Mengapa ini penting:** Biaya operasional lebih rendah dan siklus dev–konten yang lebih singkat. --- ### 7) SEO, SSR & SSG - **Keduanya** bekerja dengan Vue SSR dan Nuxt. - **Intlayer**: Menambahkan **helper SEO** (sitemap/metadata/`hreflang`) yang tidak tergantung pada framework dan bekerja dengan baik pada build Vue/Nuxt. **Mengapa ini penting:** SEO internasional tanpa pengaturan khusus. --- ## Mengapa Intlayer? (Masalah & pendekatan) Sebagian besar stack i18n (termasuk **vue-i18n**) dimulai dari **katalog terpusat**: ```bash . ├── locales │ ├── en.json │ ├── es.json │ └── fr.json └── src └── components └── MyComponent.vue ``` Atau dengan folder per-locale: ```bash . ├── locales │ ├── en │ │ ├── footer.json │ │ └── navbar.json │ ├── fr │ │ ├── footer.json │ │ └── navbar.json │ └── es │ ├── footer.json │ └── navbar.json └── src └── components └── MyComponent.vue ``` Ini sering memperlambat pengembangan seiring pertumbuhan aplikasi: 1. **Untuk komponen baru** Anda membuat/mengedit katalog jarak jauh, menghubungkan namespace, dan menerjemahkan (seringkali melalui salin/tempel manual dari alat AI). 2. **Saat mengubah komponen** Anda mencari kunci bersama, menerjemahkan, menjaga sinkronisasi locale, menghapus kunci mati, dan menyelaraskan struktur JSON. **Intlayer** mengatur konten **per-komponen** dan menyimpannya **di sebelah kode**, seperti yang sudah kita lakukan dengan CSS, stories, tests, dan docs: ```bash . └── components └── MyComponent ├── MyComponent.content.ts └── MyComponent.vue ``` **Deklarasi konten** (per komponen): ```ts fileName="./components/MyComponent/MyComponent.content.ts" import { t, type Dictionary } from "intlayer"; const componentExampleContent = { key: "component-example", content: { greeting: t({ en: "Hello World", es: "Hola Mundo", fr: "Bonjour le monde", }), }, } satisfies Dictionary; export default componentExampleContent; ``` **Penggunaan di Vue** (Composition API): ```vue fileName="./components/MyComponent/MyComponent.vue" <script setup lang="ts"> import { useIntlayer } from "vue-intlayer"; // Integrasi Vue const { greeting } = useIntlayer("component-example"); </script> <template> <span>{{ greeting }}</span> </template> ``` Pendekatan ini: - **Mempercepat pengembangan** (deklarasi sekali; IDE/AI melengkapi otomatis). - **Membersihkan codebase** (1 komponen = 1 kamus). - **Mempermudah duplikasi/migrasi** (salin komponen dan kontennya bersama-sama). - **Menghindari dead keys** (komponen yang tidak digunakan tidak mengimpor konten). - **Mengoptimalkan pemuatan** (komponen yang dimuat secara malas membawa kontennya sendiri). --- ## Fitur tambahan Intlayer (relevan untuk Vue) - **Dukungan lintas-framework**: Bekerja dengan Vue, Nuxt, Vite, React, Express, dan lainnya. - **Manajemen konten berbasis JavaScript**: Deklarasikan dalam kode dengan fleksibilitas penuh. - **File deklarasi per-locale**: Menyediakan semua locale dan membiarkan tooling menghasilkan sisanya. - **Lingkungan yang aman tipe**: Konfigurasi TS yang kuat dengan autocompletion. - **Pengambilan konten yang disederhanakan**: Satu hook/composable untuk mengambil semua konten untuk sebuah kamus. - **Codebase yang terorganisir**: 1 komponen = 1 kamus dalam folder yang sama. - **Routing yang ditingkatkan**: Bantuan untuk **Vue Router/Nuxt** jalur dan metadata yang dilokalkan. - **Dukungan Markdown**: Impor Markdown jarak jauh/lokal per locale; mengekspose frontmatter ke kode. - **Editor Visual Gratis & CMS opsional**: Penulisan tanpa platform lokalisasi berbayar; sinkronisasi ramah Git. - **Konten yang dapat di-tree-shake**: Mengirim hanya apa yang digunakan; mendukung lazy loading. - **Ramah rendering statis**: Tidak menghalangi SSG. - **Terjemahan bertenaga AI**: Terjemahkan ke 231 bahasa menggunakan penyedia AI/API key Anda sendiri. - **Server MCP & ekstensi VSCode**: Otomatiskan alur kerja i18n dan penulisan konten di dalam IDE Anda. - **Interoperabilitas**: Menghubungkan dengan **vue-i18n**, **react-i18next**, dan **react-intl** saat diperlukan. --- ## Kapan memilih yang mana? - **Pilih vue-i18n** jika Anda menginginkan **pendekatan Vue standar**, nyaman mengelola katalog/namespace sendiri, dan aplikasi Anda berukuran **kecil hingga menengah** (atau Anda sudah menggunakan Nuxt i18n). - **Pilih Intlayer** jika Anda menghargai **konten yang dibatasi pada komponen**, **TypeScript yang ketat**, **jaminan waktu build**, **tree-shaking**, dan alat routing/SEO/editor yang **lengkap** — terutama untuk **codebase Vue/Nuxt yang besar dan modular**, sistem desain, dll. --- ## Interoperabilitas dengan vue-i18n `intlayer` juga dapat membantu mengelola namespace `vue-i18n` Anda. Dengan menggunakan `intlayer`, Anda dapat mendeklarasikan konten Anda dalam format perpustakaan i18n favorit Anda, dan intlayer akan menghasilkan namespace Anda di lokasi pilihan Anda (contoh: `/messages/{{locale}}/{{namespace}}.json`). Lihat opsi [`dictionaryOutput` dan `i18nextResourcesDir`](https://intlayer.org/doc/concept/configuration#content-configuration) untuk detail lebih lanjut. --- ## GitHub STARs Bintang GitHub adalah indikator kuat dari popularitas proyek, kepercayaan komunitas, dan relevansi jangka panjang. Meskipun bukan ukuran langsung dari kualitas teknis, bintang mencerminkan berapa banyak pengembang yang menganggap proyek tersebut berguna, mengikuti perkembangannya, dan kemungkinan akan mengadopsinya. Untuk memperkirakan nilai sebuah proyek, bintang membantu membandingkan daya tarik di antara alternatif dan memberikan wawasan tentang pertumbuhan ekosistem. [](https://www.star-history.com/#intlify/vue-i18n&aymericzip/intlayer) --- ## Kesimpulan Baik **vue-i18n** maupun **Intlayer** sama-sama melakukan lokalisasi aplikasi Vue dengan baik. Perbedaannya adalah **seberapa banyak yang harus Anda bangun sendiri** untuk mencapai pengaturan yang kuat dan dapat diskalakan: - Dengan **Intlayer**, **konten modular**, **TS ketat**, **keamanan saat build**, **bundle tree-shaken**, dan **tooling router/SEO/editor** tersedia **langsung**. - Jika tim Anda memprioritaskan **pemeliharaan dan kecepatan** dalam aplikasi Vue/Nuxt multi-locale yang berbasis komponen, Intlayer menawarkan pengalaman yang **paling lengkap** saat ini. Lihat dokumen ['Mengapa Intlayer?'](https://intlayer.org/doc/why) untuk detail lebih lanjut.