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

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

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

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>

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

content - 图6

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>

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.     const article = await $content('articles', params.slug).fetch()
  3.     const [prev, next] = await $content('articles')
  4.       .only(['title', 'slug'])
  5.       .sortBy('createdAt', 'asc')
  7.       .fetch()
  9.     return {
  10.       article,
  11.       prev,
  12.       next
  13.     }
  14.   },
  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

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

content - 图10

See the 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 for more details

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.

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.

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.

See the 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.

See the for more details on programmatic usage

content - 图18

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

Check out the for more advanced usage and examples