Rendering YAML and JSON data

Not all content is prose. Landing pages, config, navigation, and listings are structured data: a fixed shape you render with a layout you own. Comark Content handles these with the yaml and json plugins.

Data documents

Each .yaml / .yml / .json file becomes a document whose data is the parsed object (its nodes are empty). Register the plugins once:

import { comarkContent } from 'comark-content'
import fs from 'comark-content/sources/fs'
import yaml from 'comark-content/plugins/yaml'
import json from 'comark-content/plugins/json'

export const content = comarkContent({
  source: fs('./content'),
  plugins: [yaml(), json()],
})

These documents behave like any other entry: content.get(), content.list(), and content.query() all work, so a content/landing.yaml is fetchable by path just like a Markdown page.

Binding data to components

Because the file is data, you decide how it renders. Fetch it and bind the fields into components in your template:

<script setup lang="ts">
const { data: page } = await useAsyncData('landing', () => clientContent.get('/landing-yaml'))
const data = computed(() => page.value!.data)
</script>

<template>
  <UPageHero
    :title="data.hero.title"
    :description="data.hero.description"
    :links="data.hero.links"
  />
</template>