Sanity × Nuxt UI
Blog·

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 on a desk

This template pairs Sanity Studio for editing with Nuxt UI for rendering. Editors build pages from blocks; every block is a Nuxt UI component on the site.

1. Connect your project

Copy the example env files and fill in your project ID from sanity.io/manage.

terminal
cp apps/studio/.env.example apps/studio/.envcp apps/web/.env.example apps/web/.env

2. Add example content

The seed script creates pages, three collections (Blog, Gallery, Projects) with entries, and authors, so you can see every block in action.

terminal
pnpm installpnpm --filter studio exec sanity loginpnpm seed
Already have content?
The seed script stops when the dataset already has content. Run "pnpm seed --replace" to delete it first.

3. Run it

  • pnpm dev starts Studio on port 3333 and the site on port 3000.
  • Edit a page in Studio, publish it, and refresh the site.
  • Open the Presentation tool to edit with a live preview.
Tags:guidesetup

Related posts

Laptop and notebook on a desk
guide

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

Person working on a laptop
guide

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

Laptop and notebook on a table
editing

Editing with a live preview

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