---
title: "Bangun halaman dari blok · Sanity × Nuxt UI"
description: "Pembuat situs berbasis blok dengan Sanity Studio dan Nuxt UI."
canonical_url: "https://sanity-nuxtui.vercel.app/id"
meta:
  "og:description": "Pembuat situs berbasis blok dengan Sanity Studio dan Nuxt UI."
  "og:image": "https://sanity-nuxtui.vercel.app/_og/d/c_Page%2Ctitle_Bangun%2Bhalaman%2Bdari%2Bblok%2Cdescription_Pembuat%2Bsitus%2Bberbasis%2Bblok%2Bdengan%2BSanity%2BStudio%2Bdan%2BNuxt%2BUI.%2CsiteName_~U2FuaXR5IMOXIE51eHQgVUk%2Cp_Ii9pZCI%2Cs_BGXLUwkTU7pPN5sH.png"
  "og:image:height": "630"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "Bangun halaman dari blok · Sanity × Nuxt UI"
  "twitter:image": "https://sanity-nuxtui.vercel.app/_og/d/c_Page%2Ctitle_Bangun%2Bhalaman%2Bdari%2Bblok%2Cdescription_Pembuat%2Bsitus%2Bberbasis%2Bblok%2Bdengan%2BSanity%2BStudio%2Bdan%2BNuxt%2BUI.%2CsiteName_~U2FuaXR5IMOXIE51eHQgVUk%2Cp_Ii9pZCI%2Cs_BGXLUwkTU7pPN5sH.png"
---

