@intlayer/docs 9.5.5 → 9.5.7

package/blog/id/vue-i18n_vs_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-11
-updatedAt: 2025-08-23
+updatedAt: 2026-09-22
 title: vue-i18n vs Intlayer
 description: Membandingkan vue-i18n dengan Intlayer untuk internasionalisasi (i18n) dalam aplikasi Vue/Nuxt
 keywords:
@@ -20,6 +20,8 @@ author: aymericzip
 
 # vue-i18n VS Intlayer | Internasionalisasi Vue (i18n)
 
+![Vue i18n library ecosystem](https://github.com/aymericzip/intlayer/blob/main/docs/assets/cloud_i18n_logo.webp?raw=true)
+
 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:
 
@@ -40,6 +42,30 @@ Kami fokus pada tooling Vue modern (Vite, Composition API) dan mengevaluasi:
 - **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**.
 
+## Berapa biayanya pada waktu build
+
+Sebelum tabel fitur, bagian yang diukur. [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) membangun aplikasi Vite + Vue 3 yang sama (10 halaman, 10 lokal) dengan setiap library dan mencatat apa yang diunduh browser:
+
+<I18nBenchmark framework="vite-vue" vertical/>
+
+| Setup                | Lib size (gz) | Page JS avg (gz) | Page leak | Component avg (gz) |
+| -------------------- | ------------: | ---------------: | --------: | -----------------: |
+| **base** (no i18n)   |        0.0 KB |          41.3 KB |         - |             1.1 KB |
+| `vue-i18n`           |       24.3 KB |         134.9 KB |     90.0% |           196.0 KB |
+| `@intlayer/vue-i18n` |        7.9 KB |          47.0 KB |      0.0% |             8.4 KB |
+| **`vue-intlayer`**   |    **3.9 KB** |      **57.1 KB** |  **0.0%** |         **7.7 KB** |
+
+Runtime `vue-i18n` saja berbobot **6x** Intlayer, setiap halaman membawa **90% string halaman asing**, dan komponen yang dikompilasi secara terisolasi menarik **196 KB** karena `useI18n()` mengikatnya ke hierarki pesan global. Laporan lengkap dengan pengaturan waktu reaktivitas dan pemuatan halaman ada di [benchmark vue-i18n vs Intlayer](https://intlayer.org/id/blog/vue-i18n-vs-intlayer-benchmark).
+
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_vue.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Tabel lengkap dalam [laporan benchmark Vue](https://intlayer.org/id/doc/benchmark/vue).
+
 ## Perbandingan Fitur Berdampingan (Fokus pada Vue)
 
 | Fitur                                                   | **Intlayer**                                                                                   | **vue-i18n**                                                                           |
@@ -65,59 +91,74 @@ Kami fokus pada tooling Vue modern (Vite, Composition API) dan mengevaluasi:
 
 ## Perbandingan mendalam
 
-### 1) Arsitektur & skalabilitas
+<AccordionGroup>
+<Accordion header="1) Arsitektur dan 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.
+- **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. Lihat [i18n per komponen vs terpusat](https://intlayer.org/id/blog/per-component-vs-centralized-i18n).
 - **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
+</Accordion>
+<Accordion header="2) TypeScript dan keamanan tipe">
 
 - **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
+</Accordion>
+<Accordion header="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.
+- **vue-i18n**: Peringatan/fallback **saat runtime** (misalnya, fallback locale atau kunci). Lihat [mendeteksi terjemahan yang hilang](https://intlayer.org/id/blog/detecting-missing-translations).
+- **Intlayer**: Deteksi **saat build** dengan peringatan/error di seluruh locale dan kunci., ditambah `npx intlayer test` di CI.
 
 **Mengapa ini penting:** Penegakan saat build menjaga UI produksi tetap bersih dan konsisten.
 
-### 4) Strategi Routing & URL (Vue Router/Nuxt)
+</Accordion>
+<Accordion header="4) Strategi perutean dan URL (Vue Router/Nuxt)">
 
-- **Keduanya** dapat bekerja dengan rute yang dilokalkan.
+- **Keduanya** dapat bekerja dengan rute yang dilokalkan. Lihat [panduan hreflang](https://intlayer.org/id/blog/hreflang-guide-multilingual-seo).
 - **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
+</Accordion>
+<Accordion header="5) Kinerja dan perilaku pemuatan">
 
-- **vue-i18n**: Mendukung pesan locale secara async; menghindari over-bundling adalah tanggung jawab Anda (pisahkan katalog dengan hati-hati).
+- **vue-i18n**: Mendukung pesan locale secara async; menghindari over-bundling adalah tanggung jawab Anda (pisahkan katalog dengan hati-hati). Benchmark di atas membuktikannya dengan angka: 134.9 KB berbanding 57.1 KB per halaman.
 - **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
+</Accordion>
+<Accordion header="6) Pengalaman pengembang dan perkakas">
 
 - **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.
+- **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., sebuah **server MCP**
 
 **Mengapa ini penting:** Biaya operasional lebih rendah dan siklus dev–konten yang lebih singkat.
 
-### 7) SEO, SSR & SSG
+</Accordion>
+<Accordion header="7) SEO, SSR dan SSG">
 
-- **Keduanya** bekerja dengan Vue SSR dan Nuxt.
+- **Keduanya** bekerja dengan Vue SSR dan Nuxt. Lihat [internasionalisasi dan SEO](https://intlayer.org/id/blog/SEO-and-i18n).
 - **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.
 
+</Accordion>
+</AccordionGroup>
+
 ## Mengapa Intlayer? (Masalah & pendekatan)
 
+![Centralized catalogs versus per-component dictionaries](https://github.com/aymericzip/intlayer/blob/main/docs/assets/project_stucture_18n_vs_intlayer.png?raw=true)
+
 Sebagian besar stack i18n (termasuk **vue-i18n**) dimulai dari **katalog terpusat**:
 
+<Tabs defaultTab="per-locale" group="catalog">
+<Tab label="Satu berkas per lokal" value="per-locale">
+
 ```bash
 .
 ├── locales
@@ -129,7 +170,8 @@ Sebagian besar stack i18n (termasuk **vue-i18n**) dimulai dari **katalog terpusa
         └── MyComponent.vue
 ```
 
-Atau dengan folder per-locale:
+</Tab>
+<Tab label="Satu folder per lokal" value="per-folder">
 
 ```bash
 .
@@ -148,6 +190,34 @@ Atau dengan folder per-locale:
         └── MyComponent.vue
 ```
 
+</Tab>
+</Tabs>
+
+Folder tersebut terus berkembang, satu namespace per fitur, di setiap lokal:
+
+```txt
+locales
+├── EN
+│   ├── blog.json
+│   ├── about.json
+│   ├── auth.json
+│   ├── blog.json
+│   ├── cart.json
+│   ├── categories.json
+│   ├── contact.json
+│   ├── dashboard.json
+│   ├── errors.json
+│   ├── faq.json
+│   ├── footer.json
+│   ├── form.json
+│   ├── home.json
+│   ├── language.json
+│   ├── navbar.json
+│   ├── ... 65 files
+│   └── validation.json
+└── ES
+```
+
 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).
@@ -163,7 +233,33 @@ Ini sering memperlambat pengembangan seiring pertumbuhan aplikasi:
         └── MyComponent.vue
 ```
 
-**Deklarasi konten** (per komponen):
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="vue-i18n" value="vue-i18n">
+
+```json fileName="./locales/en.json"
+{
+  "componentExample": {
+    "greeting": "Hello World"
+  }
+}
+```
+
+```vue fileName="./components/MyComponent.vue"
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <span>{{ t("componentExample.greeting") }}</span>
+</template>
+```
+
+Setiap berkas lokal harus diedit secara manual, dan kuncinya adalah string biasa: kesalahan ketik akan dirender sebagai `componentExample.greting` di produksi.
+
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="./components/MyComponent/myComponent.content.ts"
 import { t, type Dictionary } from "intlayer";
@@ -173,8 +269,8 @@ const componentExampleContent = {
   content: {
     greeting: t({
       en: "Hello World",
-      es: "Hola Mundo",
       fr: "Bonjour le monde",
+      es: "Hola Mundo",
     }),
   },
 } satisfies Dictionary;
@@ -182,11 +278,10 @@ const componentExampleContent = {
 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
+import { useIntlayer } from "vue-intlayer"; // Vue integration
+
 const { greeting } = useIntlayer("component-example");
 </script>
 
@@ -195,6 +290,11 @@ const { greeting } = useIntlayer("component-example");
 </template>
 ```
 
+Semua lokal berada dalam satu berkas bertipe di samping komponen.
+
+</Tab>
+</Tabs>
+
 Pendekatan ini:
 
 - **Mempercepat pengembangan** (deklarasi sekali; IDE/AI melengkapi otomatis).
@@ -222,20 +322,71 @@ Pendekatan ini:
 
 ## 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.
+<AccordionGroup>
+<Accordion header="Pilih vue-i18n">
+
+Anda menginginkan **pendekatan standar Vue**, Anda nyaman mengelola katalog dan namespace sendiri, dan aplikasi Anda berukuran **kecil hingga menengah** (atau Anda sudah mengandalkan Nuxt i18n). Blok SFC `<i18n>` dan `setLocaleMessage()` runtime adalah fitur yang sengaja tidak direplikasi oleh Intlayer.
+
+</Accordion>
+<Accordion header="Pilih Intlayer">
+
+Anda menghargai **konten scoped komponen**, **TypeScript yang ketat**, **jaminan saat build**, **tree-shaking**, dan perkakas lengkap untuk perutean, SEO, dan editor, terutama untuk **basis kode modular Vue/Nuxt besar** dan sistem desain. Mulai dengan [Intlayer dengan Vue](https://intlayer.org/id/doc/environment/vite-and-vue) atau [dengan Nuxt](https://intlayer.org/id/doc/environment/nuxt-and-vue).
+
+</Accordion>
+<Accordion header="Pilih @intlayer/vue-i18n">
+
+Anda menggunakan `vue-i18n` hari ini dan menginginkan keuntungan bundel tanpa mengedit berkas `.vue`. [Adapter kompatibilitas](https://intlayer.org/id/doc/compatibility/vue-i18n) mempertahankan `createI18n`, `useI18n`, `t()`, `d()`, `n()`, `$t` dan `v-t`, dan menyajikannya dari kamus yang dikompilasi. Diukur berdampingan di [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/id/blog/vue-i18n-vs-intlayer-vue-i18n).
+
+</Accordion>
+</AccordionGroup>
 
 ## 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`).
+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 [dokumen kompatibilitas vue-i18n](https://intlayer.org/id/doc/compatibility/vue-i18n) dan [adapter Nuxt i18n](https://intlayer.org/id/doc/compatibility/nuxtjs-i18n).
+
+## FAQ
+
+<FAQ>
+
+<Question title="Apakah Intlayer pengganti vue-i18n atau lapisan di atasnya?">
+
+Keduanya, tergantung cara Anda mengadopsinya. `vue-intlayer` adalah runtime native dengan composable `useIntlayer()` sendiri. `@intlayer/vue-i18n` adalah adapter kompatibilitas yang mempertahankan API `vue-i18n` dan menukar apa yang diikatnya, sehingga Anda dapat bermigrasi tanpa menyentuh komponen dan melanjutkannya berkas demi berkas setelahnya.
+
+</Question>
+
+<Question title="Apa yang terjadi pada blok SFC <i18n> saya?">
+
+Adapter tidak membacanya. Pindahkan pesan tersebut ke JSON lokal Anda, atau ke `.content.ts` di sebelah komponen, yang merupakan konsep serupa dengan tipe yang dihasilkan. Itu adalah satu-satunya fitur `vue-i18n` yang tidak terbawa.
+
+</Question>
+
+<Question title="Apakah Intlayer berfungsi dengan Nuxt?">
+
+Ya. [Intlayer dengan Nuxt](https://intlayer.org/id/doc/environment/nuxt-and-vue) mencakup perutean multibahasa, middleware deteksi lokal, dan pembuatan peta situs. Jika Anda menggunakan `@nuxtjs/i18n`, [adapter kompatibilitas Nuxt i18n](https://intlayer.org/id/doc/compatibility/nuxtjs-i18n) adalah jalur migrasinya.
+
+</Question>
+
+<Question title="Bisakah saya mempertahankan locales/{locale}.json sebagai sumber kebenaran?">
+
+Ya. [Plugin sinkronisasi JSON](https://intlayer.org/id/doc/compatibility/vue-i18n) membacanya dengan dialek `vue-i18n` (`{name}`, `{0}`, bentuk jamak pipa `"car | cars"`) dan menulis kembali terjemahan saat CLI atau CMS memperbaruinya.
+
+</Question>
+
+<Question title="Apakah ICU berfungsi dengan Intlayer di Vue?">
+
+Dukungan ICU bawaan sedang dalam pengerjaan. Adapter `@intlayer/vue-i18n` menyelesaikan sintaks pesan `vue-i18n` sendiri, termasuk bentuk jamak pipa dan interpolasi bernama serta daftar. Untuk model pluralisasi Intlayer, lihat [konten enumerasi](https://intlayer.org/id/doc/concept/content/enumeration).
+
+</Question>
+
+</FAQ>
 
 ## 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.
 
-[![Grafik Riwayat Bintang](https://api.star-history.com/svg?repos=intlify/vue-i18n&repos=aymericzip/intlayer&type=Date)](https://star-history.com/#intlify/vue-i18n&aymericzip/intlayer)
+[![Grafik Riwayat Bintang](https://api.star-history.com/chart?repos=intlify%2Fvue-i18n%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://star-history.com/#intlify/vue-i18n&aymericzip/intlayer)
 
 ## Kesimpulan
 
@@ -244,4 +395,15 @@ Baik **vue-i18n** maupun **Intlayer** sama-sama melakukan lokalisasi aplikasi Vu
 - 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.
+## Bacaan lebih lanjut
+
+- [vue-i18n vs Intlayer benchmark](https://intlayer.org/id/blog/vue-i18n-vs-intlayer-benchmark), the measured run behind the table above
+- [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/id/blog/vue-i18n-vs-intlayer-vue-i18n), the adapter on the same app
+- [Is vue-i18n outdated?](https://intlayer.org/id/blog/is-vue-i18n-outdated)
+- [How to pick a Vue i18n library](https://intlayer.org/id/blog/how-to-pick-vue-i18n-library)
+- [Using Intlayer with vue-i18n](https://intlayer.org/id/blog/intlayer-with-vue-i18n)
+- [Vue benchmark report](https://intlayer.org/id/doc/benchmark/vue)
+- [Migration guide: vue-i18n to Intlayer](https://intlayer.org/id/doc/migration/vue-i18n)
+- [Bundle optimization](https://intlayer.org/id/doc/concept/bundle-optimization) and [the Intlayer compiler](https://intlayer.org/id/doc/compiler)
+
+Refer to ['Why Intlayer?' doc](https://intlayer.org/id/doc/why) for more details.