Visual Editor

Demonstrates DirectusVisualEditor (component) and useDirectusVisualEditor() (composable). Both only activate when your site is loaded inside the Directus admin iframe; for normal visitors they render as transparent pass-throughs.

Visual editor: Not detected
To demo these features, open this page inside the Directus Visual Editor.

Setup

Directus Config Required
Two places need to be configured in your Directus instance:
  1. Collection preview URL In the posts collection settings, set the Preview URL to http://localhost:3000/blog/{{slug}}?visual-editing=true. Directus substitutes {{slug}} with the item's actual value when you open the visual editor for a specific post.
  2. Live Preview sidebar URLs In Settings → Live Preview, add http://localhost:3000/blog?visual-editing=true (and this page's URL) for the preview sidebar that appears while editing.

Add ?debug to the URL to see connection logs in the browser console. The module detects the visual editor purely by iframe context (window.parent !== window) - the ?visual-editing=true query param is informational only.

useDirectusVisualEditor() composable

useDirectusVisualEditor() returns a Ref<boolean> that is true when the page is running inside the Directus admin iframe. It is the same reactive value the DirectusVisualEditor component uses internally.

Use it directly when you need custom behavior beyond a field wrapper: conditionally rendering a toolbar, lazy-loading editing scripts, or applying editor-only styles. 

const visualEditor = useDirectusVisualEditor()

// Drive any conditional logic from this boolean:
// v-if="visualEditor"       only visible inside the Directus iframe
// :class="{ 'edit-mode': visualEditor }"  apply editor styles

Difference from DirectusVisualEditor: the component wraps an element and adds data-directus attributes so Directus knows which collection/item/field to open when clicked. The composable gives you the raw boolean for anything the wrapper component does not cover.

Visual editor is not active (useDirectusVisualEditor() is false). Load this URL inside Directus Live Preview to see the above message appear.