Package Reference

@dyrected/vue is the Vue 3 integration layer for Dyrected. Use it when you are in a plain Vue app and want first-party composables plus the admin bridge.

If you are in Nuxt, prefer @dyrected/nuxt instead because it builds on top of this package and adds the Nuxt-specific setup for you.

What the package gives you

The Vue package includes:

document, collection, and global composables
useLivePreview
auth and click-to-edit helpers
DyrectedAdmin
media, icon, rich-text, and blocks components

It assumes you already have a running Dyrected API to talk to.

Install the packages

pnpm add @dyrected/vue @dyrected/sdk react react-dom

The React dependencies are needed because the admin UI is still React-based and the Vue package bridges it into Vue.

Provide one shared client

Create the SDK client once and provide it at app boot:

// src/main.ts
import { createApp } from "vue";
import { createClient } from "@dyrected/sdk";
import { DYRECTED_CLIENT_KEY } from "@dyrected/vue";
import App from "./App.vue";

const client = createClient({
  baseUrl: import.meta.env.VITE_DYRECTED_URL,
  apiKey: import.meta.env.VITE_DYRECTED_API_KEY,
});

const app = createApp(App);
app.provide(DYRECTED_CLIENT_KEY, client);
app.mount("#app");

That gives the composables one shared client to work with.

Fetch content with composables

Use useDyrectedCollection, useDyrected, useDyrectedGlobal, useDyrectedAuth, and useLivePreview when Vue components need a Dyrected client or content state.

For the full rendering workflow, use Displaying Content in Vue.

Embed the admin

DyrectedAdmin mounts the React admin bundle inside your Vue app:

<!-- src/pages/AdminPage.vue -->
<script setup lang="ts">
import { DyrectedAdmin } from "@dyrected/vue";
</script>

<template>
  <DyrectedAdmin
    :config="{
      baseUrl: import.meta.env.VITE_DYRECTED_URL,
      apiKey: import.meta.env.VITE_DYRECTED_API_KEY,
      siteId: import.meta.env.VITE_DYRECTED_SITE_ID || '',
    }"
  />
</template>

That is the practical path when the Vue app needs to host the dashboard instead of only consuming content.

`DyrectedAdmin` theme props

When the Vue app already owns a dark, light, or system preference, pass that state into DyrectedAdmin so the embedded admin follows the same preference.

The component accepts:

theme: the preferred theme, one of system, light, or dark
system-theme: the currently resolved system theme, either light or dark
on-theme-change: callback fired when the admin changes its preferred theme

<script setup lang="ts">
import { ref } from "vue";
import { DyrectedAdmin } from "@dyrected/vue";

const theme = ref<"system" | "light" | "dark">("system");
const systemTheme = ref<"light" | "dark">("light");

function setTheme(next: "system" | "light" | "dark") {
  theme.value = next;
}
</script>

<template>
  <DyrectedAdmin
    :config="{
      baseUrl: import.meta.env.VITE_DYRECTED_URL,
      apiKey: import.meta.env.VITE_DYRECTED_API_KEY,
      siteId: import.meta.env.VITE_DYRECTED_SITE_ID || '',
    }"
    :theme="theme"
    :system-theme="systemTheme"
    :on-theme-change="setTheme"
  />
</template>

Use live preview when a route is editable

Use useLivePreview for preview-enabled pages. Keep the published fetch path as the main implementation, then render the returned preview data when the admin preview iframe sends updates.

For the guided flow, use Adding a Visual Editor in Vue.