Skip to content

Commit 983db9e

Browse files
committed
docs: update docs for adding plugins
1 parent 78dcc7a commit 983db9e

File tree

1 file changed

+23
-8
lines changed

1 file changed

+23
-8
lines changed

docs/cli.md

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -128,26 +128,41 @@ vue build MyComponent.vue
128128

129129
### Installing Plugins in an Existing Project
130130

131-
Each CLI plugin ships with a generator (which creates files) and a runtime plugin (which tweaks the core webpack config and injects commands). When you use `vue create` to create a new project, some plugins will be pre-installed for you based on your feature selection. In case you want to install a plugin into an already created project, simply install it first:
131+
Each CLI plugin ships with a generator (which creates files) and a runtime plugin (which tweaks the core webpack config and injects commands). When you use `vue create` to create a new project, some plugins will be pre-installed for you based on your feature selection. In case you want to install a plugin into an already created project, you can do so with the `vue add` command:
132132

133133
``` sh
134-
npm install -D @vue/cli-plugin-eslint
134+
vue add @vue/eslint
135135
```
136136

137-
Then you can invoke the plugin's generator so it generates files into your project:
137+
> Note: it is recommended to commit your project's current state before running `vue add`, since the command will invoke the plugin's file generator and potentially make changes to your existing files.
138+
139+
The command resolves `@vue/eslint` to the full package name `@vue/cli-plugin-eslint`, installs it from npm, and invokes its generator.
140+
141+
``` sh
142+
# these are equivalent to the previous usage
143+
vue add @vue/cli-plugin-eslint
144+
```
145+
146+
Without the `@vue` prefix, the command will resolve to an unscoped package instead. For example, to install the 3rd party plugin `vue-cli-plugin-apollo`:
147+
148+
``` sh
149+
# installs and invokes vue-cli-plugin-apollo
150+
vue add apollo
151+
```
152+
153+
You can also use 3rd party plugins under a specific scope. For example, if a plugin is named `@foo/vue-cli-plugin-bar`, you can add it with:
138154

139155
``` sh
140-
# the @vue/cli-plugin- prefix can be omitted
141-
vue invoke eslint
156+
vue add @foo/bar
142157
```
143158

144-
In addition, you can pass options to the plugin:
159+
Finally, you can pass generator options to the installed plugin:
145160

146161
``` sh
147-
vue invoke eslint --config airbnb --lintOn save
162+
vue add @vue/eslint --config airbnb --lintOn save
148163
```
149164

150-
It is recommended to commit your project's current state before running `vue invoke`, so that after file generation you can review the changes and revert if needed.
165+
If a plugin is already installed, you can skip the installation and only invoke its generator with the `vue invoke` command. The command takes the same arguments as `vue add`.
151166

152167
### Inspecting the Project's Webpack Config
153168

0 commit comments

Comments
 (0)