Nuxt.js + Netlify CMS starter template

Build server-less, static websites with Vue.js and Netlify CMS.

This is a starter template to build static websites with Vue.js and Netlify CMS, based on Nuxt v1.x. What it covers:

Setup via Vue CLI 🏗
Easily setup a nearly blank Nuxt.js project.
Currently not optimized for Vue CLI v3.0.
Content editing via Netlify CMS ✏️
Netlify CMS is a client-side CMS connecting directly to your git repository to edit markdown files.
Also supports other file formats, but this template only works with the default, frontmatter markdown format.
Show content in Vue.js via Nuxtent/Nuxtdown module 🔍️
The Nuxtdown module (fixed fork from Nuxtent) allows querying the content and show in the UI.
Static-site generation via Nuxt.js ✅
Nuxt.js, the famous framework to build universal Vue.js applications, generates a static-site.

Nuxt.js + Netlify CMS starter template

Prerequisites

Make sure to have node 8.0+ and npm 5.0+ installed
You know what Netlify CMS and Nuxt.js is.

Setup

Step 1 This is a project template for vue-cli.

$ vue init renestalder/nuxt-netlify-cms-starter-template my-project  
$ cd my-project                     
# install dependencies
$ npm install # Or yarn install

Make sure to use a version of vue-cli >= 2.1 (vue -V). It wasn't tested with Vue CLI >= 3.0.

Step 2 Push to GitHub & to Netlify

Make sure to enable both Netlify's identity and git-gateway services under https://app.netlify.com/sites/YOUR_SITE/settings/identity

Usage

Configuration

CMS & content models
Define content files and fields for your content.
File: static/admin/config.yml
Documentation: Official Netlify CMS documentation -> Configuration
Routing & querying
Out of the box, the UI doesn't have a clue where your content is stored and which dynamic routes belong to which content. Nuxt.js can only map static pages by default. Dynamic routes like blog posts with different file names are not detected. The configuration for this happens by Nuxtdown.
File: nuxtdown.config.js
Documentation: Nuxtdown Readme
General website information
General information like HTML <head> tags and page titles are set via Nuxt.js. Don't bother with routing configuration for Nuxt.js, this is solved by Nuxtdown.
File: nuxt.config.js
Documentation: Official Nuxt.js Documentation -> Configuration

Development

During development, run the client-side SPA version of your application. Use the dev or serve task, whatever fits you better. They do the same.

# serve with hot reloading at localhost:3000
$ npm run dev

Go to http://localhost:3000

Production

For production, generate the static-site.

# generate a static project
$ npm run generate

While the other commands from Nuxt.js remain in this starter kit, we clearly focus on serving static HTML files, thus the generate command is our task to create the website for production.

Contribution

If you're interested in contributing to the project, see CONTRIBUTING.md

simonhermann/nuxt-netlify-cms-starter-template