Sanity × Nuxt UI
Blog·

Memulai dengan Sanity × Nuxt UI

Hubungkan template ke proyek Sanity, impor konten contoh, lalu jalankan Studio dan situs berdampingan.
AM

Ada Morgan

Editor

Laptop di atas meja

Template ini memadukan Sanity Studio untuk menyunting dan Nuxt UI untuk menampilkan. Editor membangun halaman dari blok, dan setiap blok menjadi komponen Nuxt UI di situs.

1. Hubungkan proyekmu

Salin file env contoh, lalu isi project ID dari sanity.io/manage.

terminal
cp apps/studio/.env.example apps/studio/.envcp apps/web/.env.example apps/web/.env

2. Tambahkan konten contoh

Skrip seed membuat halaman, tiga koleksi (Blog, Galeri, Proyek) beserta entrinya, dan penulis, jadi kamu bisa melihat semua blok bekerja.

terminal
pnpm installpnpm --filter studio exec sanity loginpnpm seed
Sudah punya konten?
Skrip seed berhenti kalau dataset sudah berisi konten. Jalankan "pnpm seed --replace" untuk menghapusnya dulu.

3. Jalankan

  • pnpm dev menjalankan Studio di port 3333 dan situs di port 3000.
  • Sunting halaman di Studio, terbitkan, lalu muat ulang situs.
  • Buka tool Presentation untuk menyunting dengan pratinjau langsung.
Tag:panduanpersiapan

Baca juga

Laptop dan buku catatan di atas meja
panduan

Membuat bagian baru tanpa kode

Blog, Galeri, dan Proyek semuanya koleksi. Editor bisa menambah koleksi baru, seperti Layanan atau Tim, langsung dari Studio.
AM

Ada Morgan

Editor

Seseorang bekerja di depan laptop
panduan

Cara menambahkan blok baru

Komponen Nuxt UI apa pun bisa jadi blok. Cukup satu schema, satu komponen Vue, dan satu baris di registry.
LH

Leo Hart

Frontend Engineer

Laptop dan buku catatan di atas meja
penyuntingan

Menyunting dengan pratinjau langsung

Aktifkan Visual Editing, lalu klik teks mana pun di situs untuk langsung membuka field-nya di Studio.