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.

Leo Hart

Frontend Engineer

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

Empat langkahnya

Buat schema di apps/studio/schemaTypes/blocks/, lalu daftarkan di schemaTypes/index.ts dan objects/page-builder.ts.
Jalankan pnpm typegen untuk membuat ulang tipe yang dipakai frontend.
Buat Block<Name>.vue di apps/web/app/components/blocks/ dengan prop block: BlockOf<'name'>.
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' })        ]      })]    })  ]})

<script setup lang="ts">import type { BlockOf } from '~/types/sanity' defineProps<{ block: BlockOf<'stats'>, index: number }>()</script> <template>  <UPageSection :title="block.title">    <UPageGrid>      <UPageCard        v-for="item in block.items"        :key="item._key"        :title="item.value"        :description="item.label"      />    </UPageGrid>  </UPageSection></template>

const registry: Record<BlockType, Component> = {  hero: LazyBlockHero,  // …  stats: LazyBlockStats}

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 pengembangan