Migrasi dari vue-i18n ke Intlayer

Mengapa bermigrasi dari vue-i18n ke Intlayer?

Strategi Migrasi

Ada dua strategi pelengkap untuk bermigrasi dari vue-i18n ke Intlayer:

1. Compat adapter (direkomendasikan untuk aplikasi yang sudah ada) — Instal @intlayer/vue-i18n (untuk komponen Vue). Package ini mengekspos API yang sama persis seperti vue-i18n tetapi mendelegasikan semua pekerjaan terjemahan ke Intlayer di balik layar. Anda menyimpan panggilan $t, useI18n(), dan <i18n-t> yang sudah ada — satu-satunya perubahan adalah path import dan inisialisasi.

2. Migrasi penuh — Secara bertahap gantikan API vue-i18n dengan hooks Intlayer asli (useIntlayer) dan co-locate konten di file .content.ts bersama komponen Anda.

Panduan ini mencakup Strategy 1 terlebih dahulu (compat adapter drop-in), kemudian menjelaskan migrasi penuh opsional.

Daftar Isi

Migrasi Cepat

Langkah-langkah berikut adalah minimum yang diperlukan untuk menjalankan aplikasi vue-i18n yang sudah ada di Intlayer tanpa perubahan kode dalam komponen Anda.

1. 1

   Install Dependencies

   Install paket inti Intlayer dan adapter kompatibilitas:

   bash

   Salin konten

   Salin kode

   Salin kode ke clipboard

   npx intlayer-cli init --interactive

   flag --interactive bersifat opsional. Gunakan intlayer-cli init jika Anda adalah agen AI.

   Perintah ini akan mendeteksi lingkungan Anda dan menginstall paket yang diperlukan. Sebagai contoh:

   bash

   Salin konten

   Salin kode

   Salin kode ke clipboard

   npm install intlayer vue-intlayer @intlayer/vue-i18n @intlayer/sync-json-plugin

   Anda dapat tetap menginstal vue-i18n — adapter kompatibilitas menggunakannya sebagai devDependency / peerDependency untuk tipe TypeScript.

2. 2

   Configure Intlayer

   Perintah intlayer init membuat intlayer.config.ts pemula. Update untuk menyesuaikan dengan locale yang sudah ada dan arahkan plugin syncJSON ke file pesan Anda:

   intlayer.config.ts

   Salin konten

   Salin kode

   Salin kode ke clipboard

   import { Locales, type IntlayerConfig } from "intlayer";
   import { syncJSON } from "@intlayer/sync-json-plugin";
   
   const config: IntlayerConfig = {
     internationalization: {
       locales: [
         Locales.ENGLISH,
         Locales.FRENCH,
         Locales.SPANISH,
         // Tambahkan semua locale yang sudah ada di sini
       ],
       defaultLocale: Locales.ENGLISH,
     },
     plugins: [
       syncJSON({
         // cocok dengan sintaks placeholder vue-i18n: {name}
         format: "icu",
         source: ({ locale }) => `./src/locales/${locale}.json`,
         location: "src/locales",
       }),
     ],
   };
   
   export default config;

   source memetakan locale ke jalur file JSON-nya. location memberi tahu watcher Intlayer folder mana yang harus dipantau untuk perubahan. Opsi format: 'icu' memastikan bahwa placeholder diurai dengan benar untuk vue-i18n.

3. 3

   Add the Intlayer Plugin to your Bundler

   Bungkus konfigurasi bundler yang sudah ada dengan plugin kompatibilitas. Plugin ini menggabungkan plugin Intlayer inti, mengatur content watching, dan — yang penting — menyuntikkan alias modul sehingga panggilan import … from 'vue-i18n' yang sudah ada dialihkan secara transparan ke @intlayer/vue-i18n pada saat build. Tidak ada perubahan file sumber yang diperlukan.

   For Vite:

   vite.config.ts

   Salin konten

   Salin kode

   Salin kode ke clipboard

   import { defineConfig } from "vite";
   import vue from "@vitejs/plugin-vue";
   import { vueI18nVitePlugin } from "@intlayer/vue-i18n/plugin";
   
   export default defineConfig({
     plugins: [vue(), vueI18nVitePlugin()],
   });

   vueI18nVitePlugin() membungkus plugin intlayer() dari vite-intlayer dan menambahkan alias vue-i18n. Menggunakan plugin intlayer() biasa dari vite-intlayer mengompilasi kamus tetapi tidak menambahkan alias — Anda kemudian harus mengganti nama impor ke @intlayer/vue-i18n secara manual (lihat Langkah 4).

   For Nuxt:

   Jika Anda menggunakan @nuxtjs/i18n (integrasi Nuxt), install nuxt-intlayer dan tambahkan ke nuxt.config.ts Anda:

   bash

   Salin konten

   Salin kode

   Salin kode ke clipboard

   npm install nuxt-intlayer

   nuxt.config.ts

   Salin konten

   Salin kode

   Salin kode ke clipboard

   export default defineNuxtConfig({
     modules: ["nuxt-intlayer"],
     // Anda dapat dengan aman menghapus @nuxtjs/i18n dari modul Anda
   });

   Anda tidak lagi memerlukan createI18n() atau bootstrap provider manual. Intlayer mengompilasi semua kamus pada waktu build, jadi tidak ada langkah loading runtime. Provider dengan alias menangani inisialisasi untuk Anda.

