What is Nuxt Content?

Content is a Nuxt module that helps you to work with markdowns easily. Nuxt Content reads the '/content' directory in your project, parses them to create a powerful data layer for nuxt application!

Let's see what it can do for us in more details 🚀

Parse Markdowns

Obivesly it can parse Markdown files to HTML tags!
(this whole page you see is actually built upon this!)
and because of this, you inherit all of the basic markdown capabilities. for example:

Bold text
Italic text

Quoting text

Link

and etc...

Code Highlighting

you can render codeblocks in you Markdowns with beautiful syntax highliting.

Example:

export default {
 itsAwesome: true
}

this is made possible using Shiki under the hood. it has so many themes that you can choose. that one i have used is called github-dark.

Vue Components Inside Markdowns

Create Vue Components inside /components/content, then you can use them in markdowns!

Example:

<!-- Alert.vue -->
<template>
    <div role="alert" class="rounded border-s-4 border-red-500 bg-red-50 p-4 dark:border-red-600 dark:bg-red-900">
        <strong class="block font-medium text-red-800 dark:text-red-100"> Alert </strong>

        <p class="mt-2 text-sm text-red-700 dark:text-red-200">
            <slot></slot> 
            <!-- the slot tag is recieve our value from markdown -->
        </p>
    </div>
</template>

then, use it in Markdowns like this:

::alert
The content of the card
::

Output:

Cool!

Query on your data

Content module provides some Composables that can do various things for us. One of them is queryContent().

The queryContent composable provides methods for querying and fetching your contents.
Example:

<script setup>
const { data } = await useAsyncData('home', () => queryContent('/').findOne())
</script>

<template>
  <pre>
    {{ data }}
  </pre>
</template>

Here we use queryContent Composable to fetch single document that exists in / ( slash '/' means /content folder in this context)

Render markdowns in page

Content module provides some Components that can do various things for us. One of them is <ContentRenderer>.
The <ContentRenderer> component renders a document coming from a query with queryContent().
We pass the data to the component and it renders. Look at the example below:

<script setup lang="ts">
const { data } = await useAsyncData('page-data', () => queryContent('/hello').findOne())
</script>

<template>
  <main>
    Parse & render markdown  fetched
    <ContentRenderer :value="data"> 
      <template #empty>
        <p>No content found.</p>
      </template>
    </ContentRenderer>
  </main>
</template>

Learn more about Nuxt-Content

If you intrested, i suggest to take a look at their documentation.