useStatamicPreviewMode

Handles Statamic preview mode based on query parameters.

Added since: v1.0.0

Last changed: 24 days ago

You should take a look at the Nuxt usePreviewMode documentation for more information on how it works under the hood.

Usage

The useStatamicPreviewMode composable is used to handle the Statamic preview mode. It will automatically create a preview mode token based on the current route. It uses the usePreviewMode composable from nuxt under the hood.

This is used to set the preview token as a parameter in the request URL, for example inside the useStatamicApi composable.

Internal example

runtime/composables/useStatamicApi.ts

export function useStatamicApi
() {
  // ...
  const previewMode
 = useStatamicPreviewMode
();

  const livePreviewToken
 = computed
(() => previewMode
.enabled
.value
 ? previewMode
.state
.token
 : "");
  const baseParams
 = computed
((): Partial
<StatamicApiParamsMultiple
> => ({ token
: livePreviewToken
.value
 }));
  // ...
}

Type Definition

function useStatamicPreviewMode
(): ReturnType
<typeof usePreviewMode
>

API Reference

Return Value

ReturnType<typeof usePreviewMode>

The preview mode composable with a custom shouldEnable function that checks if preview mode should be enabled based on the query parameters.

The shouldEnable function checks if preview mode should be enabled based on the query parameters. It will return true if the live-preview query parameter is present or the preview query parameter is set to true.

Changelog

v1.0.0

on November 12, 2025

#407d36db

feat: released initial version of nuxt-statamic

useStatamicPageUri

A composable for generating the URI of the current Statamic page.

useStatamicRuntimeConfig

Get the Statamic runtime config object from the runtime config.