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!

  • 9,489