An Opinionated Boilerplate for Vue

• Ready-to-go libraries that are AWESOME for any app

• Beautiful folder structure and path aliases for Atomic Design

• Jest unit testing, Storybook visual testing

• ESlint and the amazing Airbnb styleguide plugin

• Many config and dotfiles are present with common options

• Bulma, Buefy, and custom style sass

---

Configured With Vue 2 and

• Components:
  • buefy, vee-validate
• ORM:
  • vuex-orm
• Router:
  • vue-router
• Store:
  • vuex
• Style:
  • sass, bulma, pug
• Testing:
  • jest, storybook, vee-validate testing , vue-test-utils

---

Getting Started

Make sure that you have the Vue CLI installed

yarn install

# Serve the app for development with HMR
yarn serve

Prettier and ESlint extensions are highly recommended for your IDE.

Testing

Developing components with hot reload is a practice of the past. Utilize on-save feedback from Jest and Storybook to drive your development.

It is recommended to use your preferred terminal to run unit tests if you have multiple monitors, and the Jest plugin for your IDE if you have a single monitor.

# Jest Unit tests
yarn test:unit optional:regex optional:--watch

# Serve Storybook on port 6006
yarn storybook

# Jest Coverage
yarn test:coverage optional:regex optional:--watch

Style

Atomic Design

Example components may be found in components, along with the folder structure for Atomic Design (a methodology for grouping components into categories)

If you would not like to use Atomic Design: Delete the atomic subfolders, and update aliases in webpack.shared

VUE SFC

• <template> Pug is a simple templating language that works great with Vue
• <script> Linted to conform to the Airbnb styleguide (and all .js)
• <style> sass and scss with variables.scss prepended

This boilerplate is linted with the airbnb styleguide core plugin for eslint

It is best to let your editor handle linting. Alternatively, you may prefer to use the CLI instead of editor extensions:

# Lint all files in the project. Recommended to stash or commit changes first
yarn lint
npx prettier --write --config-precedence prefer-file  src/.

Configuration

Notable files: vue.config.js, jest.config.js, .eslintrc, prettierrc.js, storybook/config

Entry files: main.js, jest/vueSetup.js, storybook/preview.js

The webpack configuration is used in vue.config.js, storybook/main.js and jest.config.js. Storybook uses the webpack configuration exported by vue

Fonts and images may go in src/assets. Buefy's b-icon is preconfigured with Material Design Icons

License

Costs 1 Github Star. Just kidding. :)

Distributed under the Creative Commons CC0 1.0 License, meaning you are free to use it for any purpose, commercial or non-commercial, without any attribution back to me. See LICENSE for more information.

Contribute

Pull requests are welcome

Todo:

Review babel configs

Some dependencies could be pinned

Add guidance for

• templates/pages pattern
• router

Improve demos for :

• storybook
• minimal atomic design
• vuex-orm
• vue-test-utils & jest

Contact

Repository/Issues: https://github.com/StackTrac3/vue2-buefy-jest-storybook