Vue DX

Guillaume Chau

@Akryum

github.com/Akryum

Vue.js Core Team

Contributing XP

Hello,I'm vue-bot!

Improving Contribution Experience

Standard GitHub replies

Contributing Docs

More vue-bot features

What's next?

Building XP

Vue CLI

Previously...

Vue CLI 2

Lots of incompatible templates

Scaffolding only

Eject only

Difficult upgrades

Vue CLI 3

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

Creation

Development

Production build

Deployment

...

Testing

520+ plugins already available

Create your own!

Roadmap for v 4.0

Dependency updates

New Features

vue upgrade overhaul with codemods
plugin ordering
other improvements

webpack-chain 5
nightwatch 1
eslint 5 by default
jest 24
workbox 4
core-js 3

Check out

cli.vuejs.org

Vue CLI UI

vue ui

More context

Detailed explanations

Better discoverability

Better prompts

Localization

Install Prompts

Configuration Screen

Webpack Dashboard

Augmented Task

Widget

Settings page

Command box and keyboard shortcuts

Global UI Plugins

What's next?

Vue CLI Doctor

Diagnose User environment

Checklist

Auto-Fix Scripts

Gathering common issues encountered while using Vue CLI

Soon...

npx @vue/cli-doctor

Vuedesk

What is it?

Electron App

Build Bundles

+

Build Bundle

Node binary

Yarn

@vue/cli

@vue/cli-ui

...

Build Bundle

Tested versions

Versioned per project

Bundled devDependencies

Upgradable

Why Vuedesk?

Controlled environment

More Opinionated

Simpler Experience

More accessible for non-Node devs

Vuedesk Project

{
  "name": "vuedesk-demo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "vue-template-compiler": "^2.5.21"
  },
  "vuedesk": {
    "version": "0.1.0",
    "plugins": [
      "babel",
      "eslint",
      "pwa"
    ]
  }
}

yarn.lock

# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1


de-indent@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
  integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=

he@^1.1.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==

vue-router@^3.0.3:
  version "3.0.6"
  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.6.tgz#2e4f0f9cbb0b96d0205ab2690cfe588935136ac3"
  integrity sha512-Ox0ciFLswtSGRTHYhGvx2L44sVbTPNS+uD2kRISuo8B39Y79rOo0Kw0hzupTmiVtftQYCZl87mwldhh2L9Aquw==

vue-template-compiler@^2.5.21:
  version "2.6.10"
  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.10.tgz#323b4f3495f04faa3503337a82f5d6507799c9cc"
  integrity sha512-jVZkw4/I/HT5ZMvRnhv78okGusqe0+qH2A0Em0Cp8aq78+NK9TII263CDVz2QXZsIT+yyV/gZc/j/vlwa+Epyg==
  dependencies:
    de-indent "^1.0.2"
    he "^1.1.0"

vue@^2.6.10:
  version "2.6.10"
  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"
  integrity sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ==

vuex@^3.0.1:
  version "3.1.1"
  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.1.1.tgz#0c264bfe30cdbccf96ab9db3177d211828a5910e"
  integrity sha512-ER5moSbLZuNSMBFnEBVGhQ1uCBNJslH9W/Dw2W7GZN23UQA69uapP5GTT9Vm8Trc0PzBSVt6LzF3hGjmv41xcg==

When?

When it's ready 😸️

https://github.com/users/Akryum/sponsorship

Silver sponsor

Bronze sponsor

Gold sponsor

Guillaume Chau

@Akryum

github.com/Akryum

Thank you!