@droyer/nuxtcms NPM

:package: NuxtCMS

Nuxt.js module for managing your projects data and content.

NuxtCMS Demo

Github Repo | Live Site

NuxtCMS Logo

📖 Release Notes

:heavy_check_mark: Features

:memo: Write content in Markdown
:card_file_box: Use YAML for data
:lock: Can set content collection items to draft
:mag: Easy access to get the content and data you need
:label: Automatic tag API creation for any collections that include them in frontmatter

:zap: The Quick Overview

:ballot_box_with_check: Everything lives in the _CMS directory
Two Directories for storing files
- Content for Markdown collections
- Data for Yaml collections and individual files
Everything can be accessed as JSON via the $cmsApi.get() method

Example Directory Structure

# INSIDE NUXT SOUCE DIRECTORY

_CMS
├── Content
│   ├── Blog
│   ├── Markdown
│   └── Pages
└── Data
    ├── Courses
    └── Projects
    ├── menu.yml
    └── settings.yml

Markdown files go inside subdirectories within Content
Directory name of Blog is NOT customizable
YAML files go inside within Data as files or inside subdirectories
Subdirectories inside Data are considered "DataCollections" This means they will a slug and title will automatically be provided for each item within the collection so they can be used for dynamic route generation

:page_facing_up: Using Your Content & Data

NuxtCMS provides a helper via $cmsApi that is available on the context and instance.

Whether you want all the items within a content type or a specific item, you use the same method, $cmsApi.get() to get both content and data. For example:

const allProjects = $cmsApi.get("projects");
const specificProject = $cmsApi.get("projects", params.slug);

Examples

In A Page Route

Getting All Items Within a Data or Content Collection

asyncData({ $cmsApi }) {
    const articles = $cmsApi.get('articles')
    return { articles }
}

In A Dynamic Page Route

Get An Item Within a Data or Content Collection

asyncData({ $cmsApi, params }) {
    const article = $cmsApi.get('articles', params.slug)
    return { article }
}

Within Vuex Store

nuxtServerInit({ commit }, { $cmsApi }) {
  commit('setDataFileExample', $cmsApi.get('data-file-example'))
}

Within A Component

computed: {
  nav() {
    return this.$cmsApi.get('nav-menu')
  }
}

Using Provided Blog Styles

<style src="@droyer/nuxtcms/lib/assets/blog-styles.css"></style>
<style src="prismjs/themes/prism-tomorrow.css"></style>

Setup

Add nuxtcms dependency with yarn or npm into your project
Add nuxtcms to modules section of nuxt.config.js
Configure it:

{
  modules: [
    // Simple usage
    "@droyer/nuxtcms",

    // With options
    [
      "@droyer/nuxtcms",
      {
        /* module options */
      }
    ]
  ];
}