📦 NuxtCMS
Nuxt.js module for managing your projects data and content.
NuxtCMS Demo
✔️ Features
-
📝 Write content in Markdown -
🗃️ Use YAML for data -
🔒 Can set content collection items to draft -
🔍 Easy access to get the content and data you need -
🏷️ Automatic tag API creation for any collections that include them in frontmatter
⚡ The Quick Overview
-
☑️ 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
📄 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 withyarn
ornpm
into your project - Add
nuxtcms
tomodules
section ofnuxt.config.js
- Configure it:
{
modules: [
// Simple usage
"@droyer/nuxtcms",
// With options
[
"@droyer/nuxtcms",
{
/* module options */
}
]
];
}
Options
The Options go here
Development
- Clone this repository
- Install dependencies using
yarn install
ornpm install
- Start development server using
npm run dev
License
Copyright (c) David Royer droyer01@gmail.com