https://github.com/bymattlee/bymattlee-nuxt-starter
A starter boilerplate powered by Vue, Nuxt, Sanity and Tailwind CSS.
https://github.com/bymattlee/bymattlee-nuxt-starter
animations babel es6 nuxt nuxtjs sanity starter-template static-site-generator tailwind-css utility-classes vue vuejs
Last synced: about 2 months ago
JSON representation
A starter boilerplate powered by Vue, Nuxt, Sanity and Tailwind CSS.
- Host: GitHub
- URL: https://github.com/bymattlee/bymattlee-nuxt-starter
- Owner: bymattlee
- Created: 2021-01-23T05:57:43.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T23:49:31.000Z (over 2 years ago)
- Last Synced: 2025-04-15T02:40:55.539Z (6 months ago)
- Topics: animations, babel, es6, nuxt, nuxtjs, sanity, starter-template, static-site-generator, tailwind-css, utility-classes, vue, vuejs
- Language: Vue
- Homepage: https://bymattlee-nuxt-starter.netlify.app/
- Size: 2.89 MB
- Stars: 15
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ByMattLee Nuxt Starter
A starter boilerplate powered by [Vue](https://vuejs.org/), [Nuxt](https://nuxtjs.org/), [Sanity](https://www.sanity.io/) and [Tailwind CSS](https://tailwindcss.com/).
[VIEW DEMO](https://bymattlee-nuxt-starter.netlify.app/)
---
## Installation
##### 1. Install Node 16.17.1 LTS:
##### 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](https://github.com/bymattlee/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`](https://tailwindcss.com/docs/functions-and-directives#apply) directive when writing custom SCSS for efficiency:
```scss
svg {
@apply inline-block fill-current;
}
```
- Tailwind settings can be accessed with the [`theme()`](https://tailwindcss.com/docs/functions-and-directives#theme) function:
```scss
.button {
animation-duration: theme('transitionDuration.normal');
}
```
- Media queries can be used with the shorthand `screen()` function:
```scss
.button {
margin-right: 2.8rem;
@screen sm {
margin-right: 4.2rem;
}
}
```
---
## Contact
- Matt Lee - `@bymattlee` on most platforms
- Visit my website at [bymattlee.com](https://bymattlee.com)
[](https://twitter.com/bymattlee)