Visual Editing


@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
npm install @sanity/client --save
The minimal client must not be enabled.


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


  • Required
  • Type: string

The URL of the Sanity Studio with Presentation installed.


  • 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.


  • 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.


  • 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


  • Type: boolean
  • Default: true

Used to enable or disable stega.


  • 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.


  • Type: number, string
  • Default: 9999999

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

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

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,