Skip to content

bymattlee/bymattlee-nuxt-starter

Repository files navigation

ByMattLee Nuxt Starter Screenshot

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

Twitter Follow