content

Empower your Nuxt.js application with @nuxtjs/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.

nuxt content module

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.

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="bg-blue-500 text-white p-4 mb-4">
    <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

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 PrismJS classes. You can also add a different prismJS theme or disable it altogether.

yarn add prism-themes
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 QueryBuilder API (MongoDB like)

The content module comes with a powerful QueryBuilder 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

Extend with hooks

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

See the content module docs for more details

Integration with @nuxtjs/feed

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

See the content module docs for more details

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.

If using Nuxt <2.13 and you need to specify the dynamic routes you can do so using the generate property and using @nuxt/content programmatically.

See the content module docs for more details

Contributors

잘못된 부분이 있거나 이 문서에 기여하고 싶으신가요? GitHub에서 이 페이지를 수정해주세요!