Introduction

My boilerplate for a Nuxt.js project.

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

Setup

# install dependencies
$ yarn

Development Setup

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

Production Setup

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

# or

# generate static project
$ yarn generate

Deploy in GitHub

# generate static project for gh-pages
$ yarn generate:gh-pages

# push the dist repository
$ git add dist -f
$ git commit -n -m "Deploying to gh-pages"
$ git push origin master

# deploy to gh-pages
$ yarn deploy:gh-pages

Useful scripts

# run tests
$ yarn test

# run eslint
$ yarn lint

# run docs
$ yarn styleguide
# build docs
$ yarn styleguide:build

Theme

There are currently two themes for the application, where components inherit their colors based on each.

Dark Theme

$dark-theme: (
  primary: #bb86fc,
  secondary: #03dac6,
  background: #121212,
  text: #777777,
  error: #cf6679,
  on-primary: #000000,
  on-secondary: #000000,
  on-background: #ffffff,
  on-text: #d3d3d3,
  on-error: #000000
);

Light Theme

$light-theme: (
  primary: #6200ee,
  secondary: #03dac6,
  background: #ffffff,
  text: #777777,
  error: #b00020,
  on-primary: #ffffff,
  on-secondary: #ffffff,
  on-background: #526488,
  on-text: #d3d3d3,
  on-error: #ffffff
);

Theming

The theme must be configured in the following file.

To add a new theme, you must add the theme name to the following array:

$component-themes: ('light', 'dark');

And add all the properties:

• primary: main color for the application.
• secondary: secondary color for the application.
• background: background color for the application.
• text: text color for components.
• error: error color for the application.
• on-primary: main reverse color for the application.
• on-secondary: secondary reverse color for the application.
• on-background: background reverse color for the application.
• on-text: text reverse color for components.
• on-error: error reverse color for the application.

In the array:

$theme-list: (dark: $dark-theme, light: $light-theme);

Changing Theme

The current theme control is based on a top <div> that is controlled by the theme class.

This control is currently located in the file: layouts/default.vue

Components

UI

• Autocomplete
• Box
• Button
• Checkbox
• Input
• Label
• Radio
• Select
• Toggler

How to create a component?

# enter the components directory
$ cd components/

# create a new directory for the component
$ mkdir {ComponentName}
$ cd {ComponentName}/

# create component file
$ touch index.vue
# create component documentation file
$ touch Readme.md
# create component test file
$ touch {ComponentName}.spec.js

Important!

1. Create a single file component.
2. Use Vue Styleguidist to generate documentation.
3. Create tests for component Vue Test Utils.

Example

<!-- index.vue -->

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  /**
   * {ComponentName} component.
   * @displayName {ComponentName}
   */
  name: '{ComponentName}'
}
</script>

<style lang="scss" scoped>
@each $theme in $component-themes {
  .theme--#{$theme} {
    div {
      font-size: 16px;
    }
  }
}
</style>

<!-- Readme.md -->

This {ComponentName} is amazing, use it responsibly.

...

/** {ComponentName}.spec.js */

import { mount } from '@vue/test-utils'
import `{ComponentName}` from './index.vue'

describe('`{ComponentName}`', () => {
  /** Mount */
  describe('Mount', () => {
    test('is a Vue instance', () => {
      const wrapper = mount(`{ComponentName}`)
      expect(wrapper.isVueInstance()).toBeTruthy()
    })
  })
})

License

MIT

Copyright (c) 2019-present, Alan Timossi Farias de Oliveira