Overview

Use this quick start when you already have a Nuxt 3 project and want to hand parts of it over to editors without moving the frontend into a separate CMS product.

By the end of this guide set, you should have a Dyrected-backed Nuxt app with a working admin route, a first schema, starter content, a real frontend render path, and a preview flow that lets editors see what they are changing.

Read the pages in order. Each one assumes the previous step is already working and hands you into the next part of the setup.

The steps

This quick start is meant to feel like one sequence:

1. Step 1: Install Dyrected and choose whether the backend will live in Dyrected Cloud or inside your Nuxt app.
2. Step 2: Define a schema that matches what the site really needs to edit.
3. Step 3: Add initial data so a new environment does not start empty.
4. Step 4: Display that content in Nuxt.
5. Step 5: Add a visual editor workflow.
6. Step 6: Let editors build custom pages in Nuxt.

The mental model

In a Nuxt project, Dyrected does not replace your app router, components, styling, or deployment flow. Your Nuxt app still owns the pages and rendering. Dyrected adds three things around that:

• a typed content model in dyrected.config.ts
• an admin experience generated from that model
• content APIs and Nuxt-aware helpers that your routes can read from

That split matters because it keeps the handoff clean. Editors can change approved content, while your repo still owns layout, behavior, and anything that would break the frontend if it were made arbitrary.

Recommended path

If you want the fastest first success, start with:

• one routable collection such as pages
• one upload collection such as media
• one or two globals such as navigation or settings
• enough initialData to prove the site renders real CMS data on first load

Do not start with every edge case, every role, and every flexible layout idea. Start with the smallest content model that can survive one real editorial workflow.

Before you begin

This quick start assumes:

• you are using Nuxt 3
• you are comfortable editing a Nuxt codebase directly
• you want your Nuxt routes to stay responsible for rendering the site

If you are still deciding whether Dyrected matches the kind of product or site you are building, start with Use Cases and Concepts.

When the framework setup is done and you are ready to give access to another person, use Handing Off to Editors. That shared guide covers the Cloud and self-hosted onboarding paths without tying them to one frontend framework.

Success check

You are on the right guide path if your goal is:

• editors log in at a route like /admin
• content is modeled in code
• your Nuxt routes fetch and render Dyrected content directly
• preview stays close to the real frontend instead of becoming a second unpublished site

If that is the target, continue to Installing Dyrected.