Getting Started

Visual Editing

Overview

@nuxtjs/sanity provides a simple method of integrating visual editing in your Nuxt application. Before enabling this feature, make sure you have Presentation installed in your studio.

You will also need to install @sanity/client:

pnpm install @sanity/client
The minimal client must not be enabled.

Configuration

You can configure visual editing via the sanity.visualEditing key in your Nuxt config. The following options are available:

studioUrl

  • Required
  • Type: string

The URL of the Sanity Studio with Presentation installed.

token

  • Required
  • Type: string

A Sanity read token used for server side queries. This is required in order to fetch draft content. This value will not be exposed to the client.

mode

  • Type: string
  • Default: 'live-visual-editing'

Accepts one of the following options:

  • 'live-visual-editing' - Default behaviour. Lets the module handle setup to provide fully featured visual editing with live updates. Queries should be executed using useSanityQuery.
  • 'visual-editing' - Used to enable visual editing without live updates, for example if fetching data using the Sanity client directly. Passing a custom refresh handler is recommended, as by default the entire app will refresh to display updates.
  • 'custom' - The module will not handle any setup, instead the useSanityVisualEditing and/or useSanityLiveMode composables will need to be called manually.

previewMode

  • Type: boolean, object
  • Default: true

To enable preview mode with defaults, or optionally configure the endpoints used to enable and disable preview mode. If passing an object, the options that can be provided are:

  • enable - the path of the enable endpoint, defaults to /preview/enable
  • disable - the path of the disable endpoint, defaults to /preview/disable

stega

  • Type: boolean
  • Default: true

Used to enable or disable stega.

keepStegaOnCopy

  • Type: boolean
  • Default: false

While visual editing is enabled, stega-encoded metadata (invisible characters) is automatically stripped from clipboard data when content is copied from the page, so copied text can be pasted into other tools without the hidden characters tagging along. Set this option to true to opt out and keep stega in copied content.

onSuspiciousStega

  • Type: function

An optional callback that reports stega payloads found in places where they always cause bugs or bloat, such as class, href, src, id and other attributes, inside <head>, <script> or <style> contents, form values, or the page URL. Providing the callback opts in to the detection logic — when it isn't provided, no scanning runs.

nuxt.config.ts
export default defineNuxtConfig({
  sanity: {
    visualEditing: {
      // ... Visual editing config
      onSuspiciousStega: (reports) => {
        for (const report of reports) {
          console.warn(`Stega found in ${report.kind}`, report)
        }
      },
    }
  },
})

Each report includes the offending element, the attribute name (when applicable), the raw value, the cleaned value it should have been, and the decoded sanity edit info when available — pointing at the exact document and field that produced the value.

refresh

  • Type: function

An optional function for overriding the default handling of refresh events received from the studio. This is generally not need needed if the mode option is set to live-visual-editing.

zIndex

  • Type: number, string
  • Default: 9999999

The CSS z-index on the root node that renders overlays.

Recommended Configuration

For most use cases, the following minimum visualEditing configuration will suffice:

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/sanity'],
  sanity: {
    // ... Sanity config
    visualEditing: {
      token: process.env.NUXT_SANITY_VISUAL_EDITING_TOKEN,
      studioUrl: process.env.NUXT_SANITY_VISUAL_EDITING_STUDIO_URL,
    }
  },
})

Usage

@nuxtjs/sanity provides key composables to interact with data from your Sanity project.

Live Content

The Live Content API allows your app to subscribe to changes in your Sanity dataset and receive updates whenever documents are created, updated, or deleted.

Copyright © 2026