A minimal Nuxt site with Sanity Studio

This starter uses Nuxt for the front end and Sanity to handle its content.

Featuring

• How to fetch content as data from the Sanity Content Lake
• How to render block content with Portable Text
• A Sanity Studio to create and edit content
• How to crop and render images with Sanity Image URLs

Note

This starter features an /app and a /studio folder. The /app folder contains the frontend code, and the /studio folder contains the Sanity Studio code.

It is configured as a monorepo using pnpm workspaces, but you can treat these directories as separate projects if you prefer.

Prerequisities

• Node.js (v16.12 or later)
• Sanity CLI (optional)

Getting started

Run the following commands to prepare both applications, each step should be executed from the root directory:

1. Install dependencies.

pnpm install

2. Select or create a Sanity project and dataset, and output the details to a .env file.

cd studio && pnpm sanity init --env .env

3. Generate a token with read permissions for use in the next step.

pnpm sanity manage

4. Copy the example app .env file and populate it with the required values.

cp ./app/.env.example ./app/.env

5. Start the development servers:

pnpm dev

• Your Nuxt app should now be running on http://localhost:3000/.
• Your Studio should now be running on http://localhost:3333/.

Add content

1. Visit the Studio and create and publish a new Post document
2. Visit the App and refresh the page to see your content rendered on the page

The schema for the Post document is defined in the /studio/schemas folder. You can add more documents and schemas to the Studio to suit your needs.

Deployments

The /app and /studio folders are meant to be deployed separately.

Make sure that after /app is deployed the .env file in /studio is updated with its deployment URL under SANITY_STUDIO_PREVIEW_URL.

And /app has a .env file with NUXT_SANITY_STUDIO_URL that points to the Studio's deployment URL.