Installing Dyrected
Install Dyrected into an existing Vue SPA, connect it to Dyrected Cloud, generate a starter config, and mount the embedded admin route.
Use this page when you are ready to add Dyrected to an existing Vue app and want the quickest path to a working admin. By the end, you should have the Cloud connection values in place, a generated dyrected.config.ts, an admin route mounted in your app, and be ready to move on to Defining a Schema.
For Vue, this quick start is Cloud-only. The current SPA path connects a Vue app to Dyrected Cloud and does not support running the full Dyrected backend inside the app itself.
Before you start
Make sure all three of these are true before you run anything:
- you already have a working Vue 3 app
- Node.js 22 or newer is installed
- you are running the command from the root of the app
Before you run the CLI, open your site in app.dyrected.com and keep these three values nearby:
Site IDSite API keyBase URL
What this install path does
On the Vue SPA path, the CLI does not scaffold a local backend, but it does create a local dyrected.config.ts.
Instead, it does four practical things:
- installs the core package and the Vue integration
- writes a starter
dyrected.config.ts - writes an embedded admin view
- writes the Cloud environment variables your app will use
The important mental model is the same as the Next.js and Nuxt Cloud paths: your schema lives in this repo, but the backend itself lives in Dyrected Cloud.
Run the installer
From the root of your Vue project, run:
npx dyrected init -y -f vue -b cloud -p adminThis tells the CLI to target Vue, use Dyrected Cloud, and prepare an embedded admin route at /admin.
The dyrected init command uses:
-y/--yesto accept defaults without prompting-f/--frameworkto targetvue-b/--backendto choosecloud-p/--pathto set the admin path
Know what the CLI adds
The Vue SPA path writes:
dyrected.config.ts
src/views/AdminView.vue
.env.exampleIf your app does not use src/, the view is written under views/AdminView.vue instead.
The generated file gives you a ready-made admin view. You still need to add the route in your own router config.
Fill in the Cloud environment variables
The SPA scaffold writes these variables into .env.example:
DYRECTED_URLDYRECTED_API_KEYDYRECTED_SITE_IDVITE_DYRECTED_URLVITE_DYRECTED_API_KEYVITE_DYRECTED_SITE_ID
Copy the real values from your Cloud site into .env.
The DYRECTED_* values are what the sync script uses. The VITE_DYRECTED_* values are what the embedded admin uses in the browser.
Run the sync script
After the install, run:
npm run dyrected:sync-schemaThe CLI adds this script to package.json during setup.
That script pushes the schema from your local dyrected.config.ts to Dyrected Cloud so the hosted backend knows about your collections, globals, and admin settings.
Add the admin route
The CLI writes the admin view, but your app still owns the router.
Add a route that points /admin at the generated view:
import { createRouter, createWebHistory } from "vue-router";
import HomeView from "@/views/HomeView.vue";
import AdminView from "@/views/AdminView.vue";
export default createRouter({
history: createWebHistory(),
routes: [
{ path: "/", component: HomeView },
{ path: "/admin", component: AdminView },
],
});If you chose a different admin path during init, use that route instead.
Confirm the admin dependencies are present
Dyrected's embedded admin bridge depends on:
react-router-dom@tanstack/react-query
If your app does not already include them, add them before you test the admin route.
Do the first boot check
Start your dev server and open /admin.
This is the success signal you care about before changing the content model: the app boots, the admin route loads, and the Cloud-backed admin can sign in.
What happens next
After install, the next job is to reshape the generated config so it matches the content your Vue app actually needs.
The backend still lives in Dyrected Cloud, but the schema is now authored in dyrected.config.ts, just like the other Cloud quick starts.
Troubleshooting
If something goes wrong, check these first:
- if
/admindoes not load, confirm the route points at the generated admin view - if the admin cannot connect, re-check
VITE_DYRECTED_URL,VITE_DYRECTED_API_KEY, andVITE_DYRECTED_SITE_ID - if schema changes are not showing up in Cloud, run
npm run dyrected:sync-schema - if the admin page fails to mount, confirm
react-router-domand@tanstack/react-queryare installed
For the full troubleshooting guide, see Troubleshooting.
Success check
You are ready for the next page when:
- the app has a working
/adminroute - the Cloud credentials are in
.env dyrected.config.tsexists- the admin loads against your Dyrected Cloud site
Once those are true, continue to Defining a Schema.
Overview
Follow the full Vue quick start to connect Dyrected Cloud, model content, render it in your app, add preview, and hand the editing surface to content teams.
Defining a Schema
Reshape the generated schema for your Vue app, keep the first content model small, and sync only what the frontend can actually render.