Migrasi dari @nuxtjs/i18n ke Intlayer

Mengapa bermigrasi dari @nuxtjs/i18n ke Intlayer?

Strategi Migrasi

Karena @nuxtjs/i18n didukung oleh vue-i18n di balik layar, ada dua strategi pelengkap untuk migrasi ke Intlayer:

1. Compat adapter (direkomendasikan untuk aplikasi yang sudah ada) — Instal @intlayer/vue-i18n dan nuxt-intlayer. Ini mengekspos API yang sama persis seperti vue-i18n tetapi mendelegasikan semua pekerjaan terjemahan ke Intlayer di balik layar. Anda mempertahankan $t, useI18n(), dan routing Nuxt yang sudah ada — satu-satunya perubahan adalah inisialisasi.

2. Migrasi penuh — Secara bertahap ganti API @nuxtjs/i18n dengan hooks Intlayer asli (useIntlayer) dan co-locate konten dalam file .content.ts bersama komponen Anda.

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

Daftar Isi

Migrasi cepat

Langkah-langkah berikut adalah persyaratan minimum untuk menjalankan aplikasi Nuxt Anda yang sudah ada di Intlayer tanpa perubahan kode di 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 menginstal paket yang diperlukan. Contohnya:

   bash

   Salin konten

   Salin kode

   Salin kode ke clipboard

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

   Anda dapat dengan aman menyimpan @nuxtjs/i18n terinstal selama migrasi, meskipun Anda akan menghapusnya dari konfigurasi Nuxt Anda segera.

2. 2

   Configure Intlayer

   Perintah intlayer init membuat intlayer.config.ts pemula. Perbarui untuk mencocokkan locale yang 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 ada di sini
       ],
       defaultLocale: Locales.ENGLISH,
     },
     plugins: [
       syncJSON({
         // cocok dengan sintaks placeholder vue-i18n: {name}
         format: "icu",
         source: ({ locale }) => `./locales/${locale}.json`,
         location: "locales",
       }),
     ],
   };
   
   export default config;

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

3. 3

   Update Nuxt Configuration

   Ganti modul @nuxtjs/i18n dengan nuxt-intlayer di nuxt.config.ts Anda. Plugin Intlayer secara otomatis menyuntikkan alias modul, yang berarti panggilan import { useI18n } from 'vue-i18n' yang sudah ada dialihkan secara transparan ke @intlayer/vue-i18n.

   nuxt.config.ts

   Salin konten

   Salin kode

   Salin kode ke clipboard

   export default defineNuxtConfig({
     // Hapus '@nuxtjs/i18n'
     modules: ["nuxt-intlayer"],
   });

   Anda tidak perlu lagi menentukan objek konfigurasi Nuxt i18n. Intlayer mengompilasi semua dictionary pada waktu build, menangani deteksi locale, routing, dan pemuatan dictionary dengan mulus.

Itulah semua untuk migrasi cepat. Aplikasi Nuxt Anda sekarang berjalan di Intlayer sambil menjaga setiap $t dan useI18n() tetap utuh.

Migrasi Lengkap

Langkah-langkah di bawah ini bersifat opsional dan dapat dilakukan secara bertahap. Langkah-langkah ini membuka akses ke set fitur Intlayer lengkap: visual editor, CMS, typed content files, AI-powered translation, 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 di 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'

   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

   # Uji 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 }) => `./locales/${locale}.json`,
         location: "locales",
       }),
     ],
     ai: {
       apiKey: process.env.OPENAI_API_KEY,
       // provider: "openai",     // default
       // model: "gpt-4o-mini",   // default
     },
   };
   
   export default config;

   Lihat dokumentasi Intlayer CLI untuk semua opsi yang tersedia.

Yang dapat Anda hapus setelah migrasi

Setelah adapter kompatibilitas sudah disiapkan, boilerplate berikut dapat dihapus:

Ketika Anda siap untuk melanjutkan, Intlayer secara otomatis menemukan semua file .content.ts dan .content.json di mana pun dalam codebase Anda (secara default, di mana pun di dalam ./src). Anda dapat menempatkan file my-component.content.ts tepat di sebelah MyComponent.vue Anda dan Intlayer akan mengambilnya pada saat build tanpa konfigurasi tambahan — tidak ada imports, tidak ada registration, tidak ada file index terpusat yang diperlukan. Ini membuat co-locating translations dengan pages dan components menjadi sangat mudah.

Konfigurasi TypeScript

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

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

Konfigurasi Git

Tambahkan direktori yang dihasilkan oleh Intlayer ke .gitignore Anda:

# Ignore the files generated by Intlayer.intlayer

Langkah Selanjutnya

• 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 Nuxt — Panduan setup lengkap untuk Nuxt: intlayerwithnuxt.md
• Intlayer with Vue — Panduan setup lengkap untuk Vue: intlayerwithvite+vue.md