Building a Page Builder

// app/[slug]/page.tsx  — Server Component (fetch)
import { notFound } from 'next/navigation'
import { getDyrectedClient } from '@dyrected/next'
import PageBlocks from '@/components/page-blocks'

const client = getDyrectedClient()

export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params
  const { docs } = await client.collection('pages').find({
    where: { slug: { equals: slug } },
    limit: 1,
    depth: 1,
  })
  if (!docs[0]) notFound()

  return <main><PageBlocks layout={docs[0].layout} /></main>
}

export async function generateStaticParams() {
  const { docs } = await client.collection('pages').find({ limit: 100 })
  return docs.map((p: any) => ({ slug: p.slug }))
}

// components/page-blocks.tsx — Client Component (Blocks uses React context)
'use client'
import { Blocks } from '@dyrected/next'
import { Hero } from './blocks/Hero'
import { RichText } from './blocks/RichText'
import { CallToAction } from './blocks/CallToAction'

const components = { hero: Hero, richText: RichText, callToAction: CallToAction }

export default function PageBlocks({ layout }: { layout: any[] }) {
  return <Blocks items={layout} components={components} path="layout" />
}

<!-- pages/[slug].vue -->
<script setup lang="ts">
import { defineAsyncComponent } from 'vue'

const components = {
  hero: defineAsyncComponent(() => import('~/components/blocks/Hero.vue')),
  richText: defineAsyncComponent(() => import('~/components/blocks/RichText.vue')),
  callToAction: defineAsyncComponent(() => import('~/components/blocks/CallToAction.vue')),
}

const route = useRoute()
const { data: page } = await useDyrectedCollection('pages', {
  where: { slug: { equals: route.params.slug } },
  depth: 1,
  limit: 1,
})

const doc = computed(() => page.value?.docs?.[0])
if (!doc.value) throw createError({ statusCode: 404 })
</script>

<template>
  <!-- <DyrectedBlocks> is auto-imported by @dyrected/nuxt -->
  <main>
    <DyrectedBlocks :items="doc.layout" :components="components" path="layout" />
  </main>
</template>

// components/blocks/Hero.tsx
import { useDyPath } from '@dyrected/next'

export function Hero({ heading, subheading, ctaLabel, ctaUrl, image }: any) {
  // Call useDyPath unconditionally at the top — it's a hook, so it can't sit
  // inside a conditional like `subheading && ...`.
  const dyHeading = useDyPath('heading')
  const dySubheading = useDyPath('subheading')
  const dyCtaLabel = useDyPath('ctaLabel')

  return (
    <section className="py-24 text-center">
      {image && <img src={image.url} alt={image.alt} className="mx-auto mb-8" />}
      <h1 {...dyHeading} className="text-5xl font-bold">{heading}</h1>
      {subheading && <p {...dySubheading} className="mt-4 text-xl">{subheading}</p>}
      {ctaLabel && (
        <a href={ctaUrl} {...dyCtaLabel} className="mt-8 inline-block rounded-md bg-black px-6 py-3 text-white">
          {ctaLabel}
        </a>
      )}
    </section>
  )
}

<!-- components/blocks/Hero.vue -->
<script setup lang="ts">
defineProps<{ heading: string; subheading?: string; image?: any; ctaLabel?: string; ctaUrl?: string }>()

// useDyPath is auto-imported by @dyrected/nuxt
const dyHeading = useDyPath('heading')
const dySubheading = useDyPath('subheading')
const dyCta = useDyPath('ctaLabel')
</script>

<template>
  <section class="py-24 text-center">
    <img v-if="image" :src="image.url" :alt="image.alt" class="mx-auto mb-8" />
    <h1 v-bind="dyHeading" class="text-5xl font-bold">{{ heading }}</h1>
    <p v-if="subheading" v-bind="dySubheading" class="mt-4 text-xl">{{ subheading }}</p>
    <a v-if="ctaLabel" :href="ctaUrl" v-bind="dyCta" class="mt-8 inline-block rounded-md bg-black px-6 py-3 text-white">
      {{ ctaLabel }}
    </a>
  </section>
</template>

// components/blocks/Hero.tsx
import { useDyPath } from '@dyrected/next'

export function Hero({ variant = 'centered', heading, subheading, image }: any) {
  const dyHeading = useDyPath('heading')
  const dySubheading = useDyPath('subheading')

  return (
    <section className={variant === 'split' ? 'grid md:grid-cols-2 gap-8' : 'py-24 text-center'}>
      <div>
        <h1 {...dyHeading} className="text-5xl font-bold">{heading}</h1>
        {variant !== 'minimal' && subheading && (
          <p {...dySubheading} className="mt-4 text-xl">{subheading}</p>
        )}
      </div>
      {variant === 'split' && image && <img src={image.url} alt={image.alt} />}
    </section>
  )
}

<!-- components/blocks/Hero.vue -->
<script setup lang="ts">
const props = withDefaults(
  defineProps<{ variant?: string; heading: string; subheading?: string; image?: any }>(),
  { variant: 'centered' },
)
const dyHeading = useDyPath('heading')
const dySubheading = useDyPath('subheading')
</script>

<template>
  <section :class="variant === 'split' ? 'grid md:grid-cols-2 gap-8' : 'py-24 text-center'">
    <div>
      <h1 v-bind="dyHeading" class="text-5xl font-bold">{{ heading }}</h1>
      <p v-if="variant !== 'minimal' && subheading" v-bind="dySubheading" class="mt-4 text-xl">
        {{ subheading }}
      </p>
    </div>
    <img v-if="variant === 'split' && image" :src="image.url" :alt="image.alt" />
  </section>
</template>