:package: NuxtCMS

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

NuxtCMS Demo

Github Repo | Live Site

📖 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

1. :ballot_box_with_check: Everything lives in the _CMS directory
2. Two Directories for storing files
   • Content for Markdown collections
   • Data for Yaml collections and individual files
3. 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

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

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

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

Options

The Options go here

Development

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

License

MIT License

Copyright (c) David Royer [email protected]