Announcing vue-cli

Dec 28, 2015

Recently there has been a lot of discussion around the tooling hurdle when you start a React project. Luckily for Vue.js, all you need to do to start with a quick prototype is including it from a CDN via a <script> tag, so we’ve got that part covered. However, that’s not how you’d build a real world application. In real world applications we inevitably need a certain amount of tooling to give us modularization, transpilers, pre-processors, hot-reload, linting and testing. These tools are necessary for the long-term maintainability and productivity of large projects, but the initial setup can be a big pain. This is why we are announcing vue-cli, a simple CLI tool to help you quickly scaffold Vue.js projects with opinionated, battery-included build setups.

Just The Scaffolding

The usage looks like this:

npm install -g vue-cli vue init webpack my-project cd my-project npm install npm run dev

All the CLI does is pulling down templates from the vuejs-templates organization on GitHub. Dependencies are handled via NPM, and build tasks are simply NPM scripts.

Official Templates

The purpose of official Vue project templates is providing opinionated, battery-included development tooling setups so that users can get started with actual app code as fast as possible. However, these templates are un-opinionated in terms of how you structure your app code and what libraries you use in addition to Vue.js.

All official project templates are repos in the vuejs-templates organization. When a new template is added to the organization, you will be able to run vue init <template-name> <project-name> to use that template. You can also run vue list to see all available official templates.

Current available templates include:

browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.

browserify-simple - A simple Browserify + vueify setup for quick prototyping.

webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.

webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

Bring Your Own Setup

If you are not happy with the official templates, you can fork these templates, modify them to fit your specific needs (or even create your own from scratch), and use them via vue-cli too, because vue-cli can work directly on GitHub repos:

vue init username/repo my-project

Vue Components Everywhere