@atlas/nuxt
Layer Nuxt 4 yang mengubah brand AtlasCMS menjadi situs web: route catch-all, renderer block, SEO, redirect, pratinjau, dan purge.
Baca 2 menit
Instal dan extend
Instal keempat paket pada versi yang sama (@atlas/nuxt, @atlas/blocks, @atlas/client, @atlas/tokens) seperti dijelaskan di panduan klien, lalu extend layer tersebut.
export default defineNuxtConfig({
extends: ['@atlas/nuxt'],
})NUXT_ATLAS_API_URL=https://api.atlascms.id
NUXT_ATLAS_TOKEN=atl_read_...
NUXT_ATLAS_PURGE_SECRET=the-webhook-secretYang Anda dapatkan
- Route catch-all yang meminta halaman dari API pada path yang dikunjungi dan merender block-nya. File halaman di aplikasi Anda sendiri mengalahkan catch-all.
- Renderer block dan pustaka block, dengan block brand Anda sendiri ditambahkan di sampingnya.
- Token tema sebagai variabel CSS, serta header, footer, dan template dari tema yang aktif.
- SEO: judul, tautan kanonik, Open Graph dan gambar bagikan yang dihasilkan, JSON-LD, sitemap,
robots.txt,llms.txt, dan IndexNow. - Redirect dari API, arsip kategori dan tag, serta indeks artikel.
- Consent Mode v2 dan analitik yang bergantung pada persetujuan, serta block formulir lead yang mengirim lewat server route dengan pembatasan laju.
- Mode pratinjau dan jembatan editor visual untuk dashboard.
- Route purge bertanda tangan yang dijelaskan di webhook.
Key konfigurasi
| Key (environment) | Tujuan |
|---|---|
atlas.apiUrl (NUXT_ATLAS_API_URL) | Alamat API. |
atlas.token (NUXT_ATLAS_TOKEN) | Token baca dari deployment satu brand. |
atlas.purgeSecret (NUXT_ATLAS_PURGE_SECRET) | Secret webhook dari deployment satu brand. |
atlas.sites (NUXT_ATLAS_SITES) | Jalankan beberapa brand dalam satu aplikasi: array JSON berisi { host, brand, token, purgeSecret }. Host di luar daftar dijawab 421. |
atlas.brandSlug (NUXT_ATLAS_BRAND_SLUG) | Brand yang harus dimiliki token pratinjau. |
atlas.editorOrigins (NUXT_ATLAS_EDITOR_ORIGINS) | Origin dashboard yang diizinkan membingkai pratinjau dan menggerakkan jembatan editor. Kosong mematikan jembatan. |
atlas.trustProxy (NUXT_ATLAS_TRUST_PROXY) | Percayai X-Forwarded-For dan teruskan alamat pengunjung ke API. |
atlas.formsEndpoint (NUXT_ATLAS_FORMS_ENDPOINT) | Timpa target lead. Gunakan {key} untuk key formulir. |
ogImage.secret (NUXT_OG_IMAGE_SECRET) | Menandatangani tautan gambar bagikan. Wajib di produksi dan sama di setiap instance. |
public.atlas.locales, defaultLocale | Bahasa-bahasa situs. |
Composable
Setiap composable memakai fetch key eksplisit, sehingga data server bertahan saat hydration. Jika Anda membungkus useFetch di kode Anda sendiri, beri key eksplisit juga.
| Composable | Kegunaan |
|---|---|
useAtlasPage() | Entri halaman tempat block dirender: fields, terms, seo, tanggal. Pilih ini daripada menyalin teks ke props block. |
useAtlasEntries(params) | Daftar halaman cursor untuk satu tipe entri. |
useAtlasMenu(key, locale) | Menu navigasi, atau null bila brand tidak punya. |
useAtlasStrings({ locale, namespace }) | Teks antarmuka dengan fallback per key ke bahasa default. |
useAtlasSettings() | Pengaturan brand publik. |
useAtlasTheme() | Token dan opsi tema. |
const { data: menu } = useAtlasMenu('footer', 'en')
const { data: page } = await useAtlasEntries({ type: 'post', limit: 6, fields: undefined })Block brand
Block generik disertakan di @atlas/blocks. Block yang hanya dibutuhkan brand Anda berada di situs Anda, dengan prefiks sendiri, dan didaftarkan di samping yang generik. Deskripsikan masing-masing di file definisi dan jalankan sinkronisasi, agar dashboard menawarkannya dan API memvalidasinya.
atlas blocks:sync --schemas ./app/atlas/definitions.ts --custom-only --out brand-blocks.jsonCommand line yang sama membangun, memeriksa, mengemas, dan mendorong tema: atlas theme create, check, pack, dan push. Mendorong memerlukan token developer.
Pratinjau dan editor visual
Atur NUXT_ATLAS_EDITOR_ORIGINS ke origin dashboard. Dashboard lalu membuka situs Anda di dalam frame dengan token pratinjau singkat. Layer memeriksa bahwa token milik brand ini sebelum mengatur cookie pratinjau terpartisi, menyajikan draf dengan no-store, menambahkan noindex, dan memungkinkan editor mengklik block untuk mengeditnya di tempat.
Apakah halaman ini membantu?
Usulkan perubahan
@atlas/client