CMS for Nuxt.js
npm install @droyer/nuxtcms[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![Circle CI][circle-ci-src]][circle-ci-href]
[![Codecov][codecov-src]][codecov-href]
[![Dependencies][david-dm-src]][david-dm-href]
[![Standard JS][standard-js-src]][standard-js-href]
> Nuxt.js module for managing your projects data and content.
- :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
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
``shINSIDE 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
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:
`js`
const allProjects = $cmsApi.get("projects");
const specificProject = $cmsApi.get("projects", params.slug);
#### In A Page Route
_Getting All Items Within a Data or Content Collection_
`js`
asyncData({ $cmsApi }) {
const articles = $cmsApi.get('articles')
return { articles }
}
#### In A Dynamic Page Route
Get An Item Within a Data or Content Collection
`js`
asyncData({ $cmsApi, params }) {
const article = $cmsApi.get('articles', params.slug)
return { article }
}
#### Within Vuex Store
`js`
nuxtServerInit({ commit }, { $cmsApi }) {
commit('setDataFileExample', $cmsApi.get('data-file-example'))
}
#### Within A Component
`jsx`
computed: {
nav() {
return this.$cmsApi.get('nav-menu')
}
}
`html`
1. Add nuxtcms dependency with yarn or npm into your projectnuxtcms
2. Add to modules section of nuxt.config.js
3. Configure it:
`js
{
modules: [
// Simple usage
"@droyer/nuxtcms",
// With options
[
"@droyer/nuxtcms",
{
/ module options /
}
]
];
}
`
The Options go here
1. Clone this repository
2. Install dependencies using yarn install or npm installnpm run dev`
3. Start development server using
Copyright (c) David Royer
[npm-version-src]: https://img.shields.io/npm/dt/@droyer/nuxtcms.svg?style=flat-square
[npm-version-href]: https://npmjs.com/package/@droyer/nuxtcms
[npm-downloads-src]: https://img.shields.io/npm/v/@droyer/nuxtcms/latest.svg?style=flat-square
[npm-downloads-href]: https://npmjs.com/package/@droyer/nuxtcms
[circle-ci-src]: https://img.shields.io/circleci/project/github/davidroyer/nuxtcms.svg?style=flat-square
[circle-ci-href]: https://circleci.com/gh/davidroyer/nuxtcms
[codecov-src]: https://img.shields.io/codecov/c/github/davidroyer/nuxtcms.svg?style=flat-square
[codecov-href]: https://codecov.io/gh/davidroyer/nuxtcms
[david-dm-src]: https://david-dm.org/davidroyer/@droyer/nuxtcms/status.svg?style=flat-square
[david-dm-href]: https://david-dm.org/davidroyer/@droyer/nuxtcms
[standard-js-src]: https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square
[standard-js-href]: https://standardjs.com