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.

Installing @sanity/client is required for visual editing. 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