Binding Data

Binding Data in Markdown

Using the data binding feature from Nuxt Content, you can bind data within your Markdown document using the {{ $doc.variable || 'defaultValue' }} syntax. This allows you to define these values in the YAML frontmatter at the top of the document, or through the global variable in app.config.ts.

Document variable in YAML frontmatter

example.md
---
title: 'Title of the page'
description: 'Meta description of the page'
customVariable: 'Custom Value'
---

# The Title is {{ $doc.title }} and customVariable is {{ $doc.customVariable || 'defaultValue' }}

Global Variable in app.config.ts

app.config.ts
export default defineAppConfig({
  shadcnDocs: {
    // ...
    data: {
      currentVersion: 'v1.0.0'
    }
  }
});
example.md
# Current Version is {{ $doc.currentVersion || 'v1.0.0' }}
Edit this page
Overriding
Replacing shadcn-docs-nuxt components with custom vue components.
Code Snippet
Importing and displaying source code from your project.