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.

content - 图2

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

  1. <template>
  2.   <article>
  3.     <nuxt-content :document="article" />
  4.   </article>
  5. </template>

content - 图3

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.

  1. <style>
  2.   .nuxt-content h2 {
  3.     font-weight: bold;
  4.     font-size: 28px;
  5.   }
  6.   .nuxt-content p {
  7.     margin-bottom: 20px;
  8.   }
  9. </style>

content - 图4

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.

  1. ---
  2. title: My first Blog Post
  3. description: Learning how to use @nuxt/content to create a blog
  4. ---

content - 图5

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

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

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

  1. <info-box>
  2.   <template #info-box>
  3.     This is a vue component inside markdown using slots
  4.   </template>
  5. </info-box>

content - 图6

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

  1. <script>
  2.   export default {
  3.     async asyncData({ $content, params }) {
  4.       const articles = await $content('articles', params.slug)
  5.         .only(['title', 'description', 'img', 'slug', 'author'])
  6.         .sortBy('createdAt', 'asc')
  7.         .fetch()
  9.       return {
  10.         articles
  11.       }
  12.     }
  13.   }
  14. </script>

content - 图7

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.

  1. async asyncData({ $content, params }) {
  2.     const article = await $content('articles', params.slug).fetch()
  4.     const [prev, next] = await $content('articles')
  5.       .only(['title', 'slug'])
  6.       .sortBy('createdAt', 'asc')
  7.       .surround(params.slug)
  8.       .fetch()
  10.     return {
  11.       article,
  12.       prev,
  13.       next
  14.     }
  15.   },
  1. <prev-next :prev="prev" :next="next" />

content - 图8

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

  1. <script>
  2.   export default {
  3.     data() {
  4.       return {
  5.         searchQuery: '',
  6.         articles: []
  7.       }
  8.     },
  9.     watch: {
  10.       async searchQuery(searchQuery) {
  11.         if (!searchQuery) {
  12.           this.articles = []
  13.           return
  14.         }
  15.         this.articles = await this.$content('articles')
  16.           .limit(6)
  17.           .search(searchQuery)
  18.           .fetch()
  19.       }
  20.     }
  21.   }
  22. </script>

content - 图9

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.

  1. yarn add prism-themes
  1. npm install prism-themes

nuxt.config.js

  1. content: {
  2.   markdown: {
  3.     prism: {
  4.       theme: 'prism-themes/themes/prism-material-oceanic.css'
  5.     }
  6.   }
  7. }

content - 图10

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.

content - 图11

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

  1. <nav>
  2.   <ul>
  3.     <li v-for="link of article.toc" :key="link.id">
  4.       <NuxtLink :to="`#${link.id}`">{{ link.text }}</NuxtLink>
  5.     </li>
  6.   </ul>
  7. </nav>

content - 图12

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

content - 图13

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.

content - 图14

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.

content - 图15

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.

content - 图16

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.

content - 图17

See the content module docs for more details on programmatic usage

What’s next

content - 图18

Check out our tutorial on How to Create a Blog with Nuxt Content

content - 图19

Check out the content module docs for more advanced usage and examples