---
title: "Cara menambahkan blok baru · Sanity × Nuxt UI"
description: "Komponen Nuxt UI apa pun bisa jadi blok. Cukup satu schema, satu komponen Vue, dan satu baris di registry."
canonical_url: "https://sanity-nuxtui.vercel.app/id/blog/cara-menambahkan-blok-baru"
meta:
  "og:description": "Komponen Nuxt UI apa pun bisa jadi blok. Cukup satu schema, satu komponen Vue, dan satu baris di registry."
  "og:image": "https://cdn.sanity.io/images/kdwtvkc2/production/3c5959bf9dc0555105bc0bcb466cd95a1608141a-1600x1067.jpg?fit=crop&w=1200&h=630&auto=format"
  "og:image:alt": "Seseorang bekerja di depan laptop"
  "og:image:height": "630"
  "og:image:width": "1200"
  "og:title": "Cara menambahkan blok baru · Sanity × Nuxt UI"
---

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

[Blog](https://sanity-nuxtui.vercel.app/id/blog)·6 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

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

Blok tinggal di dua tempat: schema di Studio dan komponen di aplikasi Nuxt. TypeScript menjaga keduanya tetap selaras.

## Empat langkahnya

1. Buat schema di `apps/studio/schemaTypes/blocks/`, lalu daftarkan di `schemaTypes/index.ts` dan `objects/page-builder.ts`.
2. Jalankan `pnpm typegen` untuk membuat ulang tipe yang dipakai frontend.
3. Buat `Block<Name>.vue` di `apps/web/app/components/blocks/` dengan prop `block: BlockOf<'name'>`.
4. Tambahkan komponennya ke registry di `PageBlocks.vue`.

### Contoh: blok Stats

Satu schema, satu komponen, dan satu baris di registry. Pindah antar-file lewat tab.

```
import { defineArrayMember, defineField, defineType } from 'sanity' export const stats = defineType({  name: 'stats',  title: 'Stats',  type: 'object',  fields: [    defineField({ name: 'title', type: 'string' }),    defineField({      name: 'items',      type: 'array',      of: [defineArrayMember({        type: 'object',        fields: [          defineField({ name: 'value', type: 'string' }),          defineField({ name: 'label', type: 'string' })        ]      })]    })  ]})
```

**Ada langkah yang terlewat?**

PageBlocks.vue memberi registry-nya tipe Record\<BlockType, Component>, jadi blok tanpa komponen langsung gagal di typecheck.

Samakan nama field dengan props Nuxt UI. Dengan begitu komponen bisa meneruskan nilainya apa adanya, dan developer berikutnya tinggal mencari field itu di dokumentasi Nuxt UI.

Tag: [panduan](https://sanity-nuxtui.vercel.app/id/blog?tag=panduan) [pengembangan](https://sanity-nuxtui.vercel.app/id/blog?tag=pengembangan)

## **Baca juga**

![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

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

penyuntingan2 Oktober 2026

## Menyunting dengan pratinjau langsung

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

```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/blog/cara-menambahkan-blok-baru#webpage","@type":"WebPage","dateModified":"2026-10-16T00:42:53Z","datePublished":"2026-10-06T09:00:00Z","description":"Komponen Nuxt UI apa pun bisa jadi blok. Cukup satu schema, satu komponen Vue, dan satu baris di registry.","name":"Cara menambahkan blok baru","url":"https://sanity-nuxtui.vercel.app/id/blog/cara-menambahkan-blok-baru","isPartOf":{"@id":"https://sanity-nuxtui.vercel.app/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://sanity-nuxtui.vercel.app/id/blog/cara-menambahkan-blok-baru"]}]},{"@id":"https://sanity-nuxtui.vercel.app/#identity","@type":"Organization","name":"Sanity × Nuxt UI","url":"https://sanity-nuxtui.vercel.app"},{"@id":"https://sanity-nuxtui.vercel.app/id/blog/cara-menambahkan-blok-baru#article","@type":"Article","dateModified":"2026-10-16T00:42:53Z","datePublished":"2026-10-06T09:00:00Z","description":"Komponen Nuxt UI apa pun bisa jadi blok. Cukup satu schema, satu komponen Vue, dan satu baris di registry.","headline":"Cara menambahkan blok baru","inLanguage":"en","thumbnailUrl":"https://cdn.sanity.io/images/kdwtvkc2/production/3c5959bf9dc0555105bc0bcb466cd95a1608141a-1600x1067.jpg?w=1200&auto=format","author":{"@id":"https://sanity-nuxtui.vercel.app/#/schema/person/1"},"image":{"@id":"https://sanity-nuxtui.vercel.app/#/schema/image/1"},"isPartOf":{"@id":"https://sanity-nuxtui.vercel.app/id/blog/cara-menambahkan-blok-baru#webpage"},"mainEntityOfPage":{"@id":"https://sanity-nuxtui.vercel.app/id/blog/cara-menambahkan-blok-baru#webpage"},"publisher":{"@id":"https://sanity-nuxtui.vercel.app/#identity"}},{"@id":"https://sanity-nuxtui.vercel.app/#/schema/person/1","@type":"Person","name":"Leo Hart"},{"@id":"https://sanity-nuxtui.vercel.app/#/schema/image/1","@type":"ImageObject","contentUrl":"https://cdn.sanity.io/images/kdwtvkc2/production/3c5959bf9dc0555105bc0bcb466cd95a1608141a-1600x1067.jpg?w=1200&auto=format","inLanguage":"en","url":"https://cdn.sanity.io/images/kdwtvkc2/production/3c5959bf9dc0555105bc0bcb466cd95a1608141a-1600x1067.jpg?w=1200&auto=format"}]}
```

## Sitemap

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