NuxtContent Cheat Sheet

Nuxt File Logo

Documentation

Content Components

Content Component Directory

  • v2: /components/content
  • v3: /componentscontent
  • v3 with v4 future compatibility: ./app/components/content
  • v4: ./app/components/content

Markdown Usage

The Markdown syntax for specifying which content will belong to the custom component is to use start tag ::[name] and an end :: tags. Everything in between is the default slot of the component. The [name] being the name of the custom component. For example, this Markdown shows which text will be used by the Card custom component.


This is not in the card content component

::card
The content of the card in the default slot
::

This is not in the card content component

Name Casing

A content component FigureCaption.vue could be invoked as

  1. ::figure-caption
  2. ::FigureCaption
  3. ::figureCaption
  4. ::figurecaption case is not meaningful

Slots

Default, #caption and #subcaption slot example

::FigureCaption
![Pennock Projects Logo as a Circuit Board Badge](/images/PennockProjectsLogo.png)

#caption
This is the caption for the caption named slot

#subcaption
This is the sub caption for the subcaption named slot
::

Props Inline

::alert{type="warning" icon="exclamation-circle"}
Oops! An error occurred
::

Props YAML

::icon-card
---
icon: IconNuxt
description: Harness the Nuxt ecosystem.
title: Nuxt Architecture.
---
::