# vue-cli > A simple CLI for scaffolding Vue.js projects. Latest version **2.9.6** (published 2018-06-05) · MIT license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install vue-cli pnpm add vue-cli yarn add vue-cli bun add vue-cli ``` Provides the commands `vue`, `vue-init`, `vue-list`. ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 2.9.6 | | Published | 2018-06-05 | | First published | 2015-12-26 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Node | >=6.0.0 | | Dependencies | 20 | | Unpacked size | 55 KB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 29535 | | Author | Evan You | | Maintainers | rem, yyx990803, zigomir | | Keywords | vue, cli, spa | ## Links - npm: https://www.npmjs.com/package/vue-cli - Repository: https://github.com/vuejs/vue-cli - Homepage: https://github.com/vuejs/vue-cli#readme - Issues: https://github.com/vuejs/vue-cli/issues - npm.io page: https://npm.io/package/vue-cli ## Dependencies (20) - [ora](https://npm.io/package/ora.md) ^1.3.0 - [uid](https://npm.io/package/uid.md) 0.0.2 - [async](https://npm.io/package/async.md) ^2.4.0 - [chalk](https://npm.io/package/chalk.md) ^2.1.0 - [rimraf](https://npm.io/package/rimraf.md) ^2.5.0 - [semver](https://npm.io/package/semver.md) ^5.1.0 - [request](https://npm.io/package/request.md) ^2.67.0 - [tildify](https://npm.io/package/tildify.md) ^1.2.0 - [inquirer](https://npm.io/package/inquirer.md) ^6.0.0 - [commander](https://npm.io/package/commander.md) ^2.9.0 - [minimatch](https://npm.io/package/minimatch.md) ^3.0.0 - [user-home](https://npm.io/package/user-home.md) ^2.0.0 - [handlebars](https://npm.io/package/handlebars.md) ^4.0.5 - [metalsmith](https://npm.io/package/metalsmith.md) ^2.1.0 - [multimatch](https://npm.io/package/multimatch.md) ^2.1.0 - [consolidate](https://npm.io/package/consolidate.md) ^0.14.0 - [coffee-script](https://npm.io/package/coffee-script.md) 1.12.7 - [read-metadata](https://npm.io/package/read-metadata.md) ^1.0.0 - [download-git-repo](https://npm.io/package/download-git-repo.md) ^1.0.1 - [validate-npm-package-name](https://npm.io/package/validate-npm-package-name.md) ^3.0.0 ## Alternatives - [@salesforce/cli](https://npm.io/package/@salesforce/cli.md) — 389.7K weekly downloads - [@mintlify/cli](https://npm.io/package/@mintlify/cli.md) — 208.9K weekly downloads - [@grafana/e2e-selectors](https://npm.io/package/@grafana/e2e-selectors.md) — 128.7K weekly downloads - [mintlify](https://npm.io/package/mintlify.md) — 112.0K weekly downloads - [@intlayer/cli](https://npm.io/package/@intlayer/cli.md) — 22.8K weekly downloads ## Recent versions - 2.9.6 (latest) — 2018-06-05 - 2.9.5 — 2018-05-31 - 2.9.4 — 2018-05-30 - 2.9.3 — 2018-02-05 - 2.9.2 — 2017-11-30 - 2.9.1 — 2017-10-02 - 2.9.0 — 2017-10-02 - 2.8.2 — 2017-05-16 - 2.8.1 — 2017-01-30 - 2.8.0 — 2017-01-18 - 2.7.0 — 2017-01-02 - 2.6.0 — 2016-12-20 - 2.5.1 — 2016-11-16 - 2.5.0 — 2016-11-05 - 2.4.0 — 2016-09-28 - … 20 more at https://npm.io/package/vue-cli/versions ## README # vue-cli [![Build Status](https://img.shields.io/circleci/project/vuejs/vue-cli/master.svg)](https://circleci.com/gh/vuejs/vue-cli) [![npm package](https://img.shields.io/npm/v/vue-cli.svg)](https://www.npmjs.com/package/vue-cli) A simple CLI for scaffolding Vue.js projects. ### Installation Prerequisites: [Node.js](https://nodejs.org/en/) (>=6.x, 8.x preferred), npm version 3+ and [Git](https://git-scm.com/). ``` bash $ npm install -g vue-cli ``` ### Usage ``` bash $ vue init ``` Example: ``` bash $ vue init webpack my-project ``` The above command pulls the template from [vuejs-templates/webpack](https://github.com/vuejs-templates/webpack), prompts for some information, and generates the project at `./my-project/`. ### vue build Use vue-cli as a zero-configuration development tool for your Vue apps and component, check out the [docs](/docs/build.md). ### Official Templates The purpose of official Vue project templates are to provide 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](https://github.com/vuejs-templates). When a new template is added to the organization, you will be able to run `vue init ` to use that template. You can also run `vue list` to see all available official templates. Current available templates include: - [webpack](https://github.com/vuejs-templates/webpack) - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction. - [webpack-simple](https://github.com/vuejs-templates/webpack-simple) - A simple Webpack + vue-loader setup for quick prototyping. - [browserify](https://github.com/vuejs-templates/browserify) - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing. - [browserify-simple](https://github.com/vuejs-templates/browserify-simple) - A simple Browserify + vueify setup for quick prototyping. - [pwa](https://github.com/vuejs-templates/pwa) - PWA template for vue-cli based on the webpack template - [simple](https://github.com/vuejs-templates/simple) - The simplest possible Vue setup in a single HTML file ### Custom Templates It's unlikely to make everyone happy with the official templates. You can simply fork an official template and then use it via `vue-cli` with: ``` bash vue init username/repo my-project ``` Where `username/repo` is the GitHub repo shorthand for your fork. The shorthand repo notation is passed to [download-git-repo](https://github.com/flipxfx/download-git-repo) so you can also use things like `bitbucket:username/repo` for a Bitbucket repo and `username/repo#branch` for tags or branches. If you would like to download from a private repository use the `--clone` flag and the cli will use `git clone` so your SSH keys are used. ### Local Templates Instead of a GitHub repo, you can also use a template on your local file system: ``` bash vue init ~/fs/path/to-custom-template my-project ``` ### Writing Custom Templates from Scratch - A template repo **must** have a `template` directory that holds the template files. - A template repo **may** have a metadata file for the template which can be either a `meta.js` or `meta.json` file. It can contain the following fields: - `prompts`: used to collect user options data; - `filters`: used to conditional filter files to render. - `metalsmith`: used to add custom metalsmith plugins in the chain. - `completeMessage`: the message to be displayed to the user when the template has been generated. You can include custom instruction here. - `complete`: Instead of using `completeMessage`, you can use a function to run stuffs when the template has been generated. #### prompts The `prompts` field in the metadata file should be an object hash containing prompts for the user. For each entry, the key is the variable name and the value is an [Inquirer.js question object](https://github.com/SBoudrias/Inquirer.js/#question). Example: ``` json { "prompts": { "name": { "type": "string", "required": true, "message": "Project name" } } } ``` After all prompts are finished, all files inside `template` will be rendered using [Handlebars](http://handlebarsjs.com/), with the prompt results as the data. ##### Conditional Prompts A prompt can be made conditional by adding a `when` field, which should be a JavaScript expression evaluated with data collected from previous prompts. For example: ``` json { "prompts": { "lint": { "type": "confirm", "message": "Use a linter?" }, "lintConfig": { "when": "lint", "type": "list", "message": "Pick a lint config", "choices": [ "standard", "airbnb", "none" ] } } } ``` The prompt for `lintConfig` will only be triggered when the user answered yes to the `lint` prompt. ##### Pre-registered Handlebars Helpers Two commonly used Handlebars helpers, `if_eq` and `unless_eq` are pre-registered: ``` handlebars {{#if_eq lintConfig "airbnb"}};{{/if_eq}} ``` ##### Custom Handlebars Helpers You may want to register additional Handlebars helpers using the `helpers` property in the metadata file. The object key is the helper name: ``` js module.exports = { helpers: { lowercase: str => str.toLowerCase() } } ``` Upon registration, they can be used as follows: ``` handlebars {{ lowercase name }} ``` #### File filters The `filters` field in the metadata file should be an object hash containing file filtering rules. For each entry, the key is a [minimatch glob pattern](https://github.com/isaacs/minimatch) and the value is a JavaScript expression evaluated in the context of prompt answers data. Example: ``` json { "filters": { "test/**/*": "needTests" } } ``` Files under `test` will only be generated if the user answered yes to the prompt for `needTests`. Note that the `dot` option for minimatch is set to `true` so glob patterns would also match dotfiles by default. #### Skip rendering The `skipInterpolation` field in the metadata file should be a [minimatch glob pattern](https://github.com/isaacs/minimatch). The files matched should skip rendering. Example: ``` json { "skipInterpolation": "src/**/*.vue" } ``` #### Metalsmith `vue-cli` uses [metalsmith](https://github.com/segmentio/metalsmith) to generate the project. You may customize the metalsmith builder created by vue-cli to register custom plugins. ```js { "metalsmith": function (metalsmith, opts, helpers) { function customMetalsmithPlugin (files, metalsmith, done) { // Implement something really custom here. done(null, files) } metalsmith.use(customMetalsmithPlugin) } } ``` If you need to hook metalsmith before questions are asked, you may use an object with `before` key. ```js { "metalsmith": { before: function (metalsmith, opts, helpers) {}, after: function (metalsmith, opts, helpers) {} } } ``` #### Additional data available in meta.{js,json} - `destDirName` - destination directory name ```json { "completeMessage": "To get started:\n\n cd {{destDirName}}\n npm install\n npm run dev" } ``` - `inPlace` - generating template into current directory ```json { "completeMessage": "{{#inPlace}}To get started:\n\n npm install\n npm run dev.{{else}}To get started:\n\n cd {{destDirName}}\n npm install\n npm run dev.{{/inPlace}}" } ``` ### `complete` function Arguments: - `data`: the same data you can access in `completeMessage`: ```js { complete (data) { if (!data.inPlace) { console.log(`cd ${data.destDirName}`) } } } ``` - `helpers`: some helpers you can use to log results. - `chalk`: the `chalk` module - `logger`: [the built-in vue-cli logger](/lib/logger.js) - `files`: An array of generated files ```js { complete (data, {logger, chalk}) { if (!data.inPlace) { logger.log(`cd ${chalk.yellow(data.destDirName)}`) } } } ``` ### Installing a specific template version `vue-cli` uses the tool [`download-git-repo`](https://github.com/flipxfx/download-git-repo) to download the official templates used. The `download-git-repo` tool allows you to indicate a specific branch for a given repository by providing the desired branch name after a pound sign (`#`). The format needed for a specific official template is: ``` vue init '#' ``` Example: Installing the [`1.0` branch](https://github.com/vuejs-templates/webpack-simple/tree/1.0) of the webpack-simple vue template: ``` vue init 'webpack-simple#1.0' mynewproject ``` _Note_: The surrounding quotes are necessary on zsh shells because of the special meaning of the `#` character. ### License [MIT](http://opensource.org/licenses/MIT) --- _Source: https://npm.io/package/vue-cli · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._