@nuxtjs/content

@nuxtjs/content

Write your content inside your Nuxt app

📖 Release Notes

Setup

1. Add @nuxtjs/content dependency to your project

yarn add @nuxtjs/content # or npm install @nuxtjs/content

1. Add @nuxtjs/content to the modules section of nuxt.config.js

{
  modules: [
    // Simple usage
    '@nuxtjs/content'
  ]
}

Usage

Create a content/ directory in your Nuxt project:

content/
  articles/
    article-1.md
    article-2.md
  home.md

Methods

• $content(DirectoryPath: string).fetch() ⇒ [{}]
• $content(FilePath: string).fetch() ⇒ {}

Example

content/home.md

----
title: Home page
---

# Home page

> Welcome to my *home page*!

$content('home').fetch()

{
  "dir": "",
  "slug": "home",
  "path": "/home",
  "updatedAt": "2017-11-07T12:21:34Z",
  "metadata": {
    "title": "Home page"
  },
  "body": {
    "type": "root",
    "children": [
      {
        "type": "heading",
        "depth": 1,
        "children": [
          {
            "type": "text",
            "value": "Home page"
          }
        ]
      },
      {
        "type": "blockquote",
        "children": [
          {
            "type": "paragraph",
            "children": [
              {
                "type": "text",
                "value": "Welcome to my ",
              },
              {
                "type": "emphasis",
                "children": [
                  {
                    "type": "text",
                    "value": "home page",
                  }
                ]
              },
              {
                "type": "text",
                "value": "!"
              }
            ]
          }
        ]
      }
    ]
  }
}

You can now use this.$content(path) in your Vue components:

// Listing
const articles = await this.$content('articles')
	.only(['title', 'date', 'authors'])
	.sortBy('date', 'asc')
	.limit(5)
  .skip(10)
  .where({
		tags: 'testing',
    isArchived: false,
		date: { $gt: new Date(2020) },
    rating: { $gte: 3 },
	})
  .search('welcome')
	.fetch()

// Get previous and next article
const [ prev1, prev2, next1, next2, next3 ] = await this.$content('articles')
	.only(['title', 'path'])
	.sortBy('date')
  .surround('article-2', { before: 2, after: 3 })
  .where({ isArchived: false })
	.fetch()

// Returns
[
  null, // no article-0 here
	{
    title: 'Article 1',
		path: 'article-1'
	},
	null, // no article-3 here
  null, // no article-4 here
  null  // no article-5 here
]

// limit and offset are ineffective when using surround
// if slug is not found, will fill with null value each item

Code example

<template>
  <article>
    <h1>{{ page.title }}</h1>
    <nuxt-content :body="page.body" />
  </article>
</template>

<script>
export default {
  data() {
    page: null,
    learn: null
  },
  fetch () {
    this.page = await this.$content(`${this.i18n.locale}/guide/installation`).fetch()
    this.learnSection = await this.$content(`${this.i18n.locale}/learn`)
      .only(['title', 'metadata'])
      .sortBy('updatedAt', 'desc')
  }
}
</script>

Using global Vue component in Markdown is supported (see how nuxt press does).

Configuration

// nuxt.config.js
export default {
  modules: ['@nuxtjs/content'],
  // Default options
  content: {
    apiPrefix: '_content', // http://localhost:3000/_content,
    dir: 'content',
    fullTextSearchFields: ['title', 'description', 'slug'],
    markdown: {
      // See https://github.com/remarkjs/remark-external-links#api
      externalLinks: {},
      prism: {
        theme: 'prismjs/themes/prism.css'
      }
    },
    yaml: {
      // See https://github.com/nodeca/js-yaml
    },
    csv: {
      // See https://github.com/Keyang/node-csvtojson
    }
  }
}

Development

1. Clone this repository
2. Install dependencies using yarn install or npm install
3. Start development server using yarn dev or npm run dev

License

MIT License

Copyright (c) NuxtJS Company