Nuxt minimal
A minimal Nuxt example that renders different content formats with Comark Content.
One landing page, four content formats, one component library.
YAMLandJSONare data bound straight into a template.Markdownandjson-renderspecs both parse to a Comark AST and render through <MarkdownDocument> with the same components map.
Switch formats from the header.
Setting up your own app? Follow the Nuxt integration guide step by step.
content.ts
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'
import jsonRender from 'comark/plugins/json-render'
import highlight from 'comark/plugins/highlight'
export const content = comarkContent({
source: fs('./content'),
plugins: [
// Parse `.yml`/`.yaml` files into content so YAML pages render alongside Markdown.
// https://content.comark.dev/plugins/built-in/yaml
yaml(),
// Parse `.json` files into content so JSON pages render alongside Markdown.
// https://content.comark.dev/plugins/built-in/json
json(),
],
markdown: {
plugins: [
// Render a Comark AST supplied as JSON (the `json-renderer` page) back to components.
// https://comark.dev/plugins/built-in/json-render
jsonRender(),
// Syntax-highlight fenced code blocks in the parsed Markdown.
// https://comark.dev/plugins/built-in/syntax-highlight
highlight(),
],
},
})