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
pnpm install @sanity/client
NPM
npm install @sanity/client --save
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.

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.

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,
    }
  },
})
Table of Contents