Ntn Boilerplate

screenshot of Ntn Boilerplate
nuxt
tailwind
netlifycms

An opinionated base template for a quick start with Nuxt, Tailwind & Netlify CMS. Up on a site after only 5 minutes!

Overview

The "Nuxt, Tailwind & NetlifyCMS Boilerplate" is an opinionated starter template that allows users to quickly start a website using Nuxt.js, Tailwind CSS, and Netlify CMS. It provides batteries-included features such as SEO optimization, dark mode, PWA (Progressive Web App) capabilities, and support for markdown and code blocks. The template also includes optional extras like Git LFS (Large File Storage) and Netlify's Git LFS support.

Features

  • Nuxt.js in "universal mode" for great SEO and speed
  • Vue 2 for building interactive components
  • Vuex for state management (supported but not implemented)
  • PostCSS for CSS preprocessing (no SCSS)
  • Tailwind CSS for easy and responsive styling
  • PurgeCSS for removing unused CSS selectors
  • Dark mode with a ColorModePicker (set to "dark mode first")
  • PWA support to install the website as a standalone app
  • Netlify CMS for content management without the need for a separate server
  • Prettier for code formatting
  • Nuxt-content with extensible support for markdown and code blocks
  • Optional extra setup for Git LFS and Netlify's Git LFS support
nuxt
Nuxt

nuxt.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

netlifycms
NetlifyCMS

Netlify CMS is a powerful and flexible content management system that is designed to work seamlessly with the Netlify platform. Netlify CMS provides a user-friendly interface for managing content, including support for custom content types, localization, and asset management.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.