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.

DirectusVisualEditor - field-level wrappers

Each wrapper adds a data-directus attribute pointing to the collection, item ID, and optional field(s). Clicking a wrapped element inside the Directus iframe opens the editor for that specific field.

Post image

Why Steampunk Rabbits Are The Future of Work

By Webmaster 2024-09-01T16:00:00.000Z

<p>Ladies and Gentlemen, it is my great pleasure to introduce you to the future of work. And no, I'm not talking about drones, AI, or even cyborgs. The future of work is none other than the stylish, dapper and oh-so-cool steampunk rabbits!</p>
<h2>What are Steampunk Rabbits?</h2>
<p>Yes, you heard it right, steampunk rabbits. These little creatures are not just cute and cuddly, but they are also the epitome of efficiency and innovation. From the gears in their top hats to the clockwork in their tails, steampunk rabbits are revolutionizing the way we work and live.</p>
<p>So, what makes steampunk rabbits so special? Well, for starters, they never sleep. They work tirelessly around the clock, getting more done in a day than any human ever could. They are also incredibly multi-talented. With their clockwork appendages, they can type, write, assemble, and even paint! All while sipping on a cup of tea and looking fabulous, of course.</p>
<h2>Benefits of Steampunk Rabbits</h2>
<p>And the best part? They are never late for work. They have built-in clocks and calendars, ensuring that they are always on time. And forget a sick days and vacations; steampunk rabbits never get sick or need a break. They just keep working and working, providing us with endless hours of productivity.</p>
<p>But wait, there's more! Steampunk rabbits also bring a touch of whimsy and charm to the workplace. Their Victorian-inspired attire and quirky personalities are sure to brighten up any office. They are the perfect office pets, and they make even the most mundane tasks feel like an adventure.</p>
<p>So, there you have it folks, steampunk rabbits are the future of work. So, next time you're feeling stressed and overwhelmed with work, just remember, there's a steampunk rabbit out there who's got your back. And if you're lucky, maybe you'll even get to work with one someday.</p>
<p>In conclusion, let us embrace the future and welcome our new steampunk rabbit overlords with open arms. The future of work has never looked so bright and full of bunnies!</p>

mode prop variants used above: drawer (image, content), popover (title), modal (author). All three open in Directus after clicking the wrapped element inside the iframe.

The same DirectusVisualEditor wrappers are used on the individual blog post page. When loaded inside the Directus visual editor iframe, all fields become clickable edit targets.

See it in action on this blog post

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.