Blog·October 6, 2026

How to add a new block

Any Nuxt UI component can become a block. It takes a schema, one Vue component and one line in the registry.

Leo Hart

Frontend Engineer

Blocks live in two places: a schema in the Studio and a component in the Nuxt app. TypeScript keeps them in sync.

The four steps

Create the schema in apps/studio/schemaTypes/blocks/ and register it in schemaTypes/index.ts and objects/page-builder.ts.
Run pnpm typegen to regenerate the types used by the frontend.
Create Block<Name>.vue in apps/web/app/components/blocks/ with a block: BlockOf<'name'> prop.
Add the component to the registry in PageBlocks.vue.

Example: a Stats block

A schema, a component and one line in the registry. Switch between the files with the tabs.

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}

Forgot a step?

PageBlocks.vue types its registry as Record<BlockType, Component>, so a block without a component fails the typecheck.

Keep field names identical to the Nuxt UI props. The component can then pass values straight through, and the next developer can look up a field in the Nuxt UI docs.

Tags:guide development

guideOct 12, 2026

Create a new section without code

Blog, Gallery and Projects are all collections. Editors can add new ones, such as Services or Team, straight from the Studio.

Ada Morgan

Editor

guideOct 10, 2026

Getting started with Sanity × Nuxt UI

Connect the template to your Sanity project, import the example content and run Studio and the site side by side.

Ada Morgan

Editor

editingOct 2, 2026

Editing with a live preview

Turn on Visual Editing to click any text on the site and jump straight to the field in Studio.