Skip to content

wearelucid/lucid-nuxt-2021

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

lucid-nuxt-2021

Prerequisites

First Things First

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

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.