Let Editors Build Custom Pages in Vue with Dyrected

Use this page after Adding a Visual Editor in Vue. At this point, the important pieces should already exist:

the pages content type exists
the frontend can render Dyrected content
preview can open the real route and reflect edits

Now the goal changes. Instead of proving the integration works, you are deciding whether the setup is ready for editors to build real campaign and landing pages without developer help for every change.

By the end, you should know what a safe custom-page workflow looks like, which parts must stay controlled by code, and how the schema, rendering, and preview pieces fit together into one editor-ready system.

Start with the right mental model

For custom landing pages, the goal is usually not "let editors design anything." The goal is "let editors assemble approved page sections fast."

That means the safest setup is:

the frontend keeps the design system
the content model defines the approved section types
editors choose the order and content inside those sections

In Dyrected, that setup is usually:

a pages content type with a layout blocks field
a Vue renderer that maps each blockType to a real component
a preview setup that opens the real page while editors are working

Choose the sections editors should actually control

Before you write any code, list the section types the team needs most often.

A strong first set is usually small:

hero
feature grid
testimonial
call to action

If a section is not already designed in the frontend, do not add it yet. The fastest dashboard is the one that only offers sections the site already knows how to render well.

Add a `layout` blocks field to the page model

This is the schema change that turns a basic page model into a controlled landing-page builder.

The important rule is simple: keep the page structure flexible, but only inside the set of blocks you approved.

For a first pass, each block should stay focused on one visible section type and a small set of editor-friendly fields.

Make sure the frontend can render every approved section

The dashboard is only half of the workflow. Every approved block also needs a matching Vue component in the frontend.

That means:

every blockType in the model must map to a real component
the page route must render the layout field in order
preview must open the same route editors are trying to build

If one of those pieces is missing, this stops being a custom-page workflow and turns back into a schema exercise.

Keep the page builder controlled

For a quick-start editorial workflow:

keep global site chrome like navigation and settings outside the page layout
keep one block focused on one visible section type
keep field names content-focused, not implementation-focused
avoid adding arbitrary JSON fields or open-ended style controls

A good page builder helps marketing move fast inside guardrails. It should not ask them to invent layout rules the frontend does not already understand.

Build one real landing page in the dashboard

Once model, rendering, and preview all exist, create one real landing page in the admin and add a few sections in order:

a hero
a feature grid
a testimonial
a call to action

Then open that page in preview and make one real editorial change: update the hero copy, reorder a section, or replace a call to action.

That is the moment this guide is aiming for. It proves editors are no longer just editing fields. They are building a real page inside the system you prepared for them.

What this setup gives editors

Once this is in place, the dashboard can support the tasks content and marketing teams usually care about most:

create a new landing page
reorder approved page sections
update hero copy, proof, and calls to action
publish a campaign page without asking a developer for every text edit

What it does not do is allow arbitrary new section types or arbitrary design changes. That stays with the frontend team, which is usually the safer split.

Where to go deeper

Use this page for the quick-start version of the pattern. For the full background, continue to:

Success check

You are ready to call the Vue quick start structurally complete when:

the page model supports approved reusable sections
the frontend renders those sections correctly
preview reflects changes on a real page
the dashboard can create at least one landing page from those approved sections