lucid-nuxt-2021

Prerequisites

• Node Version Manager
• .env file (cp .env.example .env)
• Optional: It's recommended to use VS Code
• If you use a GUI app for Git (Sourcetree), add a ~/.huskyrc file

First Things First

• Delete the /_nuxt-content-module-demo directory if you don't need it
• Go through nuxt.config.js
  • Remove i18n if you don't need it
• Update your package.json's name and description properties. This info will end up in manifest.json created by @nuxtjs/pwa's manifest module.
• Add your Github username to dependabot.yml

Build Setup

# use specified node version
$ nvm use

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn dev

# build for production and launch server
$ yarn build
$ yarn start

# generate static project
$ yarn generate

For detailed explanation on how things work, check out Nuxt.js docs.

Scaffolding

Scaffold components and vuex modules:

yarn scaffold

Linting tools

• ESLint
• Prettier
• StyleLint
• Lint staged files
• Commitlint with Conventional Commits (@commitlint/config-conventional)
  • Allowed types: [build, chore, ci, docs, feat, fix, perf, refactor, revert, style, test]
  • Run $ yarn commit to commit with commitizen cli using cz-conventional-changelog

Use with GUI Git Clients (i.e. Sourcetree)

In order to run husky v4+ with Sourcetree one can add a ~/.huskyrc file.

# ~/.huskyrc
# This loads nvm.sh and sets the correct PATH before running hook
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

SASS Architecture

This boilerplate is following the SASS 7-1 pattern.

The architecture consists of:

• Abstracts: Tools, helpers, functions and mixins
• Base: Base styles
• Pages: Specific styles for pages
• Vendors: External libraries

Note: Not all seven folders of the SASS 7-1 pattern have yet been setup. This is because folders such as /themes are very project specific.

Breakpoints / Media Queries

Add breakpoints to breakpoints.mjs. Breakpoints are available in SASS, Storybook and @nuxt/image.

sass-mq Mixin Usage

@include mq($from: medium) {
  .titanic {
    float: none;
  }
}

VS Code

We recommend to use VS Code. Recommended extensions can be installed (prompt by VS Code) when opening the project for the first time. Project settings ensures that linting with eslint and stylelint works correctly.

Storybook (optional)

Add with @nuxtjs/storybook. Example config in storybookConfig.js.