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

npm install @sanity/client --save

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.

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:

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,
    }
  },
})