--- title: "How to add a new block · Sanity × Nuxt UI" description: "Any Nuxt UI component can become a block. It takes a schema, one Vue component and one line in the registry." canonical_url: "https://sanity-nuxtui.vercel.app/blog/adding-a-new-block" meta: "og:description": "Any Nuxt UI component can become a block. It takes a schema, one Vue component and one line in the registry." "og:image": "https://cdn.sanity.io/images/kdwtvkc2/production/3c5959bf9dc0555105bc0bcb466cd95a1608141a-1600x1067.jpg?fit=crop&w=1200&h=630&auto=format" "og:image:alt": "Person working on a laptop" "og:image:height": "630" "og:image:width": "1200" "og:title": "How to add a new block · 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/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. **LH** **Leo Hart** Frontend Engineer ![Person working on a laptop](https://cdn.sanity.io/images/kdwtvkc2/production/3c5959bf9dc0555105bc0bcb466cd95a1608141a-1600x1067.jpg?w=2400&h=1600&auto=format) 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 1. Create the schema in `apps/studio/schemaTypes/blocks/` and register it in `schemaTypes/index.ts` and `objects/page-builder.ts`. 2. Run `pnpm typegen` to regenerate the types used by the frontend. 3. Create `Block.vue` in `apps/web/app/components/blocks/` with a `block: BlockOf<'name'>` prop. 4. 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' }) ] })] }) ]}) ``` **Forgot a step?** PageBlocks.vue types its registry as Record\, 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](https://sanity-nuxtui.vercel.app/blog?tag=guide) [development](https://sanity-nuxtui.vercel.app/blog?tag=development) ## **Related posts** ![Laptop and notebook on a desk](https://cdn.sanity.io/images/kdwtvkc2/production/ae96f58c01fdb1cefac7d0aa96b01e36bde32af9-1600x1067.jpg?w=676&h=380&fit=crop&auto=format) 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. **AM** **Ada Morgan** Editor ![Laptop on a desk](https://cdn.sanity.io/images/kdwtvkc2/production/968d3f7c1d70f1f84af4b4ee50ab9eef07803bea-1600x1067.jpg?w=676&h=380&fit=crop&auto=format) 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. **AM** **Ada Morgan** Editor ![Laptop and notebook on a table](https://cdn.sanity.io/images/kdwtvkc2/production/58818fdb1451d82abff05bee983b2b52e136add6-1600x1067.jpg?w=676&h=380&fit=crop&auto=format) 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. ```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/blog/adding-a-new-block#webpage","@type":"WebPage","dateModified":"2026-10-16T00:42:53Z","datePublished":"2026-10-06T09:00:00Z","description":"Any Nuxt UI component can become a block. It takes a schema, one Vue component and one line in the registry.","name":"How to add a new block","url":"https://sanity-nuxtui.vercel.app/blog/adding-a-new-block","isPartOf":{"@id":"https://sanity-nuxtui.vercel.app/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://sanity-nuxtui.vercel.app/blog/adding-a-new-block"]}]},{"@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/blog/adding-a-new-block#article","@type":"Article","dateModified":"2026-10-16T00:42:53Z","datePublished":"2026-10-06T09:00:00Z","description":"Any Nuxt UI component can become a block. It takes a schema, one Vue component and one line in the registry.","headline":"How to add a new block","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/blog/adding-a-new-block#webpage"},"mainEntityOfPage":{"@id":"https://sanity-nuxtui.vercel.app/blog/adding-a-new-block#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.