Client Utilities
Demonstrates the URL and state composables available in every page and component.
useDirectusUrl(path?)
Returns the context-aware Directus base URL. On the client it uses the configured URL (or devProxy path in development). On the server it prefers serverDirectusUrl for internal networking (Docker/K8s), falling back to the client URL.
Resolved URL:
https://playground-api.nuxt-directus-sdk.rolley.io/items/posts/useDirectusOriginUrl(path?)
Always returns the real public-facing Directus URL, ignoring both devProxy and serverDirectusUrl. Use this for SSO redirects and admin links that must point to the actual Directus origin.
Resolved origin URL (same path as above):
https://playground-api.nuxt-directus-sdk.rolley.io/items/posts/ In local development with devProxy enabled, useDirectusUrl() returns the proxy path while useDirectusOriginUrl() returns the real Directus URL. In production without a proxy they will be the same.
useDirectusPreview()
A Ref<boolean> that is true when the page was loaded with ?preview=true in the URL. Set automatically by the module plugin — use it to show draft/unpublished content.
Current value: false
Add ?preview=true to the current URL to activate preview mode, then reload. The plugin also looks for a ?token= param and sets it on the Directus client so draft content requests are authenticated.
useDirectusVisualEditor()
A Ref<boolean> that is true when the page is loaded inside a Directus iframe (the visual editor). Set automatically — use it to conditionally render editing UI.
Current value: false
true only when your site is embedded inside the Directus admin panel via the Visual Editor module. Requires visualEditor: true in your module config (already enabled in this playground's nuxt.config.ts).