Globals & Site Settings

Globals are for content that only has one instance — site name, navigation menu, SEO defaults, footer links. Unlike collections, a global has no list view; editors just open it and edit the single document.

1. Define globals

// dyrected.config.ts  (same for both frameworks)
export default defineConfig({
  globals: [
    {
      slug: 'site-settings',
      label: 'Site Settings',
      fields: [
        { name: 'siteName',  type: 'text',         required: true },
        { name: 'tagline',   type: 'text' },
        { name: 'logo',      type: 'relationship',  relationTo: 'media' },
        { name: 'favicon',   type: 'relationship',  relationTo: 'media' },
        { name: 'seoDefault', type: 'object', fields: [
          { name: 'title',       type: 'text' },
          { name: 'description', type: 'textarea' },
          { name: 'ogImage',     type: 'relationship', relationTo: 'media' },
        ]},
      ],
    },
    {
      slug: 'navigation',
      label: 'Navigation',
      fields: [
        {
          name: 'items',
          type: 'array',
          fields: [
            { name: 'label', type: 'text', required: true },
            { name: 'url',   type: 'text', required: true },
          ],
        },
      ],
    },
  ],
})

2. Fetch a global in your layout

// app/layout.tsx
import { createClient } from '@dyrected/sdk'

const client = createClient({
  baseUrl: process.env.NEXT_PUBLIC_DYRECTED_URL!,
  apiKey: process.env.DYRECTED_API_KEY!,
})

async function getSiteSettings() {
  return client.global('site-settings').get({ depth: 1 })
}

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const settings = await getSiteSettings()

  return (
    <html lang="en">
      <head>
        <title>{settings.siteName}</title>
        {settings.favicon && <link rel="icon" href={settings.favicon.url} />}
      </head>
      <body>
        <header>
          {settings.logo && <img src={settings.logo.url} alt={settings.siteName} />}
        </header>
        {children}
      </body>
    </html>
  )
}

<!-- app.vue -->
<script setup lang="ts">
const { data: settings } = await useDyrectedGlobal('site-settings', { depth: 1 })
const { data: nav }      = await useDyrectedGlobal('navigation')

useHead({
  title: settings.value?.siteName,
  link: settings.value?.favicon
    ? [{ rel: 'icon', href: settings.value.favicon.url }]
    : [],
})
</script>

<template>
  <header>
    <img v-if="settings?.logo" :src="settings.logo.url" :alt="settings.siteName" />
    <nav>
      <NuxtLink v-for="item in nav?.items" :key="item.url" :to="item.url">
        {{ item.label }}
      </NuxtLink>
    </nav>
  </header>
  <NuxtPage />
</template>

3. Fetch with the SDK

const settings = await client.global('site-settings').get({ depth: 1 })
const nav      = await client.global('navigation').get()

4. Update a global

PATCH /dyrected/globals/site-settings
Authorization: Bearer <admin-token>
Content-Type: application/json

{ "siteName": "My Updated Site" }

5. Revalidate when a global changes

// dyrected.config.ts
{
  slug: 'site-settings',
  hooks: {
    afterChange: [
      async () => {
        await fetch(`${process.env.NEXT_PUBLIC_SITE_URL}/api/revalidate`, {
          method: 'POST',
          headers: { 'x-revalidate-secret': process.env.REVALIDATE_SECRET! },
          body: JSON.stringify({ path: '/' }),
        })
      },
    ],
  },
  fields: [...],
}

// dyrected.config.ts
{
  slug: 'site-settings',
  hooks: {
    afterChange: [
      async () => {
        // Nuxt uses event-driven cache invalidation
        await $fetch('/api/revalidate', { method: 'POST' })
      },
    ],
  },
  fields: [...],
}

Common globals to define

Slug	What it holds
`site-settings`	Site name, logo, favicon, SEO defaults
`navigation`	Header nav items
`footer`	Columns, social links, legal copy
`announcement`	Banner message, enabled toggle, CTA link
`theme`	Accent colour, font choice, dark mode default