bymattlee/bymattlee-nuxt-starter

A starter boilerplate powered by Vue, Nuxt, Sanity and Tailwind CSS.

ByMattLee Nuxt Starter

A starter boilerplate powered by Vue, Nuxt, Sanity and Tailwind CSS.

VIEW DEMO

---

Installation

1. Install Node 16.17.1 LTS: https://nodejs.org/

2. Install Yarn

$ npm i -g yarn

3. Install all dependencies

$ yarn

---

Configuration

In nuxt.config.js, update Sanity options and environment URLs for project compilation.

---

Use

Serve With Hot Reload

$ yarn dev

Build For Production

$ yarn build

Build Static Files

$ yarn generate

Launch Server

$ yarn start

---

General Features

• Utilizes Nuxt's 'static' mode to generate HTML files for every page
• Data is coming from the Sanity Cloud API. This pairs perfectly with the ByMattLee Sanity Studio Starter
• Features Tailwind CSS with PurgeCSS for production builds
• Includes RSS feed, robots.txt, sitemap.xml generation

---

Tailwind CSS Notes

• All Tailwind settings can be found in ./tailwind.config.js
• Most styles should be written as utility classes in the template markup but custom SCSS can be used for unique properties and/or magic numbers
• Utilize the @apply directive when writing custom SCSS for efficiency:

svg {
  @apply inline-block fill-current;
}

• Tailwind settings can be accessed with the theme() function:

.button {
  animation-duration: theme('transitionDuration.normal');
}

• Media queries can be used with the shorthand screen() function:

.button {
  margin-right: 2.8rem;
  @screen sm {
    margin-right: 4.2rem;
  }
}

---

Contact

• Matt Lee - @bymattlee on most platforms
• Visit my website at bymattlee.com