> Index of every page on this site: [llms.txt](https://sanity-nuxtui.vercel.app/llms.txt)

Sanity × Nuxt UI

# Bangun halaman dari blok, tanpa menyentuh kode

Editor menyusun hero, fitur, harga, dan FAQ di Sanity Studio. Nuxt UI menampilkan setiap blok sebagai komponen yang aksesibel dan responsif.

[Baca panduan](https://sanity-nuxtui.vercel.app/id/docs/introduction) [Lihat di GitHub](https://github.com/narr07/sanity-nuxtui)

![Seseorang bekerja di depan laptop](https://cdn.sanity.io/images/kdwtvkc2/production/3c5959bf9dc0555105bc0bcb466cd95a1608141a-1600x1067.jpg?w=1024&h=682&auto=format)

## **Dibangun dengan**

03Fitur

## **Satu blok di Sanity, satu komponen di Nuxt**

Setiap blok punya schema sendiri dan terhubung ke komponen Nuxt UI lewat registry bertipe.

- 13 blok siap pakai Hero, fitur, kartu, linimasa, galeri, harga, FAQ, daftar koleksi, dan lainnya.
- Type-safe TypeGen membuat tipe dari schema dan query GROQ-mu.
- Visual Editing Klik teks di pratinjau untuk membuka field-nya di Studio.
- Mode gelap Warna semantik Nuxt UI otomatis menyesuaikan tema.
- Gambar responsif srcset dari CDN gambar Sanity, lengkap dengan hotspot dan crop.
- SEO bawaan Sitemap, robots, gambar media sosial, dan schema.org lewat Nuxt SEO.

04Jenis konten

## **Halaman dan koleksi**

Halaman fleksibel untuk tata letak sekali pakai, koleksi untuk semua yang berulang. Editor bisa membuat koleksi baru di Studio.

Halaman

Susun tata letak apa pun dari blok. Halaman dengan slug "home" menjadi beranda.

[Halaman](https://sanity-nuxtui.vercel.app/id/tentang)

Blog

Koleksi dengan tata letak blog: tanggal, penulis, tag, dan artikel terkait.

[Blog](https://sanity-nuxtui.vercel.app/id/blog)

Proyek

Koleksi dengan tata letak kartu, urutan manual, dan detail penting tiap proyek.

[Proyek](https://sanity-nuxtui.vercel.app/id/proyek)

Galeri

Koleksi dengan tata letak galeri. Unggah banyak foto sekaligus, lightbox langsung tersedia.

[Galeri](https://sanity-nuxtui.vercel.app/id/galeri)

05Karya

## **Proyek pilihan**

Rebranding Northwind

Identitas baru dan situs marketing berbasis blok yang kini diperbarui sendiri oleh tim internal.

brandingsitus-web

![Foto oleh Joseph Barrientos](https://cdn.sanity.io/images/kdwtvkc2/production/5c12dc78fc3c8fcbaee72aeeeb0e7b7d50a3fa47-1600x1067.jpg?w=676&h=452&auto=format)

[Rebranding Northwind](https://sanity-nuxtui.vercel.app/id/proyek/rebranding-northwind)

Aplikasi catatan lapangan

Buku catatan offline-first untuk peneliti, dengan konten terstruktur yang tersinkron ke Sanity.

aplikasimodel-konten

![Foto oleh Nadir Balcikli](https://cdn.sanity.io/images/kdwtvkc2/production/d3ff1682af8a342f78f482eaa0c4574dada7d3e0-1600x1067.jpg?w=676&h=452&auto=format)

[Aplikasi catatan lapangan](https://sanity-nuxtui.vercel.app/id/proyek/aplikasi-catatan-lapangan)

Arsip foto Harbor

Sepuluh ribu foto bersejarah yang bertag dan bisa dicari, dengan galeri publik yang dibangun dari koleksi.

arsipsitus-web

![Foto oleh Jay Ruzesky](https://cdn.sanity.io/images/kdwtvkc2/production/2c51e3a4cab7ddea412dc33f31fd253479bbba08-1600x1067.jpg?w=676&h=452&auto=format)

[Arsip foto Harbor](https://sanity-nuxtui.vercel.app/id/proyek/arsip-foto-harbor)

[Semua proyek](https://sanity-nuxtui.vercel.app/id/proyek)

06Blog

## **Artikel terbaru**

Blok ini selalu menampilkan entri terbaru dari sebuah koleksi.

![Laptop dan buku catatan di atas meja](https://cdn.sanity.io/images/kdwtvkc2/production/ae96f58c01fdb1cefac7d0aa96b01e36bde32af9-1600x1067.jpg?w=676&h=380&fit=crop&auto=format)

panduan12 Oktober 2026

## 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

![Laptop di atas meja](https://cdn.sanity.io/images/kdwtvkc2/production/968d3f7c1d70f1f84af4b4ee50ab9eef07803bea-1600x1067.jpg?w=676&h=380&fit=crop&auto=format)

panduan10 Oktober 2026

## Memulai dengan Sanity × Nuxt UI

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

**AM**

**Ada Morgan**

Editor

![Seseorang bekerja di depan laptop](https://cdn.sanity.io/images/kdwtvkc2/production/3c5959bf9dc0555105bc0bcb466cd95a1608141a-1600x1067.jpg?w=676&h=380&fit=crop&auto=format)

panduan6 Oktober 2026

## 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

[Semua artikel](https://sanity-nuxtui.vercel.app/id/blog)

07Galeri

## **Galeri terbaru**

[![Foto oleh Go Wild](https://cdn.sanity.io/images/kdwtvkc2/production/79ff55390ca2ec8d47b4dff66cad28734d35fa4d-1600x1067.jpg?w=676&h=452&auto=format)](https://sanity-nuxtui.vercel.app/id/galeri/pegunungan) [![Foto oleh Alejandro Escamilla](https://cdn.sanity.io/images/kdwtvkc2/production/968d3f7c1d70f1f84af4b4ee50ab9eef07803bea-1600x1067.jpg?w=676&h=452&auto=format)](https://sanity-nuxtui.vercel.app/id/galeri/ruang-kerja) [![Foto oleh sergee bee](https://cdn.sanity.io/images/kdwtvkc2/production/f8dc2d70267d3b2753eefee9d7cb4a4029e32dea-1600x1067.jpg?w=676&h=452&auto=format)](https://sanity-nuxtui.vercel.app/id/galeri/di-perjalanan)

[Semua galeri](https://sanity-nuxtui.vercel.app/id/galeri)

08Testimoni

## **Kata mereka**

Tim konten kami sekarang menerbitkan landing page sendiri. Developer cukup menambah blok saat butuh tata letak baru.

**MC**

**Maya Chen**

Kepala Konten

Berkat tipe yang di-generate, perubahan schema muncul sebagai type error di komponen, bukan bug di produksi.

**TB**

**Tom Becker**

Frontend Engineer

Pratinjau langsung di Presentation memangkas banyak bolak-balik.

**SL**

**Sara Lind**

Product Designer

09FAQ

## **Pertanyaan yang sering diajukan**

## **Siap membangun halaman pertamamu?**

Buka Studio, buat halaman, lalu mulai tambahkan blok.

[Buka Studio](http://localhost:3333) [Lihat harga](https://sanity-nuxtui.vercel.app/id/harga)

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://sanity-nuxtui.vercel.app/#website","@type":"WebSite","name":"Sanity × Nuxt UI","url":"https://sanity-nuxtui.vercel.app/","publisher":{"@id":"https://sanity-nuxtui.vercel.app/#identity"}},{"@id":"https://sanity-nuxtui.vercel.app/id#webpage","@type":"WebPage","description":"Pembuat situs berbasis blok dengan Sanity Studio dan Nuxt UI.","name":"Bangun halaman dari blok","url":"https://sanity-nuxtui.vercel.app/id","isPartOf":{"@id":"https://sanity-nuxtui.vercel.app/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://sanity-nuxtui.vercel.app/id"]}]},{"@id":"https://sanity-nuxtui.vercel.app/#identity","@type":"Organization","name":"Sanity × Nuxt UI","url":"https://sanity-nuxtui.vercel.app"}]}
```

## Sitemap

See the full [sitemap](https://sanity-nuxtui.vercel.app/sitemap.md) for all pages.