Cara Menghubungkan EmDash CMS dengan Nuxt.js
Titik awal yang sama jujurnya seperti mengevaluasi frontend non-Astro mana pun buat EmDash: dokumentasinya sendiri menyatakan dengan jelas bahwa EmDash "bukan headless CMS — terintegrasi ketat dengan Astro dan berjalan di deployment yang sama, alih-alih sebagai layanan terpisah yang kamu panggil lewat API." Menjalankan EmDash di belakang aplikasi Nuxt terpisah secara teknis mungkin lewat REST API-nya, tapi itu bekerja melawan rancangan sesungguhnya platform, bukan bersamanya.
Daftar Isi
- Jalur REST API
- Apa yang Kamu Korbankan
- Alternatif yang Layak Dipertimbangkan Lebih Dulu
- Kalau Kamu Tetap Ingin Nuxt Secara Spesifik
- Pertanyaan yang Sering Diajukan
- Apakah ada modul Nuxt EmDash resmi?
- Apakah konten yang dipublikasikan akan muncul di Nuxt secara instan seperti di situs EmDash Astro-native?
- Apakah beralih dari Nuxt ke Astro sepadan cuma buat EmDash?
- Apakah EmDash menawarkan hook server-side rendering yang bisa langsung dipakai Nuxt?
- Kesimpulan
Jalur REST API
REST API EmDash di `/_emdash/api/` diautentikasi lewat Bearer token dan mendukung CORS buat request browser, dengan allowed origin bisa dikonfigurasi di deployment-mu. Aplikasi Nuxt bisa memanggilnya dengan cara yang sama seperti memanggil API konten pihak ketiga mana pun:
GET /_emdash/api/content/posts?status=published
Authorization: Bearer YOUR_API_TOKENFetch minimal di dalam server route Nuxt atau panggilan `useAsyncData`:
// server/api/posts.get.ts
export default defineEventHandler(async () => {
const res = await $fetch("https://your-emdash-site.com/_emdash/api/content/posts", {
query: { status: "published" },
headers: { Authorization: `Bearer ${process.env.EMDASH_API_TOKEN}` },
});
return res.data.items;
});<script setup>
const { data: posts } = await useFetch("/api/posts");
</script>
<template>
<ul>
<li v-for="post in posts" :key="post.id">{{ post.data.title }}</li>
</ul>
</template>Apa yang Kamu Korbankan
Headless CMS: Frontend — bawa milikmu sendiri. Deployment — CMS + frontend, terpisah. Update konten — webhook/rebuild. EmDash: Frontend — komponen Astro. Deployment — deployment tunggal. Update konten — segera (SSR).
Frontend Nuxt terpisah menempatkanmu di baris "headless CMS" tabel perbandingan EmDash sendiri, bukan yang terintegrasi:
- Tanpa update konten live secara default — Nuxt butuh strategi revalidasinya sendiri (caching ala-ISR, ISG, revalidasi webhook on-demand) karena ia tidak akan tahu konten EmDash berubah sampai ia fetch ulang.
- Tanpa type TypeScript yang dihasilkan dari model kontenmu — kamu bekerja terhadap bentuk JSON REST generik EmDash alih-alih hasil query typed.
- Dua deployment terpisah yang perlu dijalankan dan dijaga tetap sinkron alih-alih model single-deployment EmDash.
- Kamu masih menjalankan admin panel berbasis-Astro EmDash sendiri di suatu tempat — frontend Nuxt terpisah menambah aplikasi kedua, tidak menggantikan yang pertama.
Alternatif yang Layak Dipertimbangkan Lebih Dulu
Kalau komponen Vue secara spesifik — bukan routing atau server engine Nuxt — jadi kebutuhan sesungguhnya, Astro secara resmi mendukung komponen Vue sebagai island di dalam situs Astro-native lewat `@astrojs/vue`, pola yang sama yang dipakai proyek ini buat React lewat `@astrojs/react`:
import vue from "@astrojs/vue";
export default defineConfig({
integrations: [
vue(),
emdash({ /* ... */ }),
],
});Dengan itu terpasang, single-file component `.vue` di-render sebagai island di dalam halaman `.astro` — Vue sesungguhnya di mana kamu membutuhkannya, sementara query konten live dan type yang dihasilkan EmDash terus bekerja seperti terdokumentasi, tanpa deployment terpisah atau strategi revalidasi yang dibutuhkan.
Kalau Kamu Tetap Ingin Nuxt Secara Spesifik
- Deploy EmDash sebagai aplikasi Astro-nya sendiri — ini tetap jadi backend konten dan admin panel-mu terlepas apa yang mengonsumsinya.
- Hasilkan API token dari admin panel EmDash buat request server-side aplikasi Nuxt-mu.
- Konfigurasikan CORS di deployment EmDash-mu buat mengizinkan origin aplikasi Nuxt-mu, kalau kamu fetch client-side alih-alih lewat server route Nuxt.
- Proxy request lewat server route Nuxt (`server/api/`) buat menjaga API token-mu tetap di luar client alih-alih mengeksposnya di kode sisi-browser.
- Pilih strategi kesegaran: caching TTL-pendek paling sederhana; hook plugin `content:afterSave` yang memanggil endpoint revalidasi Nuxt lebih presisi.
Pertanyaan yang Sering Diajukan
Apakah ada modul Nuxt EmDash resmi?
Tidak — integrasi mendalam EmDash (fungsi query, type yang dihasilkan, update SSR live) spesifik-Astro. Aplikasi Nuxt berbicara ke EmDash murni lewat REST API general-purpose-nya, dengan cara yang sama seperti ke CMS lain mana pun.
Apakah konten yang dipublikasikan akan muncul di Nuxt secara instan seperti di situs EmDash Astro-native?
Tidak, tidak tanpa kerja ekstra — kesegeraan itu properti dari Live Content Collections Astro yang berjalan di proses yang sama. Aplikasi Nuxt terpisah perlu secara eksplisit fetch ulang atau diberi tahu buat revalidasi.
Apakah beralih dari Nuxt ke Astro sepadan cuma buat EmDash?
Tergantung seberapa dalam dependensi khusus-Nuxt-mu. Kalau komponen interaktifmu bisa bekerja sebagai Vue island dan kamu tidak bergantung pada modul khusus-Nuxt, Astro plus `@astrojs/vue` memberimu keunggulan sesungguhnya EmDash tanpa workaround backend-decoupled. Kalau kamu sangat berinvestasi di tooling khusus-Nuxt, biaya migrasi itu nyata.
Apakah EmDash menawarkan hook server-side rendering yang bisa langsung dipakai Nuxt?
Tidak — model SSR EmDash internal buat integrasi Astro-nya sendiri. Aplikasi Nuxt terpisah me-render secara independen dan sederhananya mengambil data EmDash lewat HTTP seperti API eksternal mana pun.
Kesimpulan
Dokumentasi EmDash eksplisit bahwa ia tidak dirancang sebagai backend decoupled buat framework frontend terpisah — REST API-nya membuat integrasi Nuxt secara teknis mungkin, tapi dengan biaya update live, type yang dihasilkan, dan kesederhanaan single-deployment. Kalau komponen Vue jadi kebutuhan sesungguhnya, `@astrojs/vue` di dalam situs EmDash native adalah jalur yang lebih selaras buat sebagian besar tim. Lihat panduan kami soal menghubungkan EmDash dengan Astro secara native buat rute yang sepenuhnya didukung.
Komentar