Sanity × Nuxt UI
Halaman ini belum tersedia dalam bahasa Indonesia.
Docs

Visual Editing

Turn on the live preview in the Presentation tool, locally and in production.

The Presentation tool in the Studio shows the site with drafts, lets editors click any text to edit it, and drag blocks to reorder them. It needs a read token on the site.

Turn it on

  1. Create a token with the Viewer role:
pnpm --filter studio exec sanity tokens add "Preview" --role viewer
  1. Add it to apps/web/.env, with the address of the Studio:
apps/web/.env
NUXT_SANITY_API_READ_TOKEN=sk...NUXT_SANITY_STUDIO_URL=http://localhost:3333
  1. Restart the site and open Presentation in the Studio.
The token stays on the server
It is only used by the Nuxt server to read drafts. Never expose it with a NUXTPUBLIC variable.

How drafts stay private

Visitors never see drafts. The Presentation tool opens /preview/enable with a one-time secret; the site checks the secret with Sanity and sets a preview cookie for that browser only. /preview/disable removes it. Drafts and stega markers are only used in a browser with that cookie.

Production and caching

Cached pages cannot show drafts, so the cache has to be skipped for editors:

  • Vercel: one deployment does both. Pages stay cached with ISR for visitors, and /preview/enable also sets Vercel's __prerender_bypass cookie, so the editor's browser skips the cache. The bypass token is derived from the read token; see server/preview/enable.ts and isrBypassToken in nuxt.config.ts.
  • Other hosts (Cloudflare, Node): their cache cannot be skipped for a single visitor, so caching turns off when a read token is set. Use two deployments of apps/web: the public site without a token, and a preview deployment with it.

Point the Studio at the site

The Studio opens SANITY_STUDIO_PREVIEW_URL. sanity dev reads apps/studio/.env, and sanity deploy also reads apps/studio/.env.production, so keep http://localhost:3000 for local work and put the deployed site in .env.production. The hosted Studio can still preview a local dev server: type its address in the Presentation address bar.

Add the site to the CORS origins of the project, with credentials:

pnpm --filter studio exec sanity cors add https://example.com --credentials

Where documents appear

apps/studio/presentation/resolve.ts tells the Presentation tool which URLs show a document, so an editor opening a document in Presentation lands on the right page. Update it when you add a document type with its own URL.

Safari blocks cookies in cross-site frames
Live preview from a hosted Studio (.sanity.studio) to your site's domain works in Chrome, Edge and Firefox. Editors on Safari can use the Studio for writing and another browser for previewing, or you can host the Studio on the site's own domain.

Languages

How document translations, language prefixes, fallbacks and translated interface text work.

Search

The search palette, its GROQ query and what it needs from the hosting.