Content directory

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.

See the content module docs for more details

Displaying content

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

pages/blog/_slug.vue

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

See the content module docs for more details

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>

See the content module docs for more details

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
---

See the content module docs for more details

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.

components/global/InfoBox.vue

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

content/articles/my-first-blog-post.md

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

See the content module docs for more details

Fully Searchable API

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

pages/blog/index.vue

<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>

See the content module docs for more details

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" />

See the content module docs for more details

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.

components/AppSearchInput.vue

<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>

See the content module docs for more details

Syntax highlighting

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

Yarn

yarn add prism-themes

NPM

npm install prism-themes

nuxt.config.js

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

See the content module docs for more details

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.

See the content module docs for more details

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.

pages/blog/_slug.vue

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

See the content module docs for more details

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

See the content module docs for more details