cobertos-nuxt-template
A Nuxt template with my best practices, ready to be cloned and deployed to Vercel.
Takes inspiration from npx create-nuxt-app tmp-app
, prefering ESLint, AVA, and others.
Usage
Clone this repo and begin working! Updates to this repo can be merged in if you're rebased to this repo.
See the Features for all the things you can use
Features
- Bulma as main SCSS framework, able to be configured modularly in
global.scss
and overrides in_vars.scss
- Mobile-first single breakpoint workflow (
mobile
anddesktop
mixins) with help ofnuxt-mq
for javascript breakpoint testing - Font Awesome as
<fa />
- Tree-shaking fix for bundle sizes
- Optional pro repository support with
~.npmrc
, just remove the~
after cloning and add your Font Awesome registry auth token to the environment variableFONTAWESOME_NPM_AUTH_TOKEN
- Nuxt Sitemap for
sitemap.xml
by default - AVA tests
Usage with non-Vercel Deployment
If you're not using Vercel, which this repo is by default setup for, you'll need to:
- Adjust
nuxt.config.js
router.trailingSlash
property with however your provider behaves- For example, AWS S3 requires a value of
true
, as by default, it adds trailing slashes
- For example, AWS S3 requires a value of
If you're deploying to your own static webserver, make sure that
- Create a default redirect for every non-found path to
200.html
(for dynamic routes) - Create a 308 redirect for all trailing slash routes (matches Vercel's behavior)
- Setup
Cache-Control
headers for the site such that- All HTML files use
no-store, max-age=0, must-revalidate
- All non-HTML files use
public, max-age=31536000, immutable
- All HTML files use
Nuxt best practices
Consider the following features from Nuxt when doing weird stuff:
inject()
for integrating something across the entire app; in Vue and Vuex!publicRuntimeConfig
to change credentials (like API keys) across multiple deployment environments w/ different environment variables or build pipelines. If you want to switch these values at runtime (after a static build), you have to store all your configurations in thepublicRuntimeConfig
and then select them on the front and backend (so dev/SSR works) using a custom plugin + something both can read like cookies.serverMiddleware
to deploy an Express app or some other server along with Nuxt. Useful for testing APIs during development (if targetting static deployment).
Contributing
Updating
If you're going to update, you should consider running npx create-nuxt-app tmp-app
and look at the latest Nuxt template deployment files for inspiration!
TODO
- Update from Vue 2 to Vue 3
- Requires Nuxt to update nuxt/nuxt#5708
- Add a .sublime-project ignoring the .nuxt and other build directories from searching
- Responsive image stuff/svg loading stuff
- Setup a default error handler + best practices for integrating with Nuxt.js's
fetch()
and the other function - Add warnings for when specific things have not been changed (like title, ~.npmrc not being removed, etc)
- Robots.txt, favicon if possible,
- head() and meta tags like canonical built in
- Add a test to crawl the website a look for 308's (trailing slash incorrect links) and other broken links
- Modal exists in
feat/modal
, would be nice to conditionally include it (via-tree shaking or something?)