Skip to content

medfreeman/nuxt-netlify-cms-module

Repository files navigation

nuxt-netlify-cms-module

npm version npm circleci Codecov Greenkeeper badge Dependencies devDependencies

styled with prettier

Easy Netlify CMS integration with nuxt.js

📖 Release Notes

Features

Setup

  • Add nuxt-netlify-cms and netlify-cms devDependencies using yarn or npm to your project

    npm i -D nuxt-netlify-cms netlify-cms OR yarn add -D nuxt-netlify-cms netlify-cms

  • Add nuxt-netlify-cms to modules section of nuxt.config.js

{
  modules: [
    // Simple usage
    "nuxt-netlify-cms",

    // With options
    ["nuxt-netlify-cms", { adminPath: "secure" }],
  ],

  // You can optionally use global options instead of inline form
  netlifyCms: {
    adminPath: "secure"
  }
}

Usage

Netlify CMS module config folder

This module will look for the Netlify CMS config file and extensions in the following folder: [nuxt.js srcDir]/netlify-cms.

ℹ️ The nuxt.js srcDir is set to the project root folder by default. If you don't change this value in nuxt config, you'll just have to create the "netlify-cms" directory at your project root folder.

ℹ️ If you don't use any of the following two features, there's no need to create this folder. But since netlify-cms needs a configuration specific to your repository, you'll have to specify it through options.

Netlify CMS config.yml

You can specify a custom configuration, that will be parsed and merged with the module's netlify CMS options.

You have to place the file in your Netlify CMS module config folder and name it config.yml.

ℹ️ Note that each path in the file (media_folder, collections folder fields and collections file fields) will be rewritten to prepend nuxt.js srcDir, so please specify each path relative to this folder.

This file can be changed while nuxt dev is running, and Netlify CMS will be updated automatically.

Netlify CMS customizations

This module will look for Netlify CMS customizations in *.js files contained in Netlify CMS module config folder and subfolders, and include them in the CMS build.

These are of two kinds, Custom Previews and Custom Widgets.

ℹ️ The global variable CMS is available to these javascript files to reference the CMS object.

ℹ️ The contents of this directory and subdirectories can be changed while nuxt dev is running, and Netlify CMS will be updated automatically.

Options

You can pass options using module options or netlifyCms section in nuxt.config.js.

adminPath

  • Default: "admin"

adminPath defines the path where Netlify CMS will be served.

With nuxt default configuration, it will be served to http://localhost:3000/admin/ in development.

adminTitle

  • Default: "Content Manager"

adminTitle defines the html title of the page where Netlify CMS will be served.

cmsConfig

  • Default: { media_folder: "static/uploads" }

cmsConfig wholly reflects Netlify CMS config.yml, in js object format.

ℹ️ The order of precedence for the cms configuration is defaults < netlify-cms.yml < module options

ℹ️ The paths are also rewritten according to nuxt.js srcDir

CONTRIBUTING

  • ⇄ Pull requests and ★ Stars are always welcome.
  • For bugs and feature requests, please create an issue.
  • Pull requests must be accompanied by passing automated tests ($ yarn test).

License

MIT License

Copyright (c) Mehdi Lahlou [email protected]