Vue Webpack Boilerplate

A lean webpack boilerplate for Vue including hot-reloading, linting, unit testing and end-to-end testing. By lean we mean that we still want to give you the freedom in configuring your project. Think about choices like:

• Router e.g. vue-router
• State management e.g. vuex

Table of contents

• Prerequisites
• Installation
• Testing
• Tech stack
• Features
• Contributing
• Licenses

Prerequisites

Make sure you have installed all of the following prerequisites on your development machine:

• Node.js - Download & Install Node.js
• Yarn package manager - Download & Install Yarn

Installation

Clone the repository and change the directory

$ git clone https://github.com/larsdouweschuitema/vue-webpack-boilerplate && cd vue-webpack-boilerplate

Install dependencies using npm or yarn

$ yarn install

$ npm install

Run app in development mode

$ yarn start

Create production build

$ yarn build

Testing

Unit testing using jest

$ yarn run unit

End-to-end testing using nightwatch

$ yarn run e2e

End-to-end testing with a different environment

$ yarn run e2e --env production

Run all tests

$ yarn run test

Tech stack

• Package manager yarn
• Module bundler webpack
• Client-side framework vue
• Linter eslint
• Unit testing jest
• End-to-end testing using nightwatch
• Pre-processor sass for styling components

Features

• Single file components using vue-loader
• Linting on save using eslint
• CSS extraction on production using mini-css-extract-plugin
• Hot reloading
• Source maps
• Auto generated file including root element using html-webpack-plugin and html-webpack-root-plugin
• Split development and production webpack configurations achieved through webpack-merge
• Minified JavaScript in production using uglifyjs-webpack-plugin

Contributing

To contribute to this repository see the CONTRIBUTING.md file for details

Licenses

This project is licensed under the MIT License - see the LICENSE.md file for details

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Lars Douwe Schuitema 💻

This project follows the all-contributors specification. Contributions of any kind welcome!