/cobertos-nuxt-template

Nuxt nux nut nuxnutnuxnu tunnxun utun xnun tun nxun tnunuu nuxnnurnununuinnununoafoij

Primary LanguageVue

build status

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 and desktop mixins) with help of nuxt-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 variable FONTAWESOME_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

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

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 the publicRuntimeConfig 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
  • 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?)