Itu saja untuk migrasi cepat. Aplikasi Anda sekarang berjalan di Intlayer sambil mempertahankan setiap impor dan API vue-i18n.

Kunci terjemahan yang diketik — otomatis. Setelah Intlayer mengompilasi kamus Anda, useI18n diketik terhadap konten aktual Anda ketika Anda melewatkan opsi namespace. Kunci secara otomatis dilengkapi di IDE Anda dan jalur yang tidak valid menyebabkan kesalahan TypeScript pada waktu build — tidak ada pengaturan tambahan yang diperlukan.

ts

Salin konten

Salin kode

Salin kode ke clipboard

// 'about' adalah kunci kamus yang terdaftarconst { t } = useI18n({ namespace: "about" });t("counter.label"); // ✓ autocompletedt("does.not.exist"); // ✗ TypeScript error

Migrasi Lengkap

Langkah-langkah di bawah ini bersifat opsional dan dapat dilakukan secara bertahap. Mereka membuka kumpulan fitur Intlayer lengkap: editor visual, CMS, file konten yang diketik, terjemahan bertenaga AI, dan banyak lagi.

1. 4

   Explicit import renaming (optional)

   Opsional

   Plugin Intlayer sudah menangani aliasing di tingkat bundler. Jika Anda lebih suka membuat dependensi eksplisit dalam file sumber Anda, Anda dapat mengganti nama impor secara manual:

   Tampilkan semua isi tabel

   Tampilkan semua isi tabel

   Buka tabel dalam modal untuk melihat semua isi data dengan jelas

   Sebelum	Sesudah
   import { useI18n } from 'vue-i18n'	import { useI18n } from '@intlayer/vue-i18n'
   import { createI18n } from 'vue-i18n'	import { createI18n } from '@intlayer/vue-i18n'

   Ini adalah drop-in replacements — tidak ada perubahan pada tanda tangan panggilan, argumen, atau jenis pengembalian yang diperlukan.

2. 5

   Enable AI-Powered Translation Automation

   Opsional

   Setelah Intlayer terhubung, gunakan CLI-nya untuk mengisi terjemahan yang hilang secara otomatis:

   bash

   Salin konten

   Salin kode

   Salin kode ke clipboard

   # Test untuk terjemahan yang hilang (tambahkan ke CI)npx intlayer test# Isi terjemahan yang hilang dengan AInpx intlayer fill

   Tambahkan konfigurasi AI ke intlayer.config.ts:

   intlayer.config.ts

   Salin konten

   Salin kode

   Salin kode ke clipboard

   import { Locales, type IntlayerConfig } from "intlayer";
   import { syncJSON } from "@intlayer/sync-json-plugin";
   
   const config: IntlayerConfig = {
     internationalization: {
       locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
       defaultLocale: Locales.ENGLISH,
     },
     plugins: [
       syncJSON({
         format: "icu",
         source: ({ locale }) => `./src/locales/${locale}.json`,
         location: "src/locales",
       }),
     ],
     ai: {
       apiKey: process.env.OPENAI_API_KEY,
       // provider: "openai",     // default
       // model: "gpt-4o-mini",   // default
     },
   };
   
   export default config;

   Lihat dokumentasi CLI Intlayer untuk semua opsi yang tersedia.

Apa yang dapat Anda hapus setelah migrasi

Setelah adapter kompatibilitas ditempatkan, boilerplate vue-i18n berikut dapat dihapus:

Ketika Anda siap untuk melangkah lebih jauh, Intlayer secara otomatis menemukan semua file .content.ts dan .content.json di mana saja dalam codebase Anda (secara default, di mana saja di dalam ./src). Anda dapat menempatkan file my-component.content.ts tepat di sebelah MyComponent.vue Anda dan Intlayer akan mengambilnya pada waktu build tanpa konfigurasi tambahan — tidak ada imports, tidak ada registrasi, tidak ada file index terpusat yang diperlukan. Ini membuat co-locating translations dengan pages dan components benar-benar tanpa hambatan.

Konfigurasi TypeScript

Intlayer menggunakan module augmentation untuk memberikan intellisense TypeScript lengkap untuk kunci terjemahan Anda. Pastikan tsconfig.json Anda menyertakan tipe yang dibuat secara otomatis:

{  // ... Konfigurasi TypeScript yang sudah ada  "include": [    // ... Konfigurasi TypeScript yang sudah ada    ".intlayer/**/*.ts", // Sertakan tipe yang dibuat secara otomatis  ],}

Konfigurasi Git

Tambahkan direktori yang dihasilkan oleh Intlayer ke .gitignore Anda:

# Ignore the files generated by Intlayer.intlayer

Lanjutkan Lebih Jauh

• Visual Editor — Kelola terjemahan secara visual di browser Anda: Intlayer Visual Editor
• CMS — Eksternalisasi dan kelola konten dari jarak jauh: Intlayer CMS
• VS Code Extension — Dapatkan autocompletion dan deteksi kesalahan terjemahan real-time: Intlayer VS Code Extension
• CLI Reference — Daftar lengkap perintah CLI: Intlayer CLI
• Intlayer with Vue — Panduan setup lengkap untuk Vue: intlayerwithvite+vue.md
• Intlayer with Nuxt — Panduan setup lengkap untuk Nuxt: intlayerwithnuxt.md