Skip to content
An ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI 3.
JavaScript Vue CSS Perl 6 HTML Dockerfile Perl
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci better organize linting and test scripts Nov 7, 2018
.vscode update vetur setting to disable built-in snippets Oct 2, 2019
.vuepress integrate vuepress for local docs May 16, 2018
docs add docs for nested vuex modules Oct 3, 2019
generators/new force .vue extensions for better vetur autocompletion Oct 2, 2019
public use prettier to format html Dec 6, 2018
src make vuex module registration work for default exports Oct 10, 2019
tests add instructions for whitelisting console.error/warn messages in jest Oct 3, 2019
.babelrc.js upgrade to use modern mode Jun 14, 2018
.browserslistrc dependency and upstream @vue/cli updates Apr 30, 2019
.dockerignore add docker development configuration and docs Oct 2, 2019
.eslintignore initial commit built on vue-cli 3 Feb 17, 2018
.eslintrc.js migrate app.config.js to JSON, fixes #129 May 2, 2019
.gitattributes list binary files in .gitattributes Mar 18, 2019
.gitignore enable css compilation for unit tests Nov 5, 2018
.markdownlint.yml update markdownlint config to yaml, fixes #151 Jun 5, 2019
.postcssrc.js initial commit built on vue-cli 3 Feb 17, 2018
.prettierignore remove package.json from .prettierignore Feb 18, 2018
.prettierrc.js use prettier to format html Dec 6, 2018
LICENSE add license Feb 1, 2019
README.md link to other boilerplate projects in readme Oct 2, 2019
_start.js generate jsconfig.json in start script Sep 7, 2018
aliases.config.js use prettier to format html Dec 6, 2018
cypress.json initial commit built on vue-cli 3 Feb 17, 2018
docker-compose.yml add docker development configuration and docs Oct 2, 2019
docker-dev.dockerfile add docker development configuration and docs Oct 2, 2019
jest.config.js upgrade jest and force console.error/warn to fail tests Oct 3, 2019
jsconfig.template.js update target and module in jsconfig.template.js Dec 6, 2018
lint-staged.config.js dependency and upstream @vue/cli updates Apr 30, 2019
package.json upgrade jest and force console.error/warn to fail tests Oct 3, 2019
package.json.md dependency and upstream @vue/cli updates Apr 30, 2019
stylelint.config.js update selector-class-pattern to allow transition classes May 17, 2018
vue.config.js force .vue extensions for better vetur autocompletion Oct 2, 2019
yarn.lock upgrade jest and force console.error/warn to fail tests Oct 3, 2019

README.md

Vue Enterprise Boilerplate

CircleCI

This is an ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI 3. Questions, feedback, and for now, even bikeshedding are welcome. 😄 If you'd like to increase the time I can spend on this project, as well as other Vue resources, please consider becoming a sponsor on Patreon. 🙏

Features

  • Thorough documentation: Written with the same care as Vue's core docs to quickly train new team members and consolidate knowledge.
  • Guaranteed consistency: Opinionated linting for Vue, JavaScript/JSON, SCSS, and Markdown, integrated into Visual Studio Code and run against staged files on pre-commit.
  • First-class tests: Practice test-driven development with both unit and end-to-end tests. Unit tests with Jest live as first-class citizens alongside your source files, while Cypress provides reliable end-to-end tests in an intuitive GUI for development.
  • Speedy development: Between configurable generators, handy aliases, and global base components, your productivity will skyrocket.

Getting started

# 1. Clone the repository.
git clone https://github.com/chrisvfritz/vue-enterprise-boilerplate.git my-new-project

# 2. Enter your newly-cloned folder.
cd my-new-project

# 3. Install dependencies. Make sure yarn is installed: https://yarnpkg.com/lang/en/docs/install
yarn

# 4. Replace this README's CI badge with a note about when you started
# and a link to a compare URL, so that you can always get an overview
# of new features added to the boilerplate since you cloned.
node _start.js

# 5. Delete the start script, as there can be only one beginning.
rm _start.js

# 6. Read the documentation linked below for "Setup and development".

Documentation

This project includes a docs folder with more details on:

  1. Setup and development
  2. Architecture
  3. Languages and technologies
  4. Routing, layouts, and views
  5. State management
  6. Tests and mocking the API
  7. Linting and formatting
  8. Editor integration
  9. Building and deploying to production
  10. Troubleshooting

FAQ

Why would I use this boilerplate instead of generating a new project with Vue CLI directly?

Vue CLI aims for flexibility, making it as simple as possible for any team to set up a new project, no matter how big or small, whether it's an app or a library, or what languages and technologies are being used.

This boilerplate makes more assumptions. It assumes you're building a large app, possibly developed by a large team. It also makes a lot of default choices for you, based on what tends to work well for large, enterprise projects. At the same time, it aims to educate and empower users to configure these defaults to ideally suit their specific app and team.

Why would I use this boilerplate instead of Nuxt?

Nuxt is like a really smart personal assistant, immediately making you more productive by taking care of many concerns for you. This boilerplate is more of a personal coach, aiming to educate and empower users to essentially configure their own framework, ideally suited to their app and team.

If what you're building is very well-defined, with requirements and technical challenges that won't drastically change over time, I'd probably recommend Nuxt instead. For the needs of common applications, it's more than up to the task. If you're a startup trying to prove product-market fit and your primary goal is initial development speed, that's also a point in Nuxt's favor.

Here's when you might prefer building a project off the boilerplate instead:

  • The requirements for the product are very likely to change over time and you want to maintain maximum flexibility and control.
  • You'd like to focus on developing skills that will transfer across any Vue project.
  • You're working in a large team, so need tooling to help everyone avoid common mistakes, write in a consistent style, and avoid bikeshedding in PRs.

Finally, it's not an either-or situation. This boilerplate demonstrates many useful patterns for building robust applications that can also be applied to Nuxt apps. That means you could build a project with Nuxt, while still using this boilerplate as a study guide.

Can you build a Nuxt version of this boilerplate?

I have no plans to personally, but you can find Nuxt forks at debs-obrien/nuxt-boilerplate-project and wemake-services/wemake-vue-template.

This isn't exactly what I'm looking for. Where can I find other boilerplates and similar projects?

See the awesome-vue repo for other great projects in the Vue ecosystem.

You can’t perform that action at this time.