Boilerplate for Nuxt, Tailwind & NetlifyCMS

Boilerplate for Nuxt, Tailwind & NetlifyCMS

Boilerplate for Nuxt, Tailwind & NetlifyCMS An opinionated starter template for a quick start with the following technologies up on a site after only 5 minutes!

πŸ—οΈ Boilerplate for Nuxt, Tailwind & NetlifyCMS

An opinionated starter template for a quick start with the following technologies up on a site after only 5 minutes!

NTN Boilerplate Screenshot

πŸ”‹ Batteries included

  • Vue 2
  • Vuex
  • Nuxt.js (in "universal mode", where both SEO and speed is great)
  • PostCSS (no SCSS)
  • Tailwind
  • PurgeCSS (removes unused CSS-selectors)
  • Dark mode & custom ColorModePicker (Set to "dark mode first")
  • PWA (install website as standalone app)
  • Netlify CMS (no need for a separate server)
  • Prettier
  • Subfont
Optional extra setup
  • Git LFS (store uploaded images outside the main repo)
  • Netlify LM (Netlify’s Git LFS support)

πŸŽ‰ Getting Started

Use the deploy button to get your own copy of the repository.

Deploy to Netlify

This will setup everything needed for running the CMS:

  • A new repository in your GitHub account with the code
  • Full Continuous Deployment to Netlify's global CDN network
  • Control users and access with Netlify Identity
  • Manage content with Netlify CMS

Once the initial build finishes, you can invite yourself as a user. Go to the Identity tab in your new site, click "Invite" and send yourself an invite. Start with by registering a regular email-account (not OAuth yet!) with a generated password.

You should be up and running, ready for personalization!

These extra steps are only necessary if you want to upload large media in Netlify CMS:

This way it doesn't clutter up your repo with large unmanageable files. But do know that it is easier to add later than undoing it later.

  1. Install git-lfs on your computer and remove the # in the project's .gitattributes

  2. Setup Netlify LM by following these steps. (In short: netlify plugins:install netlify-lm-plugin β†’ netlify lm:install β†’ netlify login β†’ netlify link β†’ netlify lm:setup β†’ commit the .lfsconfig file.)


Project commands

  1. πŸ“¦ Install dependencies.
npm install
  1. πŸ— Run the project for local dev. This will start a hot-reloading server at localhost:3000.
npm run dev
  1. 🌌 Build the app for server-side rendered deployment. See more about Universal SSR in the Nuxt.js docs.
npm run build

# And to serve that deployment...
npm run start
  1. ⚑️ Generate a fully pre-rendered static site. See more in the docs.
npm run generate

Personalize setup

  1. Copy and change the .env-file

    • cp .env-example .env
    • Then change the values
  2. Change the value on these lines

    • static/admin/config.yml:1 β€” site_url
    • static/admin/config.yml:2 β€” logo_url
    • assets/content/site/info.json β€” sitename, sitedescription & sitelang
    • package.json:1 β€” name, description, author & repository.url
    • pages/index.vue β€” The start page of your new website!
  3. Change colors, favicon, content & content collections

    • Colors are managed in assets/scss/_vars.scss & tailwind.config.js
    • Favicon is generated by @nuxt/pwa. You should change the static/icon.png to something new, and then match the new filename and source in nuxt.config.js under pwa.icon
    • Content is managed mainly in local Netlify CMS by going to your /admin or by hand in assets/content
    • Content collections are managed in static/admin/config.yml, then added to vuex store in store/index.js
  4. Change font

    1. Add/change your font link in nuxt.config.js under head.link. You can add a <link rel="stylesheet" href="font.css"> as link: [{ rel: 'stylesheet', href: 'font.css' }], like this
    2. Then append your font name in tailwind.config.js under theme.extend.fontFamily.sans (or other). Like sans: ['Europa', ...defaultTheme.fontFamily.sans]
    3. Then if you've installed the included netlify plugin "Subfont", it will automatically post-processes your web page to use an optimal font loading strategy.

More info

This project was bootstrapped with create-nuxt-app. There are more detailed explanations of how everything works in the Nuxt.js docs.

Netlify Identity

Make sure to set to "registration invite only" here if you don't want spam.

When you create your first account, don’t sign up using OAuth, generate a new password and sign in that way locally, otherwise a successful login will send you to the URL you typed in instead of keeping you on localhost.

Originally based on Henry Desroches' nuxt-netlify-cms-starter.

Deployed easily with their boilerplate via: Deploy to Netlify

Troubleshooting

  • I added a CSS class, but it doesn't show

    • It is most likely purged by PurgeCSS, make sure it is whitelisted in purgeCSS in nuxt.config.js
  • I tried logging into/saving in Netlify CMS, but I can't

  • This repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting .git/hooks/pre-push.

    • Install git-lfs then run git lfs install in project root
  • I can’t get Git LFS to run correctly on Netlify

    • Make sure that you have in your Netlify build settings, set the environment variable GIT_LFS_ENABLED : true. Then also make sure that Netlify LM is setup as their docs specify.

Download Details:

Author: PH4NTOMiki

Demo: https://ntn-boilerplate.netlify.app/

Source Code: https://github.com/PH4NTOMiki/nuxtjs-cms-starter

nuxt vue vuejs nuxtjs

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

How to add Authentication to Nuxt.JS and Vue.JS

This Vue.JS Tutorial shows how to add Authentication and Authorization to your NuxtJS App and make it work with SSR

Snippets And Boiler Plates Built With Nuxtjs And Nuxt/content

Documentation with snippets and boiler plates, built with NuxtJS and nuxt/content. Markdown ❀️ for ever.

How to build enterprise Vue.js applications with Nuxt?

Learn How to build enterprise Vue.js applications with Nuxt: Nuxt is a progressive framework based on Vue.js to create modern web applications. It is based on Vue.js official libraries (vue, vue-router and vuex) and powerful development tools (webpack, Babel and PostCSS). Nuxt goal is to make web development powerful and performant with a great developer experience in mind.

A Simple Nuxt Module to Manage Multiple Subdomains with Just a Single Nuxtjs Project

A simple module to manage multiple subdomains with just one project . A simple nuxt module to manage multiple subdomains with just a single nuxtJS project