Vue Templates Logo Vue Templates
Nuxt Netlify Cms Starter Kit screenshot

Nuxt Netlify Cms Starter Kit

Author Avatar Theme by Jbratcher
Updated: 23 Sep 2020
9 Stars

An opinionated starter project for Nuxt, Vuetify, and Netlify CMS.

Github Live Preview

Categories

Nuxt Scss Netlifycms Vuetify Blog

Overview

This product is a starter project designed to bootstrap the development of a modern, headless CMS blog or static website. It uses Nuxt as the framework and Netlify CMS as the headless CMS. The project is optimized for performance and SEO out of the box and includes features such as responsive fonts, theme caching, and a global breakpoint fix. It also integrates with Netlify for easy deployment.

Features

  • Bootstrap a blog, CMS, or static site quickly
  • Uses Nuxt and Netlify CMS
  • Development amplified using the Vuetify UI library
  • One-click Netlify deployment
  • Optimized for performance
  • Includes Vuex store and modules
  • Docker support
  • Vuetify breakpoint fix
  • Vuetify theme caching for performance
  • Custom scroll directive for main nav

Installation

To get started with this starter project, follow these steps:

  1. Make sure you have Node and npm installed on your machine.
  2. Clone the repository locally and navigate into the directory.
  3. Install the project dependencies by running npm install.
  4. For local development, run npm run dev to start a hot-reloading server at localhost:3000.
  5. To build the app for server-side rendered deployment, use npm run build. More information about Universal SSR can be found in the Nuxt.js docs.
  6. To generate a fully pre-rendered static site, use npm run generate. More information can be found in the docs.
  7. If you prefer to develop using Docker, basic Docker support is available. Refer to the Dockerfile for full usage documentation.
  8. To use Netlify CMS, first deploy the project to Netlify at least once. Then, in Netlify’s settings, enable the Identity service and configure the registration preferences. If desired, you can also enable external providers such as GitHub or Google for authentication.

Summary

This starter project allows for the quick and easy development of a modern, headless CMS blog or static website. With features like Nuxt, Netlify CMS, and Vuetify, along with easy deployment through Netlify, it provides a comprehensive solution for building performant and SEO-friendly sites. It also offers additional features like Vuex, Docker support, and custom styling options for a tailored development experience.