Content directory

Empower your Nuxt application with @nuxt/content module where you can write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.

Hot reload in development

The content module is blazing fast when it comes to hot reloading in development due to not having to go through webpack when you make changes to your markdown files. You can also listen to the content:update event and create a plugin so that every time you update a file in your content directory it will dispatch a fetchCategories method for example.

Displaying content

You can use <nuxt-content> component directly in your template to display the page body.

<template>
  <article>
    <nuxt-content :document="article" />
  </article>
</template>

Styling your content

Depending on what you're using to design your app, you may need to write some style to properly display the markdown.

<nuxt-content> component will automatically add a .nuxt-content class, you can use it to customize your styles.

<style>
  .nuxt-content h2 {
    font-weight: bold;
    font-size: 28px;
  }
  .nuxt-content p {
    margin-bottom: 20px;
  }
</style>

Handles Markdown, CSV, YAML, JSON(5)

This module converts your .md files into a JSON AST tree structure, stored in a body variable. You can also add a YAML front matter block to your markdown files or a .yaml file which will be injected into the document. You can also add a json/json5 file which can also be injected into the document. And you can use a .csv file where rows will be assigned to the body variable.

---
title: My first Blog Post
description: Learning how to use @nuxt/content to create a blog
---

Vue components in Markdown

You can use Vue components directly in your markdown files. You will however need to use your components as kebab case and cannot use self-closing tags.

<template>
  <div class="p-4 mb-4 text-white bg-blue-500">
    <p><slot name="info-box">default</slot></p>
  </div>
</template>

<info-box>
  <template #info-box>
    This is a vue component inside markdown using slots
  </template>
</info-box>

Fully Searchable API

You can use $content() to list, filter and search your content easily.

<script>
  export default {
    async asyncData({ $content, params }) {
      const articles = await $content('articles', params.slug)
        .only(['title', 'description', 'img', 'slug', 'author'])
        .sortBy('createdAt', 'asc')
        .fetch()

      return {
        articles
      }
    }
  }
</script>

Previous and Next articles

The content module includes a .surround(slug) so that you get previous and next articles easily.

async asyncData({ $content, params }) {
    const article = await $content('articles', params.slug).fetch()

    const [prev, next] = await $content('articles')
      .only(['title', 'slug'])
      .sortBy('createdAt', 'asc')
      .surround(params.slug)
      .fetch()

    return {
      article,
      prev,
      next
    }
  },

<prev-next :prev="prev" :next="next" />

Full-text search

The content module comes with a full text search so you can easily search across your markdown files without having to install anything.

<script>
  export default {
    data() {
      return {
        searchQuery: '',
        articles: []
      }
    },
    watch: {
      async searchQuery(searchQuery) {
        if (!searchQuery) {
          this.articles = []
          return
        }
        this.articles = await this.$content('articles')
          .limit(6)
          .search(searchQuery)
          .fetch()
      }
    }
  }
</script>

Syntax highlighting

This module automatically wraps codeblocks and applies Prism  classes. You can also add a different Prism theme or disable it altogether.

yarn add prism-themes

npm install prism-themes

content: {
  markdown: {
    prism: {
      theme: 'prism-themes/themes/prism-material-oceanic.css'
    }
  }
}

Extend Markdown Parsing

Originally markdown does not support highlighting lines inside codeblock nor filenames. The content module allows it with its own custom syntax. Line numbers are added to the pre tag in data-line attributes and the filename will be converted to a span with a filename class, so you can style it.

Table of contents generation

A toc(Table of Contents) array property will be injected into your document, listing all the headings with their titles and ids, so you can link to them.

<nav>
  <ul>
    <li v-for="link of article.toc" :key="link.id">
      <NuxtLink :to="`#${link.id}`">{{ link.text }}</NuxtLink>
    </li>
  </ul>
</nav>

Powerful query builder API (MongoDB-like)

The content module comes with a powerful query builder API similar to MongoDB which allows you to easily see the JSON of each directory at http://localhost:3000/_content/. The endpoint is accessible on GET and POST request, so you can use query params.

http://localhost:3000/_content/articles?only=title&only=description&limit=10

Extend with hooks

You can use hooks to extend the module so you can add data to a document before it is stored.

Integration with @nuxtjs/feed

In the case of articles, the content can be used to generate news feeds using @nuxtjs/feed module.

Support static site generation

The content module works with static site generation using the nuxt generate. All routes will be automatically generated thanks to the nuxt crawler feature.

What's next