Memasang Vue sebagai island

Komponen Vue di Astro bukan aplikasi Vue. Ia potongan yang berdiri sendiri, tanpa router, dan dengan aturan props yang lebih ketat.

Memasangnya

pnpm astro add vue

// astro.config.mjs
import vue from "@astrojs/vue";

export default defineConfig({
  integrations: [
    vue({
      // Berkas .vue yang TIDAK perlu jadi island bisa dikecualikan
      // supaya tidak ikut diproses.
      devtools: false,
    }),
  ],
});

Komponen pertama

// src/components/FilterKategori.vue
<script setup lang="ts">
import { ref, computed } from "vue";

const props = defineProps<{
  kategori: { slug: string; nama: string; jumlah: number }[];
  terpilih: string;
}>();

const cari = ref("");

const terlihat = computed(() =>
  props.kategori.filter((k) =>
    k.nama.toLowerCase().includes(cari.value.toLowerCase()),
  ),
);
</script>

<template>
  <div class="filter">
    <input v-model="cari" type="search" placeholder="Cari kategori…" />

    <ul>
      <li v-for="k in terlihat" :key="k.slug">
        <a :href="`/berita/${k.slug}`" :aria-current="k.slug === terpilih ? 'page' : undefined">
          {{ k.nama }} <span class="jml">{{ k.jumlah }}</span>
        </a>
      </li>
    </ul>
  </div>
</template>

---
import FilterKategori from "@/components/FilterKategori.vue";
import { ambilKategoriDenganJumlah } from "@/lib/kategori";

const kategori = await ambilKategoriDenganJumlah();
---
<FilterKategori client:visible kategori={kategori} terpilih={Astro.params.kategori ?? ""} />

Aturan props yang berbeda dari Vue biasa

Props dari Astro ke island diserialisasi jadi JSON dan ditanam di HTML, lalu di-parse ulang di browser. Konsekuensinya keras:

<!-- BURUK: 200 artikel lengkap ikut ke HTML -->
<TabelArtikel client:visible artikel={semuaArtikel} />

<!-- BAIK: 20 baris pertama untuk render awal, sisanya diambil island -->
<TabelArtikel client:visible awal={artikel.slice(0, 20)} total={total} />

Tiap island berdiri sendiri

<FilterKategori client:visible … />
<TabelPerusahaan client:visible … />
<MenuAkun client:load … />

Ini tiga aplikasi Vue terpisah. Mereka tidak berbagi provide/inject, tidak berbagi Pinia store, dan tidak bisa saling memanggil method. Kalau kamu datang dari Nuxt, ini pergeseran mental terbesarnya.

Untuk state yang benar-benar harus dibagi, ada nanostores — dibahas di materi tersendiri di fase ini. Tapi pertanyaan pertama selalu: apakah ia benar-benar harus dibagi? Sebagian besar tidak.

Slot

<Akordeon client:visible>
  <h3 slot="judul">Rincian keuangan</h3>
  <p>Isi ini dirender Astro, bukan Vue.</p>
</Akordeon>

<template>
  <details>
    <summary><slot name="judul" /></summary>
    <slot />
  </details>
</template>

Isi slot dirender oleh Astro di server dan diserahkan sebagai HTML. Ia tidak reaktif — Vue tidak bisa mengubahnya, dan variabel Vue tidak bisa dipakai di dalamnya. Untuk isi statis di dalam komponen interaktif, ini justru ideal: teksnya ikut terindeks mesin pencari.

Yang tidak dipakai di Astro

Mengambil data dari dalam island

<script setup lang="ts">
import { ref, onMounted } from "vue";

const data = ref<Perusahaan[]>([]);
const memuat = ref(true);
const galat = ref<string | null>(null);

onMounted(async () => {
  try {
    const res = await fetch("/api/perusahaan.json?batas=50", {
      signal: AbortSignal.timeout(5000),
    });
    if (!res.ok) throw new Error(`status ${res.status}`);
    data.value = (await res.json()).data;
  } catch (e) {
    galat.value = "Gagal memuat data. Coba muat ulang halaman.";
  } finally {
    memuat.value = false;
  }
});
</script>