Create
a Vue CLI
plugin
@Akryum
Vue CLI 3.0
yarn global add @vue/cli
yarn global remove vue-cli
Install it now!
Getting Started
vue create my-app
cd ./my-app
yarn serve
yarn build
Built-in features
Webpack 4
Babel 7
Typescript
PWA
Linting
Sass
Less
Stylus
Modern mode
Multi-page
Web components
Jest
Mocha
Cypress
Nightwatch
Template
PLUGINS
Add new ones after project creation
Upgrade the features by upgrading the plugins
Pick the features you want
380+ plugins already available
Create your own!
Our first plugin
@vue/cli
(Global CLI)
Creating new projects
Adding plugins
@vue/cli-service
(In your project)
Webpack config
Commands
Vue CLI components
that will load our plugin
Naming!
@vue/cli-plugin-xxx
vue-cli-plugin-xxx
@scope/vue-cli-plugin-xxx
Plugin structure
package.json
index.js
generator.js
prompts.js
ui.js
Package infos
Service
Generator (optional)
Install prompts (optional)
GUI integration (optional)
Generator
Create new files
Modify files
Install dependencies
Modify configuration
vue create my-app
preset
select a preset
plugin
generator
manually select features
plugin
generator
plugin
generator
vue add vue-cli-plugin-demo
install
generator
invoke
Prompts
Ask questions
Personalize
vue add vue-cli-plugin-demo
install
prompts
invoke
generator
Service
Modify Webpack config
Register commands
vue-cli-service <command>
@vue/cli-service
plugin
service
plugin
service
plugin
service
execute command
GUI Integration
Dashboard widgets
Configuration screens
Enhanced tasks
New pages
...
plugin
ui
plugin
ui
plugin
ui
client addon
dynamically loaded JS bundle
More info
cli.vuejs.org
Silver sponsor
Bronze sponsor
Guillaume Chau
@Akryum
github.com/Akryum
Thank you!
Create a Vue CLI plugin!
By Guillaume Chau
Create a Vue CLI plugin!
Let's dive into Vue CLI 3 and create our very own plugin!
