• Apa Itu Plugin di Alpine.js?
• Cara Menggunakan Plugin Alpine.js
  • Tambahkan CDN Plugin
  • Inisialisasi Plugin
• Contoh Plugin: persist
• Contoh Plugin: mask
• Daftar Plugin Resmi Alpine.js
• Kesimpulan

Halo teman-teman semuanya, di seri sebelumnya, kita sudah belajar cara menggunakan Fetch API di Alpine.js untuk mengambil data dari server. Sekarang kita akan masuk ke topik yang nggak kalah seru, yaitu Menggunakan Plugin di Alpine.js.

Dengan plugin, kita bisa memperluas fungsionalitas Alpine.js tanpa harus menulis semuanya dari nol. Plugin ini sangat membantu, apalagi untuk fitur yang kompleks seperti masking input, persist data ke localStorage, integrasi dengan third-party library, dan lain-lain.

Apa Itu Plugin di Alpine.js?

Plugin adalah ekstensi resmi atau buatan komunitas yang bisa kita tambahkan ke Alpine.js untuk menambah fitur baru. Contohnya:

• Persist - Menyimpan data ke localStorage
• Mask - Membuat input masking
• Collapse - Animasi untuk membuka dan menutup elemen
• Focus - Mengatur fokus elemen
• Dan masih banyak lagi!

Cara Menggunakan Plugin Alpine.js

1. Tambahkan CDN Plugin

   Kita bisa langsung menyertakan plugin melalui tag <script> sebelum inisialisasi Alpine:

   <!-- Alpine Core -->
   <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
   
   <!-- Alpine Plugin: Persist -->
   <script src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js" defer></script>
   
   

2. Inisialisasi Plugin

   Setelah script plugin ditambahkan, kita perlu menginisialisasinya menggunakan Alpine.plugin(...):

   <script>
     document.addEventListener('alpine:init', () => {
       Alpine.plugin(persist)
     });
   </script>
   

Contoh Plugin: persist

Plugin ini berguna untuk menyimpan data di localStorage, sehingga data tetap tersimpan meskipun halaman direfresh.

<div x-data="{ tema: $persist('terang') }">
  <select x-model="tema">
    <option value="terang">Terang</option>
    <option value="gelap">Gelap</option>
  </select>

  <p x-text="`Tema saat ini: ${tema}`"></p>
</div>

Setiap kali kita mengganti nilai tema, nilai tersebut otomatis disimpan ke localStorage.

Contoh Plugin: mask

Plugin ini digunakan untuk input dengan format tertentu, seperti nomor telepon atau tanggal.

<!-- Tambahkan plugin -->
<script src="https://cdn.jsdelivr.net/npm/@alpinejs/mask@3.x.x/dist/cdn.min.js" defer></script>

<!-- Inisialisasi -->
<script>
  document.addEventListener('alpine:init', () => {
    Alpine.plugin(mask)
  });
</script>

<!-- Penggunaan -->
<input x-mask="9999-9999-9999" placeholder="Masukkan Nomor Kartu">

Daftar Plugin Resmi Alpine.js

Berikut beberapa plugin resmi dari Alpine:

Semua plugin bisa dilihat di halaman resminya:

---

👉 https://alpinejs.dev/plugins

Kesimpulan

Plugin di Alpine.js sangat membantu kita untuk menambah fitur tanpa harus repot menulis semuanya dari awal. Di artikel ini, kita sudah belajar cara:

• Menambahkan plugin via CDN
• Inisialisasi plugin dengan Alpine.plugin(...)
• Menggunakan plugin seperti persist dan mask

Di seri selanjutnya, kita akan bahas Studi Kasus Mini Project Alpine.js, supaya semua yang sudah kita pelajari bisa langsung diterapkan dalam satu proyek kecil.

Terima Kasih