diff --git a/.circleci/config.yml b/.circleci/config.yml
index 3a3743648a..48de71d217 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -56,6 +56,17 @@ jobs:
       - run: yarn test -p unit-mocha,unit-jest,e2e-nightwatch,e2e-cypress
       - run: yarn test tsPluginE2e
 
+  cli-ui:
+    <<: *defaults
+    steps:
+      - attach_workspace:
+          at: ~/project
+      - run: cd packages/@vue/cli-ui && yarn test
+      - store_artifacts:
+          path: packages/@vue/cli-ui/tests/e2e/videos
+      - store_artifacts:
+          path: packages/@vue/cli-ui/tests/e2e/screenshots
+
 workflows:
   version: 2
   test:
@@ -73,3 +84,6 @@ workflows:
       - group-4:
           requires:
             - install
+      - cli-ui:
+          requires:
+            - install
diff --git a/.postcssrc b/.postcssrc
new file mode 100644
index 0000000000..ed0149bf8b
--- /dev/null
+++ b/.postcssrc
@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "autoprefixer": {}
+  }
+}
\ No newline at end of file
diff --git a/appveyor.yml b/appveyor.yml
index 4747e374d5..7151b1ad9a 100644
--- a/appveyor.yml
+++ b/appveyor.yml
@@ -10,6 +10,7 @@ test_script:
   - node --version
   - yarn --version
   - yarn test
+  - cd "packages/@vue/cli-ui" && yarn test
 
 cache:
   - node_modules -> yarn.lock
diff --git a/docs/README.md b/docs/README.md
index 431c5504b9..e9f48aaae5 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -162,3 +162,4 @@ See [@vue/cli-plugin-typescript](https://github.com/vuejs/vue-cli/tree/dev/packa
 
 - [Contributing Guide](https://github.com/vuejs/vue-cli/blob/dev/.github/CONTRIBUTING.md)
 - [Plugin Development Guide](https://github.com/vuejs/vue-cli/blob/dev/docs/plugin-dev.md)
+- [Plugin UI Development Guide](https://github.com/vuejs/vue-cli/blob/dev/docs/plugin-dev-ui.md)
diff --git a/docs/cli.md b/docs/cli.md
index 9d48f6af1f..72731cf2de 100644
--- a/docs/cli.md
+++ b/docs/cli.md
@@ -2,6 +2,7 @@
 
 - [Installation](#installation)
 - [Usage](#usage)
+- [Launch the GUI](#launch-the-gui)
 - [Creating a New Project](#creating-a-new-project)
 - [Presets](#presets)
 - [Zero-config Prototyping](#zero-config-prototyping)
@@ -28,11 +29,28 @@ Commands:
   inspect [options] [paths...]     inspect the webpack config in a project with vue-cli-service
   serve [options] [entry]          serve a .js or .vue file in development mode with zero config
   build [options] [entry]          build a .js or .vue file in production mode with zero config
+  ui [options]                     start and open the vue-cli ui
   init <template> <app-name>       generate a project from a remote template (legacy API, requires @vue/cli-init)
 ```
 
 For each command, you can also use `vue <command> --help` to see more detailed usage.
 
+### Launch the GUI
+
+```
+Usage: ui [options]
+
+start and open the vue-cli ui
+
+
+Options:
+
+  -p, --port <port>  Port used for the UI server (by default search for awailable port)
+  -h, --help         output usage information
+```
+
+![Vue-cli UI preview](./vue-cli-ui-preview.gif)
+
 ### Creating a New Project
 
 ```
diff --git a/docs/config-ui.png b/docs/config-ui.png
new file mode 100644
index 0000000000..a82f60de09
Binary files /dev/null and b/docs/config-ui.png differ
diff --git a/docs/custom-view.png b/docs/custom-view.png
new file mode 100644
index 0000000000..a2b7338adb
Binary files /dev/null and b/docs/custom-view.png differ
diff --git a/docs/plugin-dev-ui.md b/docs/plugin-dev-ui.md
new file mode 100644
index 0000000000..178a922d77
--- /dev/null
+++ b/docs/plugin-dev-ui.md
@@ -0,0 +1,809 @@
+# Plugin UI Development Guide
+
+This guide will walk you through the development of cli-ui specific features for your vue-cli plugins.
+
+- [Plugin Info](#plugin-info)
+  - [Logo](#logo)
+  - [Discoverability](#discoverability)
+- [UI API](#ui-api)
+  - [UI files](#ui-files)
+  - [Dev mode](#dev-mode)
+  - [Project configurations](#project-configurations)
+  - [Project tasks](#project-tasks)
+  - [Client addon](#client-addon)
+  - [Custom views](#custom-views)
+  - [Shared data](#shared-data)
+  - [Plugin actions](#plugin-actions)
+  - [Inter-process communication (IPC)](#inter-process-communication-ipc)
+  - [Local storage](#local-storage)
+  - [Localization](#localization)
+  - [Hooks](#hooks)
+  - [Public static files](#public-static-files)
+
+## Plugin Info
+
+When used in the UI, your plugin can show additional information to make it more discoverable and recognizable.
+
+### Logo
+
+You can put a `logo.png` file in the root directory of the folder that will be published on npm. It will be displayed in several places:
+ - When searching for a plugin to install
+ - In the installed plugin list
+
+![Plugins](./plugins.png)
+
+The logo should be a square non-transparent image (ideally 84x84).
+
+### Discoverability
+
+For better discoverability when a user searches for your plugin, put keywords describing your plugin in the `description` field of the plugin `package.json` file.
+
+Example:
+
+```json
+{
+  "name": "vue-cli-plugin-apollo",
+  "version": "0.7.7",
+  "description": "vue-cli 3 plugin to add Apollo and GraphQL"
+}
+```
+
+You should add the url to the plugin website or repository in the `homepage` or `repository` field so that a 'More info' button will be displayed in your plugin description:
+
+```json
+{
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Akryum/vue-cli-plugin-apollo.git"
+  },
+  "homepage": "https://github.com/Akryum/vue-cli-plugin-apollo#readme"
+}
+```
+
+![Plugin search item](./plugin-search-item.png)
+
+## UI API
+
+The cli-ui exposes an API that allows augmenting the project configurations and tasks, as well as sharing data and communicating with other processes.
+
+![UI Plugin architecture](./vue-cli-ui-schema.png)
+
+### UI files
+
+Inside each installed vue-cli plugins, the cli-ui will try to load an optional `ui.js` file in the root folder of the plugin. It will also try to load a `vue-cli-ui.js` file in the user project root so the UI can be manually extended on a per-project basis (also useful to quickly prototype a plugin).
+
+The file should export a function which gets the api object as argument:
+
+```js
+module.exports = api => {
+  // Use the API here...
+}
+```
+
+**⚠️ The files will be reloaded when feetching the plugin list in the 'Project plugins' view. To apply changes, click on the 'Project plugins' button in the navigation sidebar on the left.**
+
+### Dev mode
+
+While building your plugin, you may want to run the cli-ui in Dev mode, so it will output useful logs to you:
+
+```
+vue ui --dev
+```
+
+### Project configurations
+
+![Configuration ui](./config-ui.png)
+
+You can add a project configuration with the `api.describeConfig` method.
+
+First you need to pass some informations:
+
+```js
+api.describeConfig({
+  // Unique ID for the config
+  id: 'eslintrc',
+  // Displayed name
+  name: 'ESLint configuration',
+  // Shown below the name
+  description: 'Error checking & Code quality',
+  // "More info" link
+  link: 'https://eslint.org'
+})
+```
+
+Specify an icon with either a file type (like `'json'`) or a file name (like `.babelrc` to get the babel icon). This is powered by file-icons.
+
+```js
+api.describeConfig({
+  /* ... */
+  // Icon generated using file-icons
+  icon: '.eslintrc.json'
+})
+```
+
+Then you can specify which files will be read when loading the configuration and then written to:
+
+```js
+api.describeConfig({
+  /* ... */
+  // All possible files for this config
+  files: {
+    json: ['.eslintrc', '.eslintrc.json'],
+    js: ['.eslintrc.js'],
+    // Will read from `package.json`
+    package: 'eslintConfig'
+  },
+})
+```
+
+Supported types: `json`, `yaml`, `js`, `package`.
+
+Use the `onRead` hook to return a list of prompts to be displayed for the configuration:
+
+```js
+api.describeConfig({
+  /* ... */
+  onRead: ({ data, cwd }) => ({
+    prompts: [
+      // Prompt objects
+    ]
+  })
+})
+```
+
+The prompt objects must be valid [inquirer](https://github.com/SBoudrias/Inquirer.js) prompts with the following additional fields (which are optional):
+
+```js
+{
+  /* ... */
+  // Used to group the prompts into sections
+  group: 'Strongly recommended',
+  // Additional description
+  description: 'Enforce attribute naming style in template (`my-prop` or `myProp`)',
+  // "More info" link
+  link: 'https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/attribute-hyphenation.md',
+}
+```
+
+Supported inquirer types: `checkbox`, `confirm`, `input`, `password`, `list`, `rawlist`.
+
+In addition to those, the UI supports special types that only works with it: `color`.
+
+Use the `onWrite` hook to write the data to the configuration file (or execute any node code):
+
+```js
+api.describeConfig({
+  /* ... */
+  onWrite: ({ prompts, answers, data, file, cwd, api }) => {
+    // ...
+  }
+})
+```
+
+Arguments:
+
+- `prompts`: current prompts runtime objects
+- `answers`: answers data from the user inputs
+- `data`: read-only initial data read from the file
+- `file`: descriptor of the found file (`{ type: 'json', path: '...' }`)
+- `cwd`: current working directory
+- `api`: onWrite API
+
+Prompts runtime objects:
+
+```js
+{
+  id: data.name,
+  type: data.type,
+  name: data.short || null,
+  message: data.message,
+  group: data.group || null,
+  description: data.description || null,
+  link: data.link || null,
+  choices: null,
+  visible: true,
+  enabled: true,
+  // Current value (not filtered)
+  value: null,
+  // true if changed by user
+  valueChanged: false,
+  error: null,
+  // Original inquirer prompt object
+  raw: data
+}
+```
+
+onWrite API:
+
+- `assignData(newData)`: use `Object.assign` to update the config data before writing.
+- `setData(newData)`: each key of `newData` will be deeply set (or removed if `undefined` value) to the config data before writing.
+- `async getAnswer(id, mapper)`: retrieve answer for a given prompt id and map it through `mapper` function if provide (for example `JSON.parse`).
+
+### Project tasks
+
+![Tasks ui](./tasks-ui.png)
+
+Tasks are generated from the `scripts` field in the project `package.json` file.
+
+You can 'augment' the tasks with additional info and hooks thanks to the `api.describeTask` method:
+
+```js
+api.describeTask({
+  // RegExp executed on script commands to select which task will be described here
+  match: /vue-cli-service serve/,
+  description: 'Compiles and hot-reloads for development',
+  // "More info" link
+  link: 'https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#serve',
+  // Optional parameters (inquirer prompts)
+  prompts: [
+    {
+      name: 'open',
+      type: 'confirm',
+      default: false,
+      description: 'Open browser on server start'
+    },
+    {
+      name: 'mode',
+      type: 'list',
+      default: 'development',
+      choices: [
+        {
+          name: 'development',
+          value: 'development'
+        },
+        {
+          name: 'production',
+          value: 'production'
+        },
+        {
+          name: 'test',
+          value: 'test'
+        }
+      ],
+      description: 'Specify env mode'
+    }
+  ],
+  // Hooks
+  // Modify arguments here
+  onBeforeRun: async ({ answers, args }) => {
+    // Args
+    if (answers.open) args.push('--open')
+    if (answers.mode) args.push('--mode', answers.mode)
+    args.push('--dashboard')
+  },
+  // Immediatly after running the task
+  onRun: async ({ args, child, cwd }) => {
+    // child: node child process
+    // cwd: process working directory
+  },
+  onExit: async ({ args, child, cwd, code, signal }) => {
+    // code: exit code
+    // signal: kill signal used if any
+  },
+  // Additional views (for example the webpack dashboard)
+  // By default, there is the 'output' view which displays the terminal output
+  views: [
+    {
+      // Unique ID
+      id: 'vue-webpack-dashboard-client-addon',
+      // Button label
+      label: 'Dashboard',
+      // Button icon
+      icon: 'dashboard',
+      // Dynamic component to load (see 'Client addon' section below)
+      component: 'vue-webpack-dashboard'
+    }
+  ],
+  // Default selected view when displaying the task details (by default it's the output)
+  defaultView: 'vue-webpack-dashboard-client-addon'
+})
+```
+
+#### Add new tasks
+
+You can also add entirely new tasks which aren't in the `package.json` scripts. Those tasks will only appear in the cli UI:
+
+```js
+api.addTask({
+  // Required
+  name: 'inspect',
+  command: 'vue-cli-service inspect',
+  // Optional
+  // The rest is like `describeTask` without the `match` option
+  description: '...',
+  link: 'https://github.com/vuejs/vue-cli/...',
+  prompts: [ /* ... */ ],
+  onBeforeRun: () => {},
+  onRun: () => {},
+  onExit: () => {},
+  views: [ /* ... */ ],
+  defaultView: '...'
+})
+```
+
+**⚠️ The `command` will run a node context. This means you can call node bin commands like you would normally do in the `package.json` scripts.**
+
+### Client addon
+
+A Client addon is a JS bundle which is dynamically loaded into the cli-ui. It is useful to load custom components and routes.
+
+#### Create a client addon
+
+The recommended way to create a Client addon is by creating a new project using vue-cli 3. You can either do this in a subfolder of your plugin or in a different npm package.
+
+Install `@vue/cli-ui` as a dev dependency.
+
+Then add a `vue.config.js` file with the following content:
+
+```js
+const { clientAddonConfig } = require('@vue/cli-ui')
+
+module.exports = {
+  ...clientAddonConfig({
+    id: '<client-addon-id>',
+    // Development port (default 8042)
+    port: 8042
+  })
+}
+```
+
+The `clientAddonConfig` method will generate the needed vue-cli configuration. Among other things, it disables CSS extraction and outputs the code to `./dist/index.js` in the client addon folder.
+
+**⚠️ Don't forget to replace `<client-addon-id>` in the `id` field with the id of your new client addon!**
+
+Then modify the `.eslintrc.json` file to add some allowed global objects:
+
+```json
+{
+  // ...
+  "globals": {
+    "ClientAddonApi": false,
+    "mapSharedData": false,
+    "Vue": false
+  }
+}
+```
+
+You can now run the `serve` script in development and the `build` one when you are ready to publish your plugin.
+
+#### ClientAddonApi
+
+Open the `main.js` file in the client addon sources and remove all the code.
+
+**⚠️ Don't import Vue in the client addon sources, use the global `Vue` object from the browser `window`.**
+
+Here is an example of code for `main.js`:
+
+```js
+import VueProgress from 'vue-progress-path'
+import WebpackDashboard from './components/WebpackDashboard.vue'
+import TestView from './components/TestView.vue'
+
+// You can install additional vue plugins
+// using the global 'Vue' variable
+Vue.use(VueProgress, {
+  defaultShape: 'circle'
+})
+
+// Register a custom component
+// (works like 'Vue.component')
+ClientAddonApi.component('vue-webpack-dashboard', WebpackDashboard)
+
+// Add routes to vue-router under a /addon/<id> parent route.
+// For example, addRoutes('foo', [ { path: '' }, { path: 'bar' } ])
+// will add the /addon/foo/ and the /addon/foo/bar routes to vue-router.
+// Here we create a new '/addon/vue-webpack/' route with the 'test-webpack-route' name
+ClientAddonApi.addRoutes('vue-webpack', [
+  { path: '', name: 'test-webpack-route', component: TestView }
+])
+
+// You can translate your plugin components
+// Load the locale files (uses vue-i18n)
+const locales = require.context('./locales', true, /[a-z0-9]+\.json$/i)
+locales.keys().forEach(key => {
+  const locale = key.match(/([a-z0-9]+)\./i)[1]
+  ClientAddonApi.addLocalization(locale, locales(key))
+})
+```
+
+The cli-ui registers `Vue` and `ClientAddonApi` as global variables in the `window` scope.
+
+In your components, you can use all the components and the CSS classes of [@vue/ui](https://github.com/vuejs/ui) and [@vue/cli-ui](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-ui/src/components) in order to keep the look and feel consistent. You can also translate the strings with [vue-i18n](https://github.com/kazupon/vue-i18n) which is included.
+#### Register the client addon
+
+Back to the `ui.js` file, use the `api.addClientAddon` method with a require query to the built folder:
+
+```js
+api.addClientAddon({
+  id: 'vue-webpack',
+  // Folder containing the built JS files
+  path: '@vue/cli-ui-addon-webpack/dist'
+})
+```
+
+This will use the nodejs `require.resolve` API to find the folder and serve the `index.js` file built from the client addon.
+
+Or specify an url when developping the plugin (ideally you want to do this in the `vue-cli-ui.js` file in your test vue project):
+
+```js
+// Useful for dev
+// Will override path if already defined in a plugin
+api.addClientAddon({
+  id: 'vue-webpack',
+  // Use the same port you configured earlier
+  url: 'http://localhost:8042/index.js'
+})
+```
+
+#### Use the client addon
+
+You can now use the client addon in the views. For example, you can specify a view in a described task:
+
+```js
+api.describeTask({
+  /* ... */
+  // Additional views (for example the webpack dashboard)
+  // By default, there is the 'output' view which displays the terminal output
+  views: [
+    {
+      // Unique ID
+      id: 'vue-webpack-dashboard-client-addon',
+      // Button label
+      label: 'Dashboard',
+      // Button icon (material-icons)
+      icon: 'dashboard',
+      // Dynamic component to load, registered using ClientAddonApi
+      component: 'vue-webpack-dashboard'
+    }
+  ],
+  // Default selected view when displaying the task details (by default it's the output)
+  defaultView: 'vue-webpack-dashboard-client-addon'
+})
+```
+
+Here is the client addon code that register the `'vue-webpack-dashboard'` component (like we saw earlier):
+
+```js
+/* In `main.js` */
+// Import the component
+import WebpackDashboard from './components/WebpackDashboard.vue'
+// Register a custom component
+// (works like 'Vue.component')
+ClientAddonApi.component('vue-webpack-dashboard', WebpackDashboard)
+```
+
+![Task view example](./task-view.png)
+
+### Custom views
+
+You can add a new view below the standard 'Project plugins', 'Project configuration' and 'Project tasks' ones using the `api.addView` method:
+
+```js
+api.addView({
+  // Unique id
+  id: 'vue-webpack-test-view',
+
+  // Route name (from vue-router)
+  // Use the same name used in the 'ClientAddonApi.addRoutes' method (see above in the Client addon section)
+  name: 'test-webpack-route',
+
+  // Button icon (material-icons)
+  icon: 'pets',
+  // You can also specify a custom image (see Public static files section below):
+  // icon: 'http://localhost:4000/_plugin/%40vue%2Fcli-service/webpack-icon.svg',
+
+  // Button tooltip
+  tooltip: 'Test view from webpack addon'
+})
+```
+
+Here is the code in the client addon that register the `'test-webpack-route'` (like we saw earlier):
+
+```js
+/* In `main.js` */
+// Import the component
+import TestView from './components/TestView.vue'
+// Add routes to vue-router under a /addon/<id> parent route.
+// For example, addRoutes('foo', [ { path: '' }, { path: 'bar' } ])
+// will add the /addon/foo/ and the /addon/foo/bar routes to vue-router.
+// Here we create a new '/addon/vue-webpack/' route with the 'test-webpack-route' name
+ClientAddonApi.addRoutes('vue-webpack', [
+  { path: '', name: 'test-webpack-route', component: TestView }
+])
+```
+
+![Custom view example](./custom-view.png)
+
+### Shared data
+
+Use Shared data to communicate info with custom components in an easy way.
+
+In the plugin `ui.js`:
+
+```js
+// Set or update
+api.setSharedData('my-variable', 'some-data')
+
+// Get
+const sharedData = api.getSharedData('my-variable')
+if (sharedData) {
+  console.log(sharedData.value)
+}
+
+// Remove
+api.removeSharedData('my-variable')
+
+// Watch for changes
+const watcher = (value, id) => {
+  console.log(value, id)
+}
+api.watchSharedData('my-variable', watcher)
+// Unwatch
+api.unwatchSharedData('my-variable', watcher)
+
+// Namespaced versions
+const {
+  setSharedData,
+  getSharedData,
+  removeSharedData,
+  watchSharedData,
+  unwatchSharedData
+} = api.namespace('webpack-dashboard-')
+```
+
+In the custom component:
+
+```js
+{
+  // Sync Shared data
+  sharedData () {
+    return {
+      // You can use `status` in template
+      status: `webpack-dashboard-${this.mode}-status`
+      // You can also map namespaced Shared data
+      ...mapSharedData('webpack-dashboard-', {
+        status: `${this.mode}-status`,
+        progress: `${this.mode}-progress`,
+        operations: `${this.mode}-operations`
+      })
+    }
+  },
+
+  // Manual methods
+  async created () {
+    const value = await this.$getSharedData('my-variable')
+
+    this.$watchSharedData(`my-variable`, value => {
+      console.log(value)
+    })
+
+    await this.$setSharedData('my-variable', 'new-value')
+  }
+}
+```
+
+If you use the `sharedData` option, the shared data can be updated by assigning a new value to the corresponding property.
+
+```html
+<template>
+  <VueInput v-model="message"/>
+</template>
+
+<script>
+export default {
+  sharedData: {
+    // Will sync the the 'my-message' shared data on the server
+    message: 'my-message'
+  }
+}
+</script>
+```
+
+This is very usefull if you create a settings component for example.
+
+### Plugin actions
+
+Plugin actions are calls sent between the cli-ui (browser) and plugins (nodejs).
+
+In the `ui.js` file in the plugin (nodejs), you can use two methods from `PluginApi`:
+
+```js
+// Call an action
+api.callAction('other-action', { foo: 'bar' }).then(results => {
+  console.log(results)
+}).catch(errors => {
+  console.error(errors)
+})
+```
+
+```js
+// Listen for an action
+api.onAction('test-action', params => {
+  console.log('test-action called', params)
+})
+```
+
+You can use namespaced versions with `api.namespace` (similar to Shared data):
+
+```js
+const { onAction, callAction } = api.namespace('vue-webpack-')
+```
+
+In the client addon components (browser), you have access to `$onPluginActionCalled`, `$onPluginActionResolved` and `$callPluginAction`:
+
+```js
+export default {
+  created () {
+    this.$onPluginActionCalled(action => {
+      // When the action is called
+      // before being run
+      console.log('called', action)
+    })
+    this.$onPluginActionResolved(action => {
+      // After the action is run and completed
+      console.log('resolved', action)
+    })
+  },
+
+  methods: {
+    testPluginAction () {
+      // Call a plugin action
+      this.$callPluginAction('test-action', {
+        meow: 'meow'
+      })
+    }
+  }
+}
+```
+
+### Inter-process communication (IPC)
+
+IPC stands for Inter-Process Communication. This system allows you to easily send messages from child processes (for example, tasks!). And it's pretty fast and lightweight.
+
+> To display the data in the webpack dashboard UI, the `serve` and `build` commands from `@vue/cli-service` send IPC messages to the cli-ui nodejs server when the `--dashboard` argument is passed in.
+
+In you process code (which can be a Webpack plugin or a nodejs task script), you can use the `IpcMessenger` class from `@vue/cli-shared-utils`:
+
+```js
+const { IpcMessenger } = require('@vue/cli-shared-utils')
+
+// Create a new IpcMessenger instance
+const ipc = new IpcMessenger()
+
+// Connect to the vue-cli IPC network
+ipc.connect()
+
+function sendMessage (data) {
+  // Send a message to the cli-ui server
+  ipc.send({
+    webpackDashboardData: {
+      type: 'build',
+      value: data
+    }
+  })
+}
+
+function messageHandler (data) {
+  console.log(data)
+}
+
+// Listen for message
+ipc.on(messageHandler)
+
+// Don't listen anymore
+ipc.off(messageHandler)
+
+function cleanup () {
+  // Disconnect from the IPC network
+  ipc.disconnect()
+}
+```
+
+In a vue-cli plugin `ui.js` file, you can use the `ipcOn`, `ipcOff` and `ipcSend` methods:
+
+```js
+function onWebpackMessage ({ data: message }) {
+  if (message.webpackDashboardData) {
+    console.log(message.webpackDashboardData)
+  }
+}
+
+// Listen for any IPC message
+api.ipcOn(onWebpackMessage)
+
+// Don't listen anymore
+api.ipcOff(onWebpackMessage)
+
+// Send a message to all connected IpcMessenger instances
+api.ipcSend({
+  webpackDashboardMessage: {
+    foo: 'bar'
+  }
+})
+```
+
+### Local storage
+
+A plugin can save and load data from the local [lowdb](https://github.com/typicode/lowdb) database used by the ui server.
+
+```js
+// Store a value into the local DB
+api.storageSet('my-plugin.an-id', { some: 'value' })
+
+// Retrieve a value from the local DB
+console.log(api.storageGet('my-plugin.an-id'))
+
+// Full lowdb instance
+api.db.get('posts')
+  .find({ title: 'low!' })
+  .assign({ title: 'hi!'})
+  .write()
+
+// Namespaced helpers
+const { storageGet, storageSet } = api.namespace('my-plugin.')
+```
+
+### Localization
+
+You can put locale files compatible with [vue-i18n](https://github.com/kazupon/vue-i18n) in a `locales` folder at the root of your plugin. They will be automatically loaded into the client when the project is opened. You can then use `$t` to translate strings in your components and other vue-i18n helpers. Also, the strings used in the UI API (like `describeTask`) will go through vue-i18n as well to you can localize them.
+
+Example `locales` folder:
+
+```
+vue-cli-plugin/locales/en.json
+vue-cli-plugin/locales/fr.json
+```
+
+Example usage in API:
+
+```js
+api.describeConfig({
+  // vue-i18n path
+  description: 'my-plugin.config.foo'
+})
+```
+
+Example usage in components:
+
+```html
+<VueButton>{{ $t('my-plugin.actions.bar') }}</VueButton>
+```
+
+You can also load the locale files in a client addon if you prefer, using the `ClientAddonApi`:
+
+```js
+// Load the locale files (uses vue-i18n)
+const locales = require.context('./locales', true, /[a-z0-9]+\.json$/i)
+locales.keys().forEach(key => {
+  const locale = key.match(/([a-z0-9]+)\./i)[1]
+  ClientAddonApi.addLocalization(locale, locales(key))
+})
+```
+
+### Hooks
+
+Hooks allows to react to certain cli-ui events.
+
+`onProjectOpen`: Called when the plugin is loaded for the first time for the current project.
+
+```js
+api.onProjectOpen((project, previousProject) => {
+  // Reset data
+})
+```
+
+`onPluginReload`: Called when the plugin is reloaded.
+
+```js
+api.onPluginReload((project) => {
+  console.log('plugin reloaded')
+})
+```
+
+### Public static files
+
+You may need to expose some static files over the cli-ui builtin HTTP server (typically if you want to specify an icon to a custom view).
+
+Any file in an optional `ui-public` folder in the root of the plugin package folder will be exposed to the `/_plugin/:id/*` HTTP route.
+
+For example, if you put a `my-logo.png` file into the `my-package/ui-public/` folder, it will be available with the `http://localhost:8000/_plugin/my-package/my-logo.png` URL when the cli-ui loads the plugin.
diff --git a/docs/plugin-search-item.png b/docs/plugin-search-item.png
new file mode 100644
index 0000000000..004ec10da0
Binary files /dev/null and b/docs/plugin-search-item.png differ
diff --git a/docs/plugins.png b/docs/plugins.png
new file mode 100644
index 0000000000..5965cf4df4
Binary files /dev/null and b/docs/plugins.png differ
diff --git a/docs/task-view.png b/docs/task-view.png
new file mode 100644
index 0000000000..ab605a4563
Binary files /dev/null and b/docs/task-view.png differ
diff --git a/docs/tasks-ui.png b/docs/tasks-ui.png
new file mode 100644
index 0000000000..533830ad7d
Binary files /dev/null and b/docs/tasks-ui.png differ
diff --git a/docs/vue-cli-ui-preview.gif b/docs/vue-cli-ui-preview.gif
new file mode 100644
index 0000000000..22645375b3
Binary files /dev/null and b/docs/vue-cli-ui-preview.gif differ
diff --git a/docs/vue-cli-ui-schema.png b/docs/vue-cli-ui-schema.png
new file mode 100644
index 0000000000..e57807098f
Binary files /dev/null and b/docs/vue-cli-ui-schema.png differ
diff --git a/packages/@vue/cli-init/package.json b/packages/@vue/cli-init/package.json
index ecbbdd2f71..16f96686de 100644
--- a/packages/@vue/cli-init/package.json
+++ b/packages/@vue/cli-init/package.json
@@ -21,7 +21,7 @@
   },
   "homepage": "https://github.com/vuejs/vue-cli/packages/@vue/cli-init#readme",
   "dependencies": {
-    "execa": "^0.9.0",
+    "execa": "^0.10.0",
     "vue-cli": "^2.9.2"
   }
 }
diff --git a/packages/@vue/cli-plugin-babel/logo.png b/packages/@vue/cli-plugin-babel/logo.png
new file mode 100644
index 0000000000..14f9dee492
Binary files /dev/null and b/packages/@vue/cli-plugin-babel/logo.png differ
diff --git a/packages/@vue/cli-plugin-e2e-cypress/logo.png b/packages/@vue/cli-plugin-e2e-cypress/logo.png
new file mode 100644
index 0000000000..6f2b6319ed
Binary files /dev/null and b/packages/@vue/cli-plugin-e2e-cypress/logo.png differ
diff --git a/packages/@vue/cli-plugin-e2e-cypress/ui.js b/packages/@vue/cli-plugin-e2e-cypress/ui.js
new file mode 100644
index 0000000000..0968a066e9
--- /dev/null
+++ b/packages/@vue/cli-plugin-e2e-cypress/ui.js
@@ -0,0 +1,46 @@
+module.exports = api => {
+  api.describeTask({
+    match: /vue-cli-service test:e2e/,
+    description: 'cypress.tasks.test.description',
+    link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-e2e-cypress#injected-commands',
+    prompts: [
+      {
+        name: 'headless',
+        type: 'confirm',
+        default: false,
+        description: 'cypress.tasks.test.headless'
+      },
+      {
+        name: 'mode',
+        type: 'list',
+        default: 'development',
+        choices: [
+          {
+            name: 'development',
+            value: 'development'
+          },
+          {
+            name: 'production',
+            value: 'production'
+          },
+          {
+            name: 'test',
+            value: 'test'
+          }
+        ],
+        description: 'cypress.tasks.test.mode'
+      },
+      {
+        name: 'url',
+        type: 'input',
+        default: '',
+        description: 'cypress.tasks.test.url'
+      }
+    ],
+    onBeforeRun: ({ answers, args }) => {
+      if (answers.headless) args.push('--headless')
+      if (answers.mode) args.push('--mode', answers.mode)
+      if (answers.url) args.push('--url=' + answers.url)
+    }
+  })
+}
diff --git a/packages/@vue/cli-plugin-e2e-nightwatch/logo.png b/packages/@vue/cli-plugin-e2e-nightwatch/logo.png
new file mode 100644
index 0000000000..d971885108
Binary files /dev/null and b/packages/@vue/cli-plugin-e2e-nightwatch/logo.png differ
diff --git a/packages/@vue/cli-plugin-e2e-nightwatch/ui.js b/packages/@vue/cli-plugin-e2e-nightwatch/ui.js
new file mode 100644
index 0000000000..f223d289d0
--- /dev/null
+++ b/packages/@vue/cli-plugin-e2e-nightwatch/ui.js
@@ -0,0 +1,18 @@
+module.exports = api => {
+  api.describeTask({
+    match: /vue-cli-service test:e2e/,
+    description: 'nightwatch.tasks.test.description',
+    link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-e2e-nightwatch#injected-commands',
+    prompts: [
+      {
+        name: 'url',
+        type: 'input',
+        default: '',
+        description: 'nightwatch.tasks.test.url'
+      }
+    ],
+    onBeforeRun: ({ answers, args }) => {
+      if (answers.url) args.push('--url', answers.url)
+    }
+  })
+}
diff --git a/packages/@vue/cli-plugin-eslint/lint.js b/packages/@vue/cli-plugin-eslint/lint.js
index 121da29273..31878d0549 100644
--- a/packages/@vue/cli-plugin-eslint/lint.js
+++ b/packages/@vue/cli-plugin-eslint/lint.js
@@ -20,7 +20,7 @@ module.exports = function lint (args = {}, api) {
   const chalk = require('chalk')
   const cwd = api.resolve('.')
   const { CLIEngine } = require('eslint')
-  const { log, done } = require('@vue/cli-shared-utils')
+  const { log, done, exit } = require('@vue/cli-shared-utils')
 
   const files = args._ && args._.length ? args._ : ['src', 'tests', '*.js']
   const extensions = require('./eslintOptions').extensions(api)
@@ -70,7 +70,7 @@ module.exports = function lint (args = {}, api) {
     if (isWarningsExceeded) {
       log(`Eslint found too many warnings (maximum: ${argsConfig.maxWarnings}).`)
     }
-    process.exit(1)
+    exit(1)
   }
 }
 
diff --git a/packages/@vue/cli-plugin-eslint/logo.png b/packages/@vue/cli-plugin-eslint/logo.png
new file mode 100644
index 0000000000..301d3b2ddc
Binary files /dev/null and b/packages/@vue/cli-plugin-eslint/logo.png differ
diff --git a/packages/@vue/cli-plugin-eslint/ui.js b/packages/@vue/cli-plugin-eslint/ui.js
new file mode 100644
index 0000000000..bb38777329
--- /dev/null
+++ b/packages/@vue/cli-plugin-eslint/ui.js
@@ -0,0 +1,227 @@
+module.exports = api => {
+  // Config file
+  api.describeConfig({
+    id: 'eslintrc',
+    name: 'ESLint configuration',
+    description: 'eslint.config.eslint.description',
+    link: 'https://github.com/vuejs/eslint-plugin-vue',
+    icon: '.eslintrc.json',
+    files: {
+      json: ['.eslintrc', '.eslintrc.json'],
+      js: ['.eslintrc.js'],
+      package: 'eslintConfig'
+    },
+    onRead: ({ data }) => ({
+      prompts: [
+        {
+          name: 'vue/attribute-hyphenation',
+          type: 'list',
+          message: 'Attribute hyphenation',
+          group: 'eslint.config.eslint.groups.strongly-recommended',
+          description: 'Enforce attribute naming style in template (`my-prop` or `myProp`)',
+          link: 'https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/attribute-hyphenation.md',
+          default: JSON.stringify('off'),
+          choices: [
+            {
+              name: 'Off',
+              value: JSON.stringify('off')
+            },
+            {
+              name: 'Never',
+              value: JSON.stringify(['error', 'never'])
+            },
+            {
+              name: 'Always',
+              value: JSON.stringify(['error', 'always'])
+            }
+          ],
+          value: data.rules && JSON.stringify(data.rules['vue/attribute-hyphenation'])
+        },
+        {
+          name: 'vue/html-end-tags',
+          type: 'confirm',
+          message: 'Template end tags style',
+          group: 'eslint.config.eslint.groups.strongly-recommended',
+          description: 'End tag on Void elements, end tags and self-closing opening tags',
+          link: 'https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-end-tags.md',
+          default: false,
+          value: data.rules && data.rules['vue/html-end-tags'] === 'error',
+          filter: input => JSON.stringify(input ? 'error' : 'off'),
+          transformer: input => input === JSON.stringify('error')
+        },
+        {
+          name: 'vue/html-indent',
+          type: 'list',
+          message: 'Template indentation',
+          group: 'eslint.config.eslint.groups.strongly-recommended',
+          description: 'Enforce indentation in template',
+          link: 'https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-indent.md',
+          default: JSON.stringify('off'),
+          choices: [
+            {
+              name: 'Off',
+              value: JSON.stringify('off')
+            },
+            {
+              name: 'Tabs',
+              value: JSON.stringify(['error', 'tabs'])
+            },
+            {
+              name: '2 spaces',
+              value: JSON.stringify(['error', 2])
+            },
+            {
+              name: '4 spaces',
+              value: JSON.stringify(['error', 4])
+            },
+            {
+              name: '8 spaces',
+              value: JSON.stringify(['error', 8])
+            }
+          ],
+          value: data.rules && JSON.stringify(data.rules['vue/html-indent'])
+        },
+        {
+          name: 'vue/html-self-closing',
+          type: 'confirm',
+          message: 'Template tag self-closing style',
+          group: 'eslint.config.eslint.groups.strongly-recommended',
+          description: 'Self-close any component or non-Void element tags',
+          link: 'https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-self-closing.md',
+          default: false,
+          value: data.rules && data.rules['vue/html-self-closing'] === 'error',
+          filter: input => JSON.stringify(input ? 'error' : 'off'),
+          transformer: input => input === JSON.stringify('error')
+        },
+        {
+          name: 'vue/require-default-prop',
+          type: 'confirm',
+          message: 'Require default in required props',
+          group: 'eslint.config.eslint.groups.strongly-recommended',
+          description: 'This rule requires default value to be set for each props that are not marked as `required`',
+          link: 'https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/require-default-prop.md',
+          default: false,
+          value: data.rules && data.rules['vue/require-default-prop'] === 'error',
+          filter: input => JSON.stringify(input ? 'error' : 'off'),
+          transformer: input => input === JSON.stringify('error')
+        },
+        {
+          name: 'vue/require-prop-types',
+          type: 'confirm',
+          message: 'Require types for props',
+          group: 'eslint.config.eslint.groups.strongly-recommended',
+          description: 'In committed code, prop definitions should always be as detailed as possible, specifying at least type(s)',
+          link: 'https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/require-prop-types.md',
+          default: false,
+          value: data.rules && data.rules['vue/require-prop-types'] === 'error',
+          filter: input => JSON.stringify(input ? 'error' : 'off'),
+          transformer: input => input === JSON.stringify('error')
+        },
+        {
+          name: 'vue/attributes-order',
+          type: 'confirm',
+          message: 'Attribute order',
+          group: 'eslint.config.eslint.groups.recommended',
+          description: 'This rule aims to enforce ordering of component attributes (the default order is specified in the Vue style guide)',
+          link: 'https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/attributes-order.md',
+          default: false,
+          value: data.rules && data.rules['vue/attributes-order'] === 'error',
+          filter: input => JSON.stringify(input ? 'error' : 'off'),
+          transformer: input => input === JSON.stringify('error')
+        },
+        {
+          name: 'vue/html-quotes',
+          type: 'list',
+          message: 'Attribute quote style',
+          group: 'eslint.config.eslint.groups.recommended',
+          description: 'Enforce style of the attribute quotes in templates',
+          link: 'https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-quotes.md',
+          default: JSON.stringify('off'),
+          choices: [
+            {
+              name: 'Off',
+              value: JSON.stringify('off')
+            },
+            {
+              name: 'Double quotes',
+              value: JSON.stringify(['error', 'double'])
+            },
+            {
+              name: 'Single quotes',
+              value: JSON.stringify(['error', 'single'])
+            }
+          ],
+          value: data.rules && JSON.stringify(data.rules['vue/html-quotes'])
+        },
+        {
+          name: 'vue/order-in-components',
+          type: 'confirm',
+          message: 'Component options order',
+          group: 'eslint.config.eslint.groups.recommended',
+          description: 'This rule aims to enforce ordering of component options (the default order is specified in the Vue style guide)',
+          link: 'https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/order-in-components.md',
+          default: false,
+          value: data.rules && data.rules['vue/order-in-components'] === 'error',
+          filter: input => JSON.stringify(input ? 'error' : 'off'),
+          transformer: input => input === JSON.stringify('error')
+        }
+      ]
+    }),
+    onWrite: async ({ api, prompts }) => {
+      const result = {}
+      for (const prompt of prompts) {
+        result[`rules.${prompt.id}`] = await api.getAnswer(prompt.id, JSON.parse)
+      }
+      api.setData(result)
+    }
+  })
+
+  api.describeConfig({
+    id: 'eslintrc-config',
+    name: 'ESLint extra',
+    description: 'eslint.config.eslint-extra.description',
+    link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint#configuration',
+    icon: '.eslintrc.json',
+    files: {
+      js: ['vue.config.js']
+    },
+    onRead: ({ data }) => ({
+      prompts: [
+        {
+          name: 'lintOnSave',
+          type: 'confirm',
+          message: 'eslint.config.eslint-extra.lintOnSave.message',
+          description: 'eslint.config.eslint-extra.lintOnSave.description',
+          link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint#configuration',
+          default: true,
+          value: data.lintOnSave
+        }
+      ]
+    }),
+    onWrite: async ({ api, prompts }) => {
+      const result = {}
+      for (const prompt of prompts) {
+        result[prompt.id] = await api.getAnswer(prompt.id)
+      }
+      api.setData(result)
+    }
+  })
+
+  // Tasks
+  api.describeTask({
+    match: /vue-cli-service lint/,
+    description: 'eslint.tasks.lint.description',
+    link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint#injected-commands',
+    prompts: [
+      {
+        name: 'noFix',
+        type: 'confirm',
+        default: false,
+        description: 'eslint.tasks.lint.noFix'
+      }
+    ],
+    onBeforeRun: ({ answers, args }) => {
+      if (answers.noFix) args.push('--no-fix')
+    }
+  })
+}
diff --git a/packages/@vue/cli-plugin-pwa/logo.png b/packages/@vue/cli-plugin-pwa/logo.png
new file mode 100644
index 0000000000..ada08e718c
Binary files /dev/null and b/packages/@vue/cli-plugin-pwa/logo.png differ
diff --git a/packages/@vue/cli-plugin-pwa/logo.svg b/packages/@vue/cli-plugin-pwa/logo.svg
new file mode 100644
index 0000000000..5f3ae6a5c4
--- /dev/null
+++ b/packages/@vue/cli-plugin-pwa/logo.svg
@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="84"
+   height="84"
+   viewBox="0 0 84.000001 84.000001"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   inkscape:export-filename="/home/akryum/Projets/vue-cli/packages/@vue/cli-plugin-pwa/logo.png"
+   inkscape:export-xdpi="240"
+   inkscape:export-ydpi="240"
+   sodipodi:docname="logo.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="5.6"
+     inkscape:cx="24.931097"
+     inkscape:cy="51.862606"
+     inkscape:document-units="px"
+     inkscape:current-layer="g4200"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:snap-bbox-midpoints="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:bbox-nodes="true"
+     inkscape:object-paths="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:snap-midpoints="true"
+     inkscape:snap-object-midpoints="true"
+     inkscape:snap-center="true"
+     inkscape:snap-text-baseline="true"
+     inkscape:snap-page="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="0"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-968.36216)">
+    <rect
+       style="opacity:1;fill:#a0f5ff;fill-opacity:1;stroke:none;stroke-width:4;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.19444448"
+       id="rect4136"
+       width="84"
+       height="84"
+       x="0"
+       y="968.36218" />
+    <g
+       style="fill:#000000"
+       id="g4200"
+       transform="matrix(2.452153,0.7152715,-0.7152715,2.452153,21.157422,972.35307)">
+      <path
+         id="path4190"
+         d="M 16,1 8,1 C 6.34,1 5,2.34 5,4 l 0,16 c 0,1.66 1.34,3 3,3 l 8,0 c 1.66,0 3,-1.34 3,-3 L 19,4 C 19,2.34 17.66,1 16,1 Z m -2,20 -4,0 0,-1 4,0 0,1 z m 3.25,-3 -10.5,0 0,-14 10.5,0 0,14 z"
+         inkscape:connector-curvature="0"
+         style="fill:#087fff;fill-opacity:1" />
+      <path
+         id="path4192"
+         d="M 0,0 24,0 24,24 0,24 Z"
+         inkscape:connector-curvature="0"
+         style="fill:none" />
+    </g>
+  </g>
+</svg>
diff --git a/packages/@vue/cli-plugin-pwa/ui.js b/packages/@vue/cli-plugin-pwa/ui.js
new file mode 100644
index 0000000000..53fe9a7b5d
--- /dev/null
+++ b/packages/@vue/cli-plugin-pwa/ui.js
@@ -0,0 +1,137 @@
+const path = require('path')
+const fs = require('fs')
+
+function readAppManifest (cwd) {
+  const manifestPath = path.join(cwd, 'public/manifest.json')
+  if (fs.existsSync(manifestPath)) {
+    try {
+      return JSON.parse(fs.readFileSync(manifestPath, { encoding: 'utf8' }))
+    } catch (e) {
+      console.log(`Can't read JSON in ${manifestPath}`)
+    }
+  }
+}
+
+function updateAppManifest (cwd, handler) {
+  const manifestPath = path.join(cwd, 'public/manifest.json')
+  if (fs.existsSync(manifestPath)) {
+    try {
+      const manifest = JSON.parse(fs.readFileSync(manifestPath, { encoding: 'utf8' }))
+      handler(manifest)
+      fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2), { encoding: 'utf8' })
+    } catch (e) {
+      console.log(`Can't update JSON in ${manifestPath}`)
+    }
+  }
+}
+
+module.exports = api => {
+  // Config file
+  api.describeConfig({
+    id: 'pwa',
+    name: 'PWA',
+    description: 'pwa.config.pwa.description',
+    link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa#configuration',
+    icon: 'mobile.xm',
+    files: {
+      js: ['vue.config.js']
+    },
+    onRead: ({ data, cwd }) => {
+      const manifest = readAppManifest(cwd)
+      return {
+        prompts: [
+          {
+            name: 'workboxPluginMode',
+            type: 'list',
+            message: 'pwa.config.pwa.workboxPluginMode.message',
+            description: 'pwa.config.pwa.workboxPluginMode.description',
+            link: 'https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#which_plugin_to_use',
+            default: 'GenerateSW',
+            value: data.pwa && data.pwa.workboxPluginMode,
+            choices: [
+              {
+                name: 'GenerateSW',
+                value: 'GenerateSW'
+              },
+              {
+                name: 'InjectManifest',
+                value: 'InjectManifest'
+              }
+            ]
+          },
+          {
+            name: 'name',
+            type: 'input',
+            message: 'pwa.config.pwa.name.message',
+            description: 'pwa.config.pwa.name.description',
+            value: data.pwa && data.pwa.name
+          },
+          {
+            name: 'themeColor',
+            type: 'color',
+            message: 'pwa.config.pwa.themeColor.message',
+            description: 'pwa.config.pwa.themeColor.description',
+            default: '#4DBA87',
+            value: data.pwa && data.pwa.themeColor
+          },
+          {
+            name: 'backgroundColor',
+            type: 'color',
+            message: 'pwa.config.pwa.backgroundColor.message',
+            description: 'pwa.config.pwa.backgroundColor.description',
+            default: '#000000',
+            value: manifest && manifest.background_color,
+            skipSave: true
+          },
+          {
+            name: 'msTileColor',
+            type: 'color',
+            message: 'pwa.config.pwa.msTileColor.message',
+            description: 'pwa.config.pwa.msTileColor.description',
+            default: '#000000',
+            value: data.pwa && data.pwa.msTileColor
+          },
+          {
+            name: 'appleMobileWebAppStatusBarStyle',
+            type: 'input',
+            message: 'pwa.config.pwa.appleMobileWebAppStatusBarStyle.message',
+            description: 'pwa.config.pwa.appleMobileWebAppStatusBarStyle.description',
+            default: 'default',
+            value: data.pwa && data.pwa.appleMobileWebAppStatusBarStyle
+          }
+        ]
+      }
+    },
+    onWrite: async ({ api, prompts, cwd }) => {
+      const result = {}
+      for (const prompt of prompts.filter(p => !p.raw.skipSave)) {
+        result[`pwa.${prompt.id}`] = await api.getAnswer(prompt.id)
+      }
+      api.setData(result)
+
+      // Update app manifest
+
+      const name = result['pwa.name']
+      if (name) {
+        updateAppManifest(cwd, manifest => {
+          manifest.name = name
+          manifest.short_name = name
+        })
+      }
+
+      const themeColor = result['pwa.themeColor']
+      if (themeColor) {
+        updateAppManifest(cwd, manifest => {
+          manifest.theme_color = themeColor
+        })
+      }
+
+      const backgroundColor = await api.getAnswer('backgroundColor')
+      if (backgroundColor) {
+        updateAppManifest(cwd, manifest => {
+          manifest.background_color = backgroundColor
+        })
+      }
+    }
+  })
+}
diff --git a/packages/@vue/cli-plugin-typescript/generator/template/tsconfig.json b/packages/@vue/cli-plugin-typescript/generator/template/tsconfig.json
index 13d27e8454..4d4e0c3668 100644
--- a/packages/@vue/cli-plugin-typescript/generator/template/tsconfig.json
+++ b/packages/@vue/cli-plugin-typescript/generator/template/tsconfig.json
@@ -24,7 +24,13 @@
       "@/*": [
         "src/*"
       ]
-    }
+    },
+    "lib": [
+      "es2015",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
   },
   "include": [
     "src/**/*.ts",
diff --git a/packages/@vue/cli-plugin-typescript/logo.png b/packages/@vue/cli-plugin-typescript/logo.png
new file mode 100644
index 0000000000..b95840b840
Binary files /dev/null and b/packages/@vue/cli-plugin-typescript/logo.png differ
diff --git a/packages/@vue/cli-plugin-unit-jest/logo.png b/packages/@vue/cli-plugin-unit-jest/logo.png
new file mode 100644
index 0000000000..58efdf1340
Binary files /dev/null and b/packages/@vue/cli-plugin-unit-jest/logo.png differ
diff --git a/packages/@vue/cli-plugin-unit-mocha/logo.png b/packages/@vue/cli-plugin-unit-mocha/logo.png
new file mode 100644
index 0000000000..4110447e2c
Binary files /dev/null and b/packages/@vue/cli-plugin-unit-mocha/logo.png differ
diff --git a/packages/@vue/cli-service/generator/index.js b/packages/@vue/cli-service/generator/index.js
index 656ff788b0..f70efa040b 100644
--- a/packages/@vue/cli-service/generator/index.js
+++ b/packages/@vue/cli-service/generator/index.js
@@ -3,13 +3,7 @@ module.exports = (api, options) => {
 
   api.extendPackage({
     scripts: {
-      'serve': 'vue-cli-service serve' + (
-        // only auto open browser on MacOS where applescript
-        // can avoid dupilcate window opens
-        process.platform === 'darwin'
-          ? ' --open'
-          : ''
-      ),
+      'serve': 'vue-cli-service serve',
       'build': 'vue-cli-service build'
     },
     dependencies: {
diff --git a/packages/@vue/cli-service/lib/commands/build/index.js b/packages/@vue/cli-service/lib/commands/build/index.js
index c4fab14408..2f0c6645f5 100644
--- a/packages/@vue/cli-service/lib/commands/build/index.js
+++ b/packages/@vue/cli-service/lib/commands/build/index.js
@@ -127,6 +127,14 @@ module.exports = (api, options) => {
 
     await fs.remove(targetDir)
 
+    // Expose advanced stats
+    if (args.dashboard) {
+      const DashboardPlugin = require('../../webpack/DashboardPlugin')
+      ;(webpackConfig.plugins = webpackConfig.plugins || []).push(new DashboardPlugin({
+        type: 'build'
+      }))
+    }
+
     return new Promise((resolve, reject) => {
       webpack(webpackConfig, (err, stats) => {
         stopSpinner(false)
diff --git a/packages/@vue/cli-service/lib/commands/serve.js b/packages/@vue/cli-service/lib/commands/serve.js
index 5d3f5b0a21..2ac7a84ada 100644
--- a/packages/@vue/cli-service/lib/commands/serve.js
+++ b/packages/@vue/cli-service/lib/commands/serve.js
@@ -1,7 +1,8 @@
 const {
   info,
   hasYarn,
-  openBrowser
+  openBrowser,
+  IpcMessenger
 } = require('@vue/cli-shared-utils')
 
 const defaults = {
@@ -42,6 +43,15 @@ module.exports = (api, options) => {
     // resolve webpack config
     const webpackConfig = api.resolveWebpackConfig()
 
+    // expose advanced stats
+    if (args.dashboard) {
+      const DashboardPlugin = require('../webpack/DashboardPlugin')
+      ;(webpackConfig.plugins = webpackConfig.plugins || []).push(new DashboardPlugin({
+        type: 'serve'
+      }))
+    }
+
+    // entry arg
     const entry = args._[0]
     if (entry) {
       webpackConfig.entry = {
@@ -174,6 +184,17 @@ module.exports = (api, options) => {
             openBrowser(urls.localUrlForBrowser)
           }
 
+          // Send final app URL
+          if (args.dashboard) {
+            const ipc = new IpcMessenger()
+            ipc.connect()
+            ipc.send({
+              vueServe: {
+                url: urls.localUrlForBrowser
+              }
+            })
+          }
+
           // resolve returned Promise
           // so other commands can do api.service.run('serve').then(...)
           resolve({
diff --git a/packages/@vue/cli-service/lib/config/dev.js b/packages/@vue/cli-service/lib/config/dev.js
index 8425d401ac..d14ef08e82 100644
--- a/packages/@vue/cli-service/lib/config/dev.js
+++ b/packages/@vue/cli-service/lib/config/dev.js
@@ -7,7 +7,7 @@ module.exports = (api, options) => {
       webpackConfig
         .devtool('cheap-module-eval-source-map')
         .output
-          .publicPath('/')
+          .publicPath(options.devBaseUrl || '/')
 
       webpackConfig
         .plugin('hmr')
diff --git a/packages/@vue/cli-service/lib/options.js b/packages/@vue/cli-service/lib/options.js
index 1891de2195..0072969719 100644
--- a/packages/@vue/cli-service/lib/options.js
+++ b/packages/@vue/cli-service/lib/options.js
@@ -2,6 +2,7 @@ const { createSchema, validate } = require('@vue/cli-shared-utils')
 
 const schema = createSchema(joi => joi.object({
   baseUrl: joi.string(),
+  devBaseUrl: joi.string(),
   outputDir: joi.string(),
   assetsDir: joi.string(),
   compiler: joi.boolean(),
diff --git a/packages/@vue/cli-service/lib/webpack/DashboardPlugin.js b/packages/@vue/cli-service/lib/webpack/DashboardPlugin.js
new file mode 100644
index 0000000000..91074b091a
--- /dev/null
+++ b/packages/@vue/cli-service/lib/webpack/DashboardPlugin.js
@@ -0,0 +1,189 @@
+// From https://github.com/FormidableLabs/webpack-dashboard/blob/7f99b31c5f00a7818d8129cb8a8fc6eb1b71799c/plugin/index.js
+// Modified by Guillaume Chau (Akryum)
+
+/* eslint-disable max-params, max-statements */
+'use strict'
+
+const path = require('path')
+const webpack = require('webpack')
+const { IpcMessenger } = require('@vue/cli-shared-utils')
+const { analyzeBundle } = require('./analyzeBundle')
+
+const ID = 'DashboardPlugin'
+const ONE_SECOND = 1000
+const FILENAME_QUERY_REGEXP = /\?.*$/
+
+const ipc = new IpcMessenger()
+
+function getTimeMessage (timer) {
+  let time = Date.now() - timer
+
+  if (time >= ONE_SECOND) {
+    time /= ONE_SECOND
+    time = Math.round(time)
+    time += 's'
+  } else {
+    time += 'ms'
+  }
+
+  return ` (${time})`
+}
+
+class DashboardPlugin {
+  constructor (options) {
+    this.type = options.type
+    this.watching = false
+  }
+
+  cleanup () {
+    this.sendData = null
+    ipc.disconnect()
+  }
+
+  apply (compiler) {
+    let sendData = this.sendData
+    let timer
+
+    let assetSources = new Map()
+
+    if (!sendData) {
+      ipc.connect()
+      sendData = data => ipc.send({
+        webpackDashboardData: {
+          type: this.type,
+          value: data
+        }
+      })
+    }
+
+    // Progress status
+    let progressTime = Date.now()
+    const progressPlugin = new webpack.ProgressPlugin((percent, msg) => {
+      // Debouncing
+      const time = Date.now()
+      if (time - progressTime > 100) {
+        progressTime = time
+        sendData([
+          {
+            type: 'status',
+            value: 'Compiling'
+          },
+          {
+            type: 'progress',
+            value: percent
+          },
+          {
+            type: 'operations',
+            value: msg + getTimeMessage(timer)
+          }
+        ])
+      }
+    })
+    progressPlugin.apply(compiler)
+
+    compiler.hooks.watchRun.tap(ID, c => {
+      this.watching = true
+    })
+
+    compiler.hooks.run.tap(ID, c => {
+      this.watching = false
+    })
+
+    compiler.hooks.compile.tap(ID, () => {
+      timer = Date.now()
+
+      sendData([
+        {
+          type: 'status',
+          value: 'Compiling'
+        }
+      ])
+    })
+
+    compiler.hooks.invalid.tap(ID, () => {
+      sendData([
+        {
+          type: 'status',
+          value: 'Invalidated'
+        },
+        {
+          type: 'progress',
+          value: 0
+        },
+        {
+          type: 'operations',
+          value: 'idle'
+        }
+      ])
+    })
+
+    compiler.hooks.failed.tap(ID, () => {
+      sendData([
+        {
+          type: 'status',
+          value: 'Failed'
+        },
+        {
+          type: 'operations',
+          value: `idle${getTimeMessage(timer)}`
+        }
+      ])
+    })
+
+    compiler.hooks.afterEmit.tap(ID, compilation => {
+      assetSources = new Map()
+      for (const name in compilation.assets) {
+        const asset = compilation.assets[name]
+        assetSources.set(name.replace(FILENAME_QUERY_REGEXP, ''), asset.source())
+      }
+    })
+
+    compiler.hooks.done.tap(ID, stats => {
+      let statsData = stats.toJson()
+      // Sometimes all the information is located in `children` array
+      if ((!statsData.assets || !statsData.assets.length) && statsData.children && statsData.children.length) {
+        statsData = statsData.children[0]
+      }
+
+      const outputPath = compiler.options.output.path
+      statsData.assets.forEach(asset => {
+        // Removing query part from filename (yes, somebody uses it for some reason and Webpack supports it)
+        asset.name = asset.name.replace(FILENAME_QUERY_REGEXP, '')
+        asset.fullPath = path.join(outputPath, asset.name)
+      })
+      // Analyze the assets and update sizes on assets and modules
+      analyzeBundle(statsData, assetSources)
+
+      const hasErrors = stats.hasErrors()
+
+      sendData([
+        {
+          type: 'status',
+          value: hasErrors ? 'Failed' : 'Success'
+        },
+        {
+          type: 'progress',
+          value: 0
+        },
+        {
+          type: 'operations',
+          value: `idle${getTimeMessage(timer)}`
+        },
+        {
+          type: 'stats',
+          value: {
+            errors: hasErrors,
+            warnings: stats.hasWarnings(),
+            data: statsData
+          }
+        }
+      ])
+
+      if (!this.watching) {
+        this.cleanup()
+      }
+    })
+  }
+}
+
+module.exports = DashboardPlugin
diff --git a/packages/@vue/cli-service/lib/webpack/analyzeBundle.js b/packages/@vue/cli-service/lib/webpack/analyzeBundle.js
new file mode 100644
index 0000000000..3c48fa2573
--- /dev/null
+++ b/packages/@vue/cli-service/lib/webpack/analyzeBundle.js
@@ -0,0 +1,328 @@
+// From https://github.com/webpack-contrib/webpack-bundle-analyzer/blob/ba3dbd71cec7becec0fbf529833204425f66efde/src/parseUtils.js
+// Modified by Guillaume Chau (Akryum)
+
+const acorn = require('acorn')
+const walk = require('acorn/dist/walk')
+const mapValues = require('lodash.mapvalues')
+const transform = require('lodash.transform')
+const zlib = require('zlib')
+const { warn } = require('@vue/cli-shared-utils')
+
+exports.analyzeBundle = function analyzeBundle (bundleStats, assetSources) {
+  // Picking only `*.js` assets from bundle that has non-empty `chunks` array
+  const jsAssets = []
+  const otherAssets = []
+
+  // Separate JS assets
+  bundleStats.assets.forEach(asset => {
+    if (asset.name.endsWith('.js') && asset.chunks && asset.chunks.length) {
+      jsAssets.push(asset)
+    } else {
+      otherAssets.push(asset)
+    }
+  })
+
+  // Trying to parse bundle assets and get real module sizes
+  let bundlesSources = null
+  let parsedModules = null
+
+  bundlesSources = {}
+  parsedModules = {}
+
+  for (const asset of jsAssets) {
+    const source = assetSources.get(asset.name)
+    let bundleInfo
+
+    try {
+      bundleInfo = parseBundle(source)
+    } catch (err) {
+      bundleInfo = null
+    }
+
+    if (!bundleInfo) {
+      warn(
+        `\nCouldn't parse bundle asset "${asset.fullPath}".\n` +
+        'Analyzer will use module sizes from stats file.\n'
+      )
+      parsedModules = null
+      bundlesSources = null
+      break
+    }
+
+    bundlesSources[asset.name] = bundleInfo.src
+    Object.assign(parsedModules, bundleInfo.modules)
+  }
+
+  // Update sizes
+
+  bundleStats.modules.forEach(module => {
+    const parsedSrc = parsedModules && parsedModules[module.id]
+    module.size = {
+      stats: module.size
+    }
+    if (parsedSrc) {
+      module.size.parsed = parsedSrc.length
+      module.size.gzip = getGzipSize(parsedSrc)
+    } else {
+      module.size.parsed = module.size.stats
+      module.size.gzip = 0
+    }
+  })
+
+  jsAssets.forEach(asset => {
+    const src = bundlesSources && bundlesSources[asset.name]
+    asset.size = {
+      stats: asset.size
+    }
+    if (src) {
+      asset.size.parsed = src.length
+      asset.size.gzip = getGzipSize(src)
+    } else {
+      asset.size.parsed = asset.size.stats
+      asset.size.gzip = 0
+    }
+  }, {})
+
+  otherAssets.forEach(asset => {
+    const src = assetSources.get(asset.name)
+    asset.size = {
+      stats: asset.size,
+      parsed: asset.size
+    }
+    if (src) {
+      asset.size.gzip = getGzipSize(src)
+    } else {
+      asset.size.gzip = 0
+    }
+  })
+}
+
+function parseBundle (bundleContent) {
+  const ast = acorn.parse(bundleContent, {
+    sourceType: 'script',
+    // I believe in a bright future of ECMAScript!
+    // Actually, it's set to `2050` to support the latest ECMAScript version that currently exists.
+    // Seems like `acorn` supports such weird option value.
+    ecmaVersion: 2050
+  })
+
+  const walkState = {
+    locations: null
+  }
+
+  walk.recursive(
+    ast,
+    walkState,
+    {
+      CallExpression (node, state, c) {
+        if (state.sizes) return
+
+        const args = node.arguments
+
+        // Additional bundle without webpack loader.
+        // Modules are stored in second argument, after chunk ids:
+        // webpackJsonp([<chunks>], <modules>, ...)
+        // As function name may be changed with `output.jsonpFunction` option we can't rely on it's default name.
+        if (
+          node.callee.type === 'Identifier' &&
+          args.length >= 2 &&
+          isArgumentContainsChunkIds(args[0]) &&
+          isArgumentContainsModulesList(args[1])
+        ) {
+          state.locations = getModulesLocationFromFunctionArgument(args[1])
+          return
+        }
+
+        // Additional bundle without webpack loader, with module IDs optimized.
+        // Modules are stored in second arguments Array(n).concat() call
+        // webpackJsonp([<chunks>], Array([minimum ID]).concat([<module>, <module>, ...]))
+        // As function name may be changed with `output.jsonpFunction` option we can't rely on it's default name.
+        if (
+          node.callee.type === 'Identifier' &&
+          (args.length === 2 || args.length === 3) &&
+          isArgumentContainsChunkIds(args[0]) &&
+          isArgumentArrayConcatContainingChunks(args[1])
+        ) {
+          state.locations = getModulesLocationFromArrayConcat(args[1])
+          return
+        }
+
+        // Main bundle with webpack loader
+        // Modules are stored in first argument:
+        // (function (...) {...})(<modules>)
+        if (
+          node.callee.type === 'FunctionExpression' &&
+          !node.callee.id &&
+          args.length === 1 &&
+          isArgumentContainsModulesList(args[0])
+        ) {
+          state.locations = getModulesLocationFromFunctionArgument(args[0])
+          return
+        }
+
+        // Additional bundles with webpack 4 are loaded with:
+        // (window.webpackJsonp=window.webpackJsonp||[]).push([[chunkId], [<module>, <module>], [[optional_entries]]]);
+        if (
+          isWindowPropertyPushExpression(node) &&
+          args.length === 1 &&
+          isArgumentContainingChunkIdsAndModulesList(args[0])
+        ) {
+          state.locations = getModulesLocationFromFunctionArgument(args[0].elements[1])
+          return
+        }
+
+        // Walking into arguments because some of plugins (e.g. `DedupePlugin`) or some Webpack
+        // features (e.g. `umd` library output) can wrap modules list into additional IIFE.
+        args.forEach(arg => c(arg, state))
+      }
+    }
+  )
+
+  if (!walkState.locations) {
+    return null
+  }
+
+  return {
+    src: bundleContent,
+    modules: mapValues(walkState.locations,
+      loc => bundleContent.slice(loc.start, loc.end)
+    )
+  }
+}
+
+function getGzipSize (buffer) {
+  return zlib.gzipSync(buffer).length
+}
+
+function isArgumentContainsChunkIds (arg) {
+  // Array of numeric or string ids. Chunk IDs are strings when NamedChunksPlugin is used
+  return (arg.type === 'ArrayExpression' && arg.elements.every(isModuleId))
+}
+
+function isArgumentContainsModulesList (arg) {
+  if (arg.type === 'ObjectExpression') {
+    return arg.properties
+      .map(arg => arg.value)
+      .every(isModuleWrapper)
+  }
+
+  if (arg.type === 'ArrayExpression') {
+    // Modules are contained in array.
+    // Array indexes are module ids
+    return arg.elements.every(elem =>
+      // Some of array items may be skipped because there is no module with such id
+      !elem ||
+      isModuleWrapper(elem)
+    )
+  }
+
+  return false
+}
+
+function isArgumentContainingChunkIdsAndModulesList (arg) {
+  if (
+    arg.type === 'ArrayExpression' &&
+    arg.elements.length >= 2 &&
+    isArgumentContainsChunkIds(arg.elements[0]) &&
+    isArgumentContainsModulesList(arg.elements[1])
+  ) {
+    return true
+  }
+  return false
+}
+
+function isArgumentArrayConcatContainingChunks (arg) {
+  if (
+    arg.type === 'CallExpression' &&
+    arg.callee.type === 'MemberExpression' &&
+    // Make sure the object called is `Array(<some number>)`
+    arg.callee.object.type === 'CallExpression' &&
+    arg.callee.object.callee.type === 'Identifier' &&
+    arg.callee.object.callee.name === 'Array' &&
+    arg.callee.object.arguments.length === 1 &&
+    isNumericId(arg.callee.object.arguments[0]) &&
+    // Make sure the property X called for `Array(<some number>).X` is `concat`
+    arg.callee.property.type === 'Identifier' &&
+    arg.callee.property.name === 'concat' &&
+    // Make sure exactly one array is passed in to `concat`
+    arg.arguments.length === 1 &&
+    arg.arguments[0].type === 'ArrayExpression'
+  ) {
+    // Modules are contained in `Array(<minimum ID>).concat(` array:
+    // https://github.com/webpack/webpack/blob/v1.14.0/lib/Template.js#L91
+    // The `<minimum ID>` + array indexes are module ids
+    return true
+  }
+
+  return false
+}
+
+function isWindowPropertyPushExpression (node) {
+  return node.callee.type === 'MemberExpression' &&
+    node.callee.property.name === 'push' &&
+    node.callee.object.type === 'AssignmentExpression' &&
+    node.callee.object.left.object.name === 'window'
+}
+
+function isModuleWrapper (node) {
+  return (
+    // It's an anonymous function expression that wraps module
+    ((node.type === 'FunctionExpression' || node.type === 'ArrowFunctionExpression') && !node.id) ||
+    // If `DedupePlugin` is used it can be an ID of duplicated module...
+    isModuleId(node) ||
+    // or an array of shape [<module_id>, ...args]
+    (node.type === 'ArrayExpression' && node.elements.length > 1 && isModuleId(node.elements[0]))
+  )
+}
+
+function isModuleId (node) {
+  return (node.type === 'Literal' && (isNumericId(node) || typeof node.value === 'string'))
+}
+
+function isNumericId (node) {
+  return (node.type === 'Literal' && Number.isInteger(node.value) && node.value >= 0)
+}
+
+function getModulesLocationFromFunctionArgument (arg) {
+  if (arg.type === 'ObjectExpression') {
+    const modulesNodes = arg.properties
+
+    return transform(modulesNodes, (result, moduleNode) => {
+      const moduleId = moduleNode.key.name || moduleNode.key.value
+
+      result[moduleId] = getModuleLocation(moduleNode.value)
+    }, {})
+  }
+
+  if (arg.type === 'ArrayExpression') {
+    const modulesNodes = arg.elements
+
+    return transform(modulesNodes, (result, moduleNode, i) => {
+      if (!moduleNode) return
+
+      result[i] = getModuleLocation(moduleNode)
+    }, {})
+  }
+
+  return {}
+}
+
+function getModulesLocationFromArrayConcat (arg) {
+  // arg(CallExpression) =
+  //   Array([minId]).concat([<minId module>, <minId+1 module>, ...])
+  //
+  // Get the [minId] value from the Array() call first argument literal value
+  const minId = arg.callee.object.arguments[0].value
+  // The modules reside in the `concat()` function call arguments
+  const modulesNodes = arg.arguments[0].elements
+
+  return transform(modulesNodes, (result, moduleNode, i) => {
+    if (!moduleNode) return
+
+    result[i + minId] = getModuleLocation(moduleNode)
+  }, {})
+}
+
+function getModuleLocation (node) {
+  return { start: node.start, end: node.end }
+}
diff --git a/packages/@vue/cli-service/package.json b/packages/@vue/cli-service/package.json
index 17776b1512..55a31b8f6d 100644
--- a/packages/@vue/cli-service/package.json
+++ b/packages/@vue/cli-service/package.json
@@ -24,6 +24,7 @@
     "@vue/cli-overlay": "^3.0.0-beta.11",
     "@vue/cli-shared-utils": "^3.0.0-beta.11",
     "@vue/web-component-wrapper": "^1.2.0",
+    "acorn": "^5.5.3",
     "address": "^1.0.3",
     "autoprefixer": "^8.4.1",
     "cache-loader": "^1.2.2",
@@ -41,6 +42,8 @@
     "html-webpack-plugin": "^3.2.0",
     "launch-editor-middleware": "^2.2.1",
     "lodash.defaultsdeep": "^4.6.0",
+    "lodash.mapvalues": "^4.6.0",
+    "lodash.transform": "^4.6.0",
     "mini-css-extract-plugin": "^0.4.0",
     "minimist": "^1.2.0",
     "optimize-css-assets-webpack-plugin": "^4.0.1",
diff --git a/packages/@vue/cli-service/ui.js b/packages/@vue/cli-service/ui.js
new file mode 100644
index 0000000000..4a4bf18085
--- /dev/null
+++ b/packages/@vue/cli-service/ui.js
@@ -0,0 +1,265 @@
+const { openBrowser } = require('@vue/cli-shared-utils')
+
+module.exports = api => {
+  const { setSharedData, getSharedData, removeSharedData, onAction } = api.namespace('webpack-dashboard-')
+
+  function resetSharedData (key) {
+    setSharedData(`${key}-status`, null)
+    setSharedData(`${key}-progress`, 0)
+    setSharedData(`${key}-operations`, null)
+    setSharedData(`${key}-stats`, null)
+    setSharedData(`${key}-sizes`, null)
+    setSharedData(`${key}-problems`, null)
+  }
+
+  function onWebpackMessage ({ data: message }) {
+    if (message.webpackDashboardData) {
+      const type = message.webpackDashboardData.type
+      for (const data of message.webpackDashboardData.value) {
+        setSharedData(`${type}-${data.type}`, data.value)
+      }
+    }
+  }
+
+  // Init data
+  api.onProjectOpen(() => {
+    for (const key of ['serve', 'build']) {
+      resetSharedData(key)
+    }
+  })
+
+  // Tasks
+  const views = {
+    views: [
+      {
+        id: 'vue-webpack-dashboard',
+        label: 'vue-webpack.dashboard.title',
+        icon: 'dashboard',
+        component: 'vue-webpack-dashboard'
+      },
+      {
+        id: 'vue-webpack-analyzer',
+        label: 'vue-webpack.analyzer.title',
+        icon: 'donut_large',
+        component: 'vue-webpack-analyzer'
+      }
+    ],
+    defaultView: 'vue-webpack-dashboard'
+  }
+  api.describeTask({
+    match: /vue-cli-service serve/,
+    description: 'vue-webpack.tasks.serve.description',
+    link: 'https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#serve',
+    prompts: [
+      {
+        name: 'open',
+        type: 'confirm',
+        default: false,
+        description: 'vue-webpack.tasks.serve.open'
+      },
+      {
+        name: 'mode',
+        type: 'list',
+        default: 'development',
+        choices: [
+          {
+            name: 'development',
+            value: 'development'
+          },
+          {
+            name: 'production',
+            value: 'production'
+          },
+          {
+            name: 'test',
+            value: 'test'
+          }
+        ],
+        description: 'vue-webpack.tasks.serve.mode'
+      },
+      {
+        name: 'host',
+        type: 'input',
+        default: '0.0.0.0',
+        description: 'vue-webpack.tasks.serve.host'
+      },
+      {
+        name: 'port',
+        type: 'input',
+        default: 8080,
+        description: 'vue-webpack.tasks.serve.port'
+      },
+      {
+        name: 'https',
+        type: 'confirm',
+        default: false,
+        description: 'vue-webpack.tasks.serve.https'
+      }
+    ],
+    onBeforeRun: ({ answers, args }) => {
+      // Args
+      if (answers.open) args.push('--open')
+      if (answers.mode) args.push('--mode', answers.mode)
+      if (answers.host) args.push('--host', answers.host)
+      if (answers.port) args.push('--port', answers.port)
+      if (answers.https) args.push('--https')
+      args.push('--dashboard')
+
+      // Data
+      resetSharedData('serve')
+      removeSharedData('serve-url')
+    },
+    onRun: () => {
+      api.ipcOn(onWebpackMessage)
+    },
+    onExit: () => {
+      api.ipcOff(onWebpackMessage)
+      removeSharedData('serve-url')
+    },
+    ...views
+  })
+  api.describeTask({
+    match: /vue-cli-service build/,
+    description: 'vue-webpack.tasks.build.description',
+    link: 'https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#build',
+    prompts: [
+      {
+        name: 'mode',
+        type: 'list',
+        default: 'production',
+        choices: [
+          {
+            name: 'development',
+            value: 'development'
+          },
+          {
+            name: 'production',
+            value: 'production'
+          },
+          {
+            name: 'test',
+            value: 'test'
+          }
+        ],
+        description: 'vue-webpack.tasks.build.mode'
+      },
+      {
+        name: 'dest',
+        type: 'input',
+        default: 'dist',
+        description: 'vue-webpack.tasks.build.dest'
+      },
+      {
+        name: 'target',
+        type: 'list',
+        default: 'app',
+        choices: [
+          {
+            name: 'vue-webpack.tasks.build.target.app',
+            value: 'app'
+          },
+          {
+            name: 'vue-webpack.tasks.build.target.lib',
+            value: 'lib'
+          },
+          {
+            name: 'vue-webpack.tasks.build.target.wc',
+            value: 'wc'
+          },
+          {
+            name: 'vue-webpack.tasks.build.wc-async',
+            value: 'wc-async'
+          }
+        ],
+        description: 'vue-webpack.tasks.build.description'
+      },
+      {
+        name: 'name',
+        type: 'input',
+        default: '',
+        description: 'vue-webpack.tasks.build.name'
+      },
+      {
+        name: 'watch',
+        type: 'confirm',
+        default: false,
+        description: 'vue-webpack.tasks.build.watch'
+      }
+    ],
+    onBeforeRun: ({ answers, args }) => {
+      // Args
+      if (answers.mode) args.push('--mode', answers.mode)
+      if (answers.dest) args.push('--dest', answers.dest)
+      if (answers.target) args.push('--target', answers.target)
+      if (answers.name) args.push('--port', answers.name)
+      if (answers.watch) args.push('--watch')
+      args.push('--dashboard')
+
+      // Data
+      resetSharedData('build')
+    },
+    onRun: () => {
+      api.ipcOn(onWebpackMessage)
+    },
+    onExit: () => {
+      api.ipcOff(onWebpackMessage)
+    },
+    ...views
+  })
+  // vue inspect
+  api.addTask({
+    name: 'inspect',
+    command: 'vue-cli-service inspect',
+    description: 'vue-webpack.tasks.inspect.description',
+    link: 'https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md#inspecting-the-projects-webpack-config',
+    prompts: [
+      {
+        name: 'mode',
+        type: 'list',
+        default: 'production',
+        choices: [
+          {
+            name: 'development',
+            value: 'development'
+          },
+          {
+            name: 'production',
+            value: 'production'
+          },
+          {
+            name: 'test',
+            value: 'test'
+          }
+        ],
+        description: 'vue-webpack.tasks.inspect.mode'
+      },
+      {
+        name: 'verbose',
+        type: 'confirm',
+        default: false,
+        description: 'vue-webpack.tasks.inspect.verbose'
+      }
+    ],
+    onBeforeRun: ({ answers, args }) => {
+      if (answers.mode) args.push('--mode', answers.mode)
+      if (answers.verbose) args.push('--verbose')
+    }
+  })
+
+  // Webpack dashboard
+  api.addClientAddon({
+    id: 'vue-webpack',
+    path: '@vue/cli-ui-addon-webpack/dist'
+  })
+
+  // Open app button
+  api.ipcOn(({ data }) => {
+    if (data.vueServe) {
+      setSharedData('serve-url', data.vueServe.url)
+    }
+  })
+  onAction('open-app', () => {
+    const url = getSharedData('serve-url')
+    url && openBrowser(url.value)
+  })
+}
diff --git a/packages/@vue/cli-shared-utils/index.js b/packages/@vue/cli-shared-utils/index.js
index 1da349feed..1de12fc28a 100644
--- a/packages/@vue/cli-shared-utils/index.js
+++ b/packages/@vue/cli-shared-utils/index.js
@@ -1,11 +1,14 @@
 [
   'env',
+  'exit',
+  'ipc',
   'cache',
   'logger',
-  'spinner',
-  'validate',
   'openBrowser',
-  'pluginResolution'
+  'pluginResolution',
+  'request',
+  'spinner',
+  'validate'
 ].forEach(m => {
   Object.assign(exports, require(`./lib/${m}`))
 })
diff --git a/packages/@vue/cli-shared-utils/lib/exit.js b/packages/@vue/cli-shared-utils/lib/exit.js
new file mode 100644
index 0000000000..f33383181a
--- /dev/null
+++ b/packages/@vue/cli-shared-utils/lib/exit.js
@@ -0,0 +1,9 @@
+exports.exitProcess = true
+
+exports.exit = function (code) {
+  if (exports.exitProcess) {
+    process.exit(code)
+  } else if (code > 0) {
+    throw new Error(`Process exited with code ${code}`)
+  }
+}
diff --git a/packages/@vue/cli-shared-utils/lib/ipc.js b/packages/@vue/cli-shared-utils/lib/ipc.js
new file mode 100644
index 0000000000..bf46396977
--- /dev/null
+++ b/packages/@vue/cli-shared-utils/lib/ipc.js
@@ -0,0 +1,92 @@
+const ipc = require('node-ipc')
+
+exports.IpcMessenger = class IpcMessenger {
+  constructor (id = 'vue-cli') {
+    ipc.config.id = this.id = id
+    ipc.config.retry = 1500
+    ipc.config.silent = true
+
+    this.connected = false
+    this.connecting = false
+    this.disconnecting = false
+    this.queue = null
+
+    this.listeners = []
+
+    this.disconnectTimeout = 15000
+
+    // Prevent forced process exit
+    // (or else ipc messages may not be sent before kill)
+    process.exit = code => {
+      process.exitCode = code
+    }
+
+    this._reset()
+  }
+
+  send (data, type = 'message') {
+    if (this.connected) {
+      ipc.of[this.id].emit(type, data)
+    } else {
+      this.queue.push(data)
+    }
+  }
+
+  connect () {
+    if (this.connected || this.connecting) return
+    this.connecting = true
+    this.disconnecting = false
+    ipc.connectTo(this.id, () => {
+      this.connected = true
+      this.connecting = false
+      this.queue && this.queue.forEach(data => this.send(data))
+      this.queue = null
+
+      ipc.of[this.id].on('message', this._onMessage)
+    })
+  }
+
+  disconnect () {
+    if (!this.connected || this.disconnecting) return
+    this.disconnecting = true
+    this.connecting = false
+
+    const ipcTimer = setTimeout(() => {
+      this._disconnect()
+    }, this.disconnectTimeout)
+
+    this.send({ done: true }, 'ack')
+
+    ipc.of[this.id].on('ack', data => {
+      if (data.ok) {
+        clearTimeout(ipcTimer)
+        this._disconnect()
+      }
+    })
+  }
+
+  on (listener) {
+    this.listeners.push(listener)
+  }
+
+  off (listener) {
+    const index = this.listeners.indexOf(listener)
+    if (index !== -1) this.listeners.splice(index, 1)
+  }
+
+  _reset () {
+    this.queue = []
+    this.connected = false
+  }
+
+  _disconnect () {
+    this.connected = false
+    this.disconnecting = false
+    ipc.disconnect(this.id)
+    this._reset()
+  }
+
+  _onMessage (data) {
+    this.listeners.forEach(fn => fn(data))
+  }
+}
diff --git a/packages/@vue/cli-shared-utils/lib/logger.js b/packages/@vue/cli-shared-utils/lib/logger.js
index c03005c421..a1b1fa8faf 100644
--- a/packages/@vue/cli-shared-utils/lib/logger.js
+++ b/packages/@vue/cli-shared-utils/lib/logger.js
@@ -1,6 +1,19 @@
 const chalk = require('chalk')
 const readline = require('readline')
 const padStart = require('string.prototype.padstart')
+const EventEmitter = require('events')
+
+exports.events = new EventEmitter()
+
+function _log (type, tag, message) {
+  if (process.env.VUE_CLI_API_MODE && message) {
+    exports.events.emit('log', {
+      message,
+      type,
+      tag
+    })
+  }
+}
 
 const format = (label, msg) => {
   return msg.split('\n').map((line, i) => {
@@ -12,24 +25,32 @@ const format = (label, msg) => {
 
 const chalkTag = msg => chalk.bgBlackBright.white.dim(` ${msg} `)
 
-exports.log = (msg = '', tag = null) => tag ? console.log(format(chalkTag(tag), msg)) : console.log(msg)
+exports.log = (msg = '', tag = null) => {
+  tag ? console.log(format(chalkTag(tag), msg)) : console.log(msg)
+  _log('log', tag, msg)
+}
 
 exports.info = (msg, tag = null) => {
   console.log(format(chalk.bgBlue.black(' INFO ') + (tag ? chalkTag(tag) : ''), msg))
+  _log('info', tag, msg)
 }
 
 exports.done = (msg, tag = null) => {
   console.log(format(chalk.bgGreen.black(' DONE ') + (tag ? chalkTag(tag) : ''), msg))
+  _log('done', tag, msg)
 }
 
 exports.warn = (msg, tag = null) => {
   console.warn(format(chalk.bgYellow.black(' WARN ') + (tag ? chalkTag(tag) : ''), chalk.yellow(msg)))
+  _log('warn', tag, msg)
 }
 
 exports.error = (msg, tag = null) => {
   console.error(format(chalk.bgRed(' ERROR ') + (tag ? chalkTag(tag) : ''), chalk.red(msg)))
+  _log('error', tag, msg)
   if (msg instanceof Error) {
     console.error(msg.stack)
+    _log('error', tag, msg.stack)
   }
 }
 
diff --git a/packages/@vue/cli/lib/util/request.js b/packages/@vue/cli-shared-utils/lib/request.js
similarity index 83%
rename from packages/@vue/cli/lib/util/request.js
rename to packages/@vue/cli-shared-utils/lib/request.js
index f0a58f8813..32f127b7e3 100644
--- a/packages/@vue/cli/lib/util/request.js
+++ b/packages/@vue/cli-shared-utils/lib/request.js
@@ -1,7 +1,7 @@
 const request = require('request-promise-native')
 
-module.exports = {
-  async get (uri) {
+exports.request = {
+  get (uri) {
     const reqOpts = {
       method: 'GET',
       resolveWithFullResponse: true,
diff --git a/packages/@vue/cli-shared-utils/lib/validate.js b/packages/@vue/cli-shared-utils/lib/validate.js
index 3e61d53715..90871c9bad 100644
--- a/packages/@vue/cli-shared-utils/lib/validate.js
+++ b/packages/@vue/cli-shared-utils/lib/validate.js
@@ -1,4 +1,5 @@
 const joi = require('joi')
+const { exit } = require('./exit')
 
 // proxy to joi for option validation
 exports.createSchema = fn => fn(joi)
@@ -10,8 +11,15 @@ exports.validate = (obj, schema, cb) => {
       if (process.env.VUE_CLI_TEST) {
         throw err
       } else {
-        process.exit(1)
+        exit(1)
       }
     }
   })
 }
+
+exports.validateSync = (obj, schema) => {
+  const result = joi.validate(obj, schema)
+  if (result.error) {
+    throw result.error
+  }
+}
diff --git a/packages/@vue/cli-shared-utils/package.json b/packages/@vue/cli-shared-utils/package.json
index 1d68d04b83..17767d03d4 100644
--- a/packages/@vue/cli-shared-utils/package.json
+++ b/packages/@vue/cli-shared-utils/package.json
@@ -21,10 +21,13 @@
   "dependencies": {
     "chalk": "^2.3.0",
     "cmd-shim": "^2.0.2",
-    "execa": "^0.9.0",
+    "execa": "^0.10.0",
     "joi": "^12.0.0",
+    "node-ipc": "^9.1.1",
     "opn": "^5.2.0",
     "ora": "^1.3.0",
+    "request": "^2.83.0",
+    "request-promise-native": "^1.0.5",
     "string.prototype.padstart": "^3.0.0"
   },
   "publishConfig": {
diff --git a/packages/@vue/cli-ui-addon-webpack/.babelrc b/packages/@vue/cli-ui-addon-webpack/.babelrc
new file mode 100644
index 0000000000..2a818842cc
--- /dev/null
+++ b/packages/@vue/cli-ui-addon-webpack/.babelrc
@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "@vue/app"
+  ]
+}
diff --git a/packages/@vue/cli-ui-addon-webpack/.eslintrc.js b/packages/@vue/cli-ui-addon-webpack/.eslintrc.js
new file mode 100644
index 0000000000..3b48d235e8
--- /dev/null
+++ b/packages/@vue/cli-ui-addon-webpack/.eslintrc.js
@@ -0,0 +1,12 @@
+module.exports = {
+  root: true,
+  extends: [
+    'plugin:vue/essential',
+    '@vue/standard'
+  ],
+  globals: {
+    ClientAddonApi: false,
+    mapSharedData: false,
+    Vue: false
+  }
+}
diff --git a/packages/@vue/cli-ui-addon-webpack/.gitignore b/packages/@vue/cli-ui-addon-webpack/.gitignore
new file mode 100644
index 0000000000..d7efd2016c
--- /dev/null
+++ b/packages/@vue/cli-ui-addon-webpack/.gitignore
@@ -0,0 +1,20 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
diff --git a/packages/@vue/cli-ui-addon-webpack/.postcssrc b/packages/@vue/cli-ui-addon-webpack/.postcssrc
new file mode 100644
index 0000000000..ed0149bf8b
--- /dev/null
+++ b/packages/@vue/cli-ui-addon-webpack/.postcssrc
@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "autoprefixer": {}
+  }
+}
\ No newline at end of file
diff --git a/packages/@vue/cli-ui-addon-webpack/README.md b/packages/@vue/cli-ui-addon-webpack/README.md
new file mode 100644
index 0000000000..a6f257c8e7
--- /dev/null
+++ b/packages/@vue/cli-ui-addon-webpack/README.md
@@ -0,0 +1,8 @@
+# Webpack dashboard
+
+> Dashboard & analyzer components for @vue/cli-ui
+
+```
+yarn serve
+yarn build
+```
diff --git a/packages/@vue/cli-ui-addon-webpack/package.json b/packages/@vue/cli-ui-addon-webpack/package.json
new file mode 100644
index 0000000000..1722e7d6ef
--- /dev/null
+++ b/packages/@vue/cli-ui-addon-webpack/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "@vue/cli-ui-addon-webpack",
+  "version": "3.0.0-beta.11",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "prepublishOnly": "yarn run lint --no-fix && yarn run build"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.0.0-beta.11",
+    "@vue/cli-plugin-eslint": "^3.0.0-beta.11",
+    "@vue/cli-service": "^3.0.0-beta.11",
+    "@vue/eslint-config-standard": "^3.0.0-beta.11",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.1",
+    "vue-progress-path": "^0.0.2",
+    "vue-template-compiler": "^2.5.16",
+    "vuex": "^3.0.1"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}
diff --git a/packages/@vue/cli-ui-addon-webpack/public/.gitkeep b/packages/@vue/cli-ui-addon-webpack/public/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/@vue/cli-ui-addon-webpack/src/assets/speeds.json b/packages/@vue/cli-ui-addon-webpack/src/assets/speeds.json
new file mode 100644
index 0000000000..99cd1fd2d8
--- /dev/null
+++ b/packages/@vue/cli-ui-addon-webpack/src/assets/speeds.json
@@ -0,0 +1,14 @@
+{
+  "global": { "title": "Global Average", "mbps": 7, "rtt": 30 },
+  "edge":   { "title": "Mobile Edge", "mbps": 0.24, "rtt": 840 },
+  "2g":     { "title": "2G", "mbps": 0.28, "rtt": 800 },
+  "3gs":    { "title": "3G Slow", "mbps": 0.4, "rtt": 400 },
+  "3gb":    { "title": "3G Basic", "mbps": 1.6, "rtt": 300 },
+  "3gf":    { "title": "3G Fast", "mbps": 1.6, "rtt": 150 },
+  "4g":     { "title": "4G", "mbps": 9, "rtt": 170 },
+  "lte":    { "title": "LTE", "mbps": 12, "rtt": 70 },
+  "dup":    { "title": "Dial Up", "mbps": 0.05, "rtt": 120 },
+  "dsl":    { "title": "DSL", "mbps": 1.5, "rtt": 50 },
+  "cable":  { "title": "Cable", "mbps": 5, "rtt": 28 },
+  "fios":   { "title": "FIOS", "mbps": 20, "rtt": 4 }
+}
diff --git a/packages/@vue/cli-ui-addon-webpack/src/assets/webpack.svg b/packages/@vue/cli-ui-addon-webpack/src/assets/webpack.svg
new file mode 100644
index 0000000000..900e14eb27
--- /dev/null
+++ b/packages/@vue/cli-ui-addon-webpack/src/assets/webpack.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><title>icon-square-small</title><path fill="#FFF" d="M300 .1L565 150v299.9L300 599.8 35 449.9V150z"/><path fill="#8ED6FB" d="M517.7 439.5L308.8 557.8v-92L439 394.1l78.7 45.4zm14.3-12.9V179.4l-76.4 44.1v159l76.4 44.1zM81.5 439.5l208.9 118.2v-92l-130.2-71.6-78.7 45.4zm-14.3-12.9V179.4l76.4 44.1v159l-76.4 44.1zm8.9-263.2L290.4 42.2v89l-137.3 75.5-1.1.6-75.9-43.9zm446.9 0L308.8 42.2v89L446 206.8l1.1.6 75.9-44z"/><path fill="#1C78C0" d="M290.4 444.8L162 374.1V234.2l128.4 74.1v136.5zm18.4 0l128.4-70.6v-140l-128.4 74.1v136.5zM299.6 303zm-129-85l129-70.9L428.5 218l-128.9 74.4-129-74.4z"/></svg>
\ No newline at end of file
diff --git a/packages/@vue/cli-ui-addon-webpack/src/components/AssetList.vue b/packages/@vue/cli-ui-addon-webpack/src/components/AssetList.vue
new file mode 100644
index 0000000000..45f75394c1
--- /dev/null
+++ b/packages/@vue/cli-ui-addon-webpack/src/components/AssetList.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="asset-list list-block">
+    <div class="content">
+      <div class="title">
+        {{ $t('vue-webpack.dashboard.asset-list.title') }}
+      </div>
+
+      <VueIcon
+        v-if="!assetsSorted.length"
+        icon="more_horiz"
+        class="blank-icon"
+      />
+
+      <template v-else>
+        <div class="headers">
+          <div class="header"></div>
+          <div class="header size-field">{{ sizeField }}</div>
+          <div class="header">Global</div>
+          <div class="header">3G Slow</div>
+          <div class="header">3G Fast</div>
+          <div class="header"></div>
+        </div>
+
+        <div class="list">
+          <AssetListItem
+            v-for="asset of assetsSorted"
+            :key="asset.name"
+            :asset="asset"
+          />
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+import AssetListItem from './AssetListItem'
+
+export default {
+  components: {
+    AssetListItem
+  },
+
+  computed: {
+    ...mapGetters([
+      'assetsSorted',
+      'sizeField'
+    ])
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@vue/cli-ui/src/style/imports"
+
+.headers
+  display grid
+  grid-template-columns 5fr repeat(4, 1fr) 16px
+  grid-gap $padding-item
+  font-family $font-mono
+  font-size 12px
+  text-align right
+  margin-bottom $padding-item
+
+  .size-field
+    &:first-letter
+      text-transform uppercase
+</style>
diff --git a/packages/@vue/cli-ui-addon-webpack/src/components/AssetListItem.vue b/packages/@vue/cli-ui-addon-webpack/src/components/AssetListItem.vue
new file mode 100644
index 0000000000..d13d09120c
--- /dev/null
+++ b/packages/@vue/cli-ui-addon-webpack/src/components/AssetListItem.vue
@@ -0,0 +1,77 @@
+<template>
+  <div
+    :class="{
+      big: asset.big,
+      secondary: asset.secondary
+    }"
+    class="asset-list-item"
+  >
+    <div class="content">
+      <div class="info name">{{ asset.name }}</div>
+      <div class="info size">{{ asset.size | size('B') }}</div>
+      <div class="info speed global">{{ asset.speeds.global.totalDownloadTime | round(100) }}s</div>
+      <div class="info speed 3gs">{{ asset.speeds['3gs'].totalDownloadTime | round(100) }}s</div>
+      <div class="info speed 3gf">{{ asset.speeds['3gf'].totalDownloadTime | round(100) }}s</div>
+      <div class="info warning">
+        <VueIcon
+          v-if="!asset.secondary && asset.big"
+          icon="warning"
+          class="icon"
+          v-tooltip="$t('vue-webpack.dashboard.asset-list.size-warning')"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { size, round } from '../filters'
+
+export default {
+  filters: {
+    size,
+    round
+  },
+
+  props: {
+    asset: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@vue/cli-ui/src/style/imports"
+
+.asset-list-item
+  .content
+    display grid
+    grid-template-columns 5fr repeat(4, 1fr) 16px
+    grid-gap $padding-item
+    font-family $font-mono
+    font-size 12px
+
+  .info
+    display flex
+    align-items center
+
+  .name
+    word-break break-all
+
+  .size,
+  .speed
+    color $vue-ui-color-primary
+    justify-content flex-end
+
+  .icon
+    >>> svg
+      fill $vue-ui-color-primary
+
+  &.big
+    font-weight bold
+
+  &.secondary
+    opacity .5
+</style>
diff --git a/packages/@vue/cli-ui-addon-webpack/src/components/BuildProgress.vue b/packages/@vue/cli-ui-addon-webpack/src/components/BuildProgress.vue
new file mode 100644
index 0000000000..86affabb6a
--- /dev/null
+++ b/packages/@vue/cli-ui-addon-webpack/src/components/BuildProgress.vue
@@ -0,0 +1,159 @@
+<template>
+  <div class="build-progress">
+    <div class="content">
+      <loading-progress
+        :progress="progress"
+        size="128"
+        counter-clockwise
+      />
+
+      <div class="progress">
+        {{ typeof progress === 'number' ? Math.round(progress * 100) : 0 }}
+      </div>
+
+      <transition duration="500">
+        <div v-if="status === 'Success'" class="status-icon done">
+          <div class="wrapper">
+            <VueIcon icon="check_circle"/>
+          </div>
+        </div>
+      </transition>
+
+      <transition duration="500">
+        <div v-if="status === 'Failed'" class="status-icon error">
+          <div class="wrapper">
+            <VueIcon icon="error"/>
+          </div>
+        </div>
+      </transition>
+
+      <div class="operations">
+        <span v-if="operations">{{ operations }}</span>
+        <VueIcon
+          v-else
+          icon="more_horiz"
+          class="blank-icon"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  computed: {
+    ...mapGetters([
+      'mode'
+    ])
+  },
+
+  sharedData () {
+    return mapSharedData('webpack-dashboard-', {
+      status: `${this.mode}-status`,
+      progress: `${this.mode}-progress`,
+      operations: `${this.mode}-operations`
+    })
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@vue/cli-ui/src/style/imports"
+
+.build-progress
+  .content
+    v-box()
+    box-center()
+    position relative
+    height 100%
+
+    >>> > *
+      space-between-y($padding-item)
+
+  .vue-progress-path
+    >>> .background
+      stroke rgba($vue-ui-color-dark, .1)
+
+  .operations
+    color $vue-ui-color-dark
+    padding-bottom 12px
+    &:first-letter
+      text-transform uppercase
+
+  .progress,
+  .status-icon
+    h-box()
+    box-center()
+    flex none
+    position absolute
+    top 0
+    left 0
+    width 100%
+    height 178px
+
+  .progress
+    color lighten($vue-ui-color-dark, 60%)
+    font-weight lighter
+    font-size 42px
+
+  .status-icon
+    .wrapper
+      position relative
+      .vue-ui-icon
+        width 64px
+        height @width
+        position relative
+        z-index 2
+        display block
+      &::before,
+      &::after
+        display block
+        content ''
+        border-radius 50%
+        position absolute
+      &::before
+        top -36px
+        left @top
+        width 136px
+        height @width
+      &::after
+        background white
+        top 7px
+        left @top
+        width 50px
+        height @width
+        z-index 1
+    &.done
+      .wrapper::before
+        background $vue-ui-color-success
+      >>> svg
+        fill $vue-ui-color-success
+    &.error
+      .wrapper::before
+        background $vue-ui-color-danger
+      >>> svg
+        fill $vue-ui-color-danger
+    &.v-enter-active,
+    &.v-leave-active
+      transition transform .5s cubic-bezier(0, 1, .3, 1), opacity .2s
+      .wrapper::after
+        transition opacity .2s
+      .vue-ui-icon
+        transition opacity 0
+    &.v-enter-active
+      .wrapper::after,
+      .vue-ui-icon
+        transition-delay .3s
+    &.v-enter,
+    &.v-leave-to
+      transform scale(0)
+      .wrapper::after
+        opacity 0
+    &.v-enter
+      .vue-ui-icon
+        opacity 0
+    &.v-leave-to
+      opacity 0
+</style>
diff --git a/packages/@vue/cli-ui-addon-webpack/src/components/BuildStatus.vue b/packages/@vue/cli-ui-addon-webpack/src/components/BuildStatus.vue
new file mode 100644
index 0000000000..e1626f3c6a
--- /dev/null
+++ b/packages/@vue/cli-ui-addon-webpack/src/components/BuildStatus.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="build-status">
+    <div class="content">
+      <div class="info-block status">
+        <div class="label">
+          {{ $t('vue-webpack.dashboard.build-status.labels.status') }}
+        </div>
+        <div class="value">{{ $t(`vue-webpack.dashboard.webpack-status.${status || 'Idle'}`) }}</div>
+      </div>
+      <div class="info-block errors">
+        <div class="label">
+          {{ $t('vue-webpack.dashboard.build-status.labels.errors') }}
+        </div>
+        <div class="value">{{ errors.length }}</div>
+      </div>
+      <div class="info-block warnings">
+        <div class="label">
+          {{ $t('vue-webpack.dashboard.build-status.labels.warnings') }}
+        </div>
+        <div class="value">{{ warnings.length }}</div>
+      </div>
+      <div class="info-block assets">
+        <div class="label">
+          {{ $t('vue-webpack.dashboard.build-status.labels.assets') }}
+        </div>
+        <div class="value">
+          {{ assetsTotalSize | size('B') }}
+          <span class="secondary">
+            ({{ $t(`vue-webpack.sizes.${sizeField}`) }})
+          </span>
+        </div>
+      </div>
+      <div class="info-block modules">
+        <div class="label">
+          {{ $t('vue-webpack.dashboard.build-status.labels.modules') }}
+        </div>
+        <div class="value">
+          {{ modulesTotalSize | size('B') }}
+          <span class="secondary">
+            ({{ $t(`vue-webpack.sizes.${sizeField}`) }})
+          </span>
+        </div>
+      </div>
+      <div class="info-block dep-modules">
+        <div class="label">
+          {{ $t('vue-webpack.dashboard.build-status.labels.deps') }}
+        </div>
+        <div class="value">
+          {{ depModulesTotalSize | size('B') }}
+          <span class="secondary">
+            {{ depSizeRatio | round(100) }}%
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { size, round } from '../filters'
+
+export default {
+  filters: {
+    size,
+    round
+  },
+
+  computed: {
+    ...mapGetters([
+      'sizeField',
+      'mode',
+      'errors',
+      'warnings',
+      'assetsTotalSize',
+      'modulesTotalSize',
+      'depModulesTotalSize'
+    ]),
+
+    depSizeRatio () {
+      if (this.modulesTotalSize) {
+        return this.depModulesTotalSize / this.modulesTotalSize * 100
+      } else {
+        return 0
+      }
+    }
+  },
+
+  sharedData () {
+    return {
+      status: `webpack-dashboard-${this.mode}-status`
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@vue/cli-ui/src/style/imports"
+
+.build-status
+  .content
+    height 100%
+    display grid
+    grid-template-columns repeat(3, 1fr)
+    grid-gap $padding-item
+</style>
diff --git a/packages/@vue/cli-ui-addon-webpack/src/components/DonutModule.vue b/packages/@vue/cli-ui-addon-webpack/src/components/DonutModule.vue
new file mode 100644
index 0000000000..fc0bde2654
--- /dev/null
+++ b/packages/@vue/cli-ui-addon-webpack/src/components/DonutModule.vue
@@ -0,0 +1,152 @@
+<template>
+  <g
+    v-if="visible"
+    class="donut-module"
+    :class="{
+      hover
+    }"
+    :transform="`translate(-${size / 2}, -${size / 2}) rotate(${rotation}, ${size / 2}, ${size / 2})`"
+  >
+    <g class="container">
+      <path
+        ref="path"
+        class="progress"
+        :d="`M ${size / 2}, ${size / 2}
+        m 0, -${size / 2}
+        a ${size / 2},${size / 2} 0 1 1 0,${size}
+        a ${size / 2},${size / 2} 0 1 1 0,-${size}`"
+        :stroke-dasharray="`${finalDasharray - 0.25} ${finalDasharray - 0.25}`"
+        :stroke-dashoffset="finalDashoffset"
+        :stroke="stroke"
+      />
+    </g>
+
+    <g
+      v-if="depth + 1 < colors.length"
+      class="children"
+      :transform="`translate(${size / 2}, ${size / 2})`"
+    >
+      <DonutModule
+        v-for="module of module.children"
+        v-if="isVisible(getRatio(module, ratio))"
+        :key="module.id"
+        :module="module"
+        :depth="depth + 1"
+        :parent-ratio="ratio"
+        :colors="colors"
+      />
+    </g>
+  </g>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'DonutModule',
+
+  inject: [
+    'WebpackAnalyzer'
+  ],
+
+  props: {
+    module: {
+      type: Object,
+      required: true
+    },
+
+    depth: {
+      type: Number,
+      required: true
+    },
+
+    parentRatio: {
+      type: Number,
+      required: true
+    },
+
+    colors: {
+      type: Array,
+      required: true
+    }
+  },
+
+  data () {
+    return {
+      dasharray: 0
+    }
+  },
+
+  computed: {
+    ...mapGetters([
+      'sizeField'
+    ]),
+
+    finalDasharray () {
+      return (this.finalDashoffset === 0 ||
+        this.finalDashoffset === this.dasharray * 2)
+        ? 0 : this.dasharray
+    },
+
+    finalDashoffset () {
+      if (this.ratio < 0) {
+        return -this.dasharray * this.ratio + this.dasharray
+      } else {
+        return (1 - this.ratio) * this.dasharray
+      }
+    },
+
+    ratio () {
+      return this.getRatio(this.module, this.parentRatio)
+    },
+
+    rotation () {
+      return this.module.previousSize[this.sizeField] / this.module.parent.size[this.sizeField] * this.parentRatio * 360
+    },
+
+    size () {
+      return this.depth * 6.5 + 40
+    },
+
+    stroke () {
+      return this.colors[this.depth]
+    },
+
+    visible () {
+      return this.isVisible(this.ratio)
+    },
+
+    hover () {
+      return this.WebpackAnalyzer.hoverModule === this.module
+    }
+  },
+
+  mounted () {
+    if (this.visible) {
+      this.dasharray = this.$refs.path.getTotalLength()
+    }
+  },
+
+  methods: {
+    getRatio (module, parentRatio) {
+      return module.size[this.sizeField] / module.parent.size[this.sizeField] * parentRatio
+    },
+
+    isVisible (ratio) {
+      return ratio > 0.0025
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@vue/cli-ui/src/style/imports"
+
+path
+  fill none
+  stroke-width 3
+
+.hover > .container
+  path
+    stroke $vue-ui-color-warning
+</style>
diff --git a/packages/@vue/cli-ui-addon-webpack/src/components/ModuleList.vue b/packages/@vue/cli-ui-addon-webpack/src/components/ModuleList.vue
new file mode 100644
index 0000000000..37a6bf961d
--- /dev/null
+++ b/packages/@vue/cli-ui-addon-webpack/src/components/ModuleList.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="module-list list-block">
+    <div class="content">
+      <div class="title">
+        {{ $t('vue-webpack.dashboard.module-list.title') }}
+      </div>
+
+      <VueIcon
+        v-if="!depModules.length"
+        icon="more_horiz"
+        class="blank-icon"
+      />
+
+      <div class="list">
+        <ModuleListItem
+          v-for="m of depModules"
+          :key="m.id"
+          :module="m"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+import ModuleListItem from './ModuleListItem'
+
+export default {
+  components: {
+    ModuleListItem
+  },
+
+  computed: {
+    ...mapGetters([
+      'depModules'
+    ])
+  }
+}
+</script>
diff --git a/packages/@vue/cli-ui-addon-webpack/src/components/ModuleListItem.vue b/packages/@vue/cli-ui-addon-webpack/src/components/ModuleListItem.vue
new file mode 100644
index 0000000000..a99b5fecb4
--- /dev/null
+++ b/packages/@vue/cli-ui-addon-webpack/src/components/ModuleListItem.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="module-list-item">
+    <div class="content">
+      <div class="info name">{{ module.name }}</div>
+      <div class="info size">{{ module.size | size('B') }}</div>
+      <div class="info">
+        <VueLoadingBar :value="module.ratio" class="primary"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { size } from '../filters'
+
+export default {
+  filters: {
+    size
+  },
+
+  props: {
+    module: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@vue/cli-ui/src/style/imports"
+
+.module-list-item
+  .content
+    display grid
+    grid-template-columns 3fr 1fr 1fr
+    grid-gap $padding-item
+    font-family $font-mono
+    font-size 12px
+
+  .info
+    display flex
+    align-items center
+
+  .size
+    color $vue-ui-color-primary
+    justify-content flex-end
+
+  .vue-ui-loading-bar
+    width 100%
+</style>
diff --git a/packages/@vue/cli-ui-addon-webpack/src/components/SpeedStats.vue b/packages/@vue/cli-ui-addon-webpack/src/components/SpeedStats.vue
new file mode 100644
index 0000000000..e90037f16b
--- /dev/null
+++ b/packages/@vue/cli-ui-addon-webpack/src/components/SpeedStats.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="speed-stats">
+    <div class="content">
+      <div class="title">
+        {{ $t('vue-webpack.dashboard.speed-stats.title') }}
+      </div>
+
+      <VueIcon
+        v-if="!assetsTotalSize"
+        icon="more_horiz"
+        class="blank-icon"
+      />
+
+      <div v-else class="items">
+        <SpeedStatsItem
+          v-for="(stats, key) of speeds"
+          :key="key"
+          :stats="stats"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { getSpeeds } from '../util/assets'
+
+import SpeedStatsItem from './SpeedStatsItem.vue'
+
+export default {
+  components: {
+    SpeedStatsItem
+  },
+
+  computed: {
+    ...mapGetters([
+      'assetsTotalSize'
+    ]),
+
+    speeds () {
+      return getSpeeds(this.assetsTotalSize)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@vue/cli-ui/src/style/imports"
+
+.items
+  display grid
+  grid-template-columns repeat(auto-fill, 200px)
+  grid-gap 16px
+  justify-content space-between
+  padding 16px
+</style>
diff --git a/packages/@vue/cli-ui-addon-webpack/src/components/SpeedStatsItem.vue b/packages/@vue/cli-ui-addon-webpack/src/components/SpeedStatsItem.vue
new file mode 100644
index 0000000000..9f0315eb65
--- /dev/null
+++ b/packages/@vue/cli-ui-addon-webpack/src/components/SpeedStatsItem.vue
@@ -0,0 +1,54 @@
+<template>
+  <div
+    class="speed-stats-item"
+    v-tooltip="{
+      content: tooltip,
+      offset: 16
+    }"
+  >
+    <div class="content">
+      <div class="label">{{ stats.title }}</div>
+      <div class="value">{{ stats.totalDownloadTime | round(100) }}s</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { round } from '../filters'
+
+export default {
+  filters: {
+    round
+  },
+
+  props: {
+    stats: {
+      type: Object,
+      required: true
+    }
+  },
+
+  computed: {
+    tooltip () {
+      return `${this.stats.mbps}Mbps + ${this.stats.rtt}ms RTT`
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@vue/cli-ui/src/style/imports"
+
+.content
+  font-family $font-mono
+  font-size 12px
+  display grid
+  grid-template-columns 3fr 2fr
+  grid-gap $padding-item
+
+  .label
+    text-align right
+
+  .value
+    color $vue-ui-color-primary
+</style>
diff --git a/packages/@vue/cli-ui-addon-webpack/src/components/TestView.vue b/packages/@vue/cli-ui-addon-webpack/src/components/TestView.vue
new file mode 100644
index 0000000000..ef07b9fda1
--- /dev/null
+++ b/packages/@vue/cli-ui-addon-webpack/src/components/TestView.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="test-view">
+    <h1>{{ $t('vue-webpack.test-view') }}</h1>
+    <p>A vue-cli plugin created me! I am a dynamically loaded component paired with a custom route.</p>
+    <div class="section">
+      <VueInput
+        v-model="testData"
+        placeholder="Shared data (with storage)"
+      />
+    </div>
+    <div class="section">
+      <VueButton @click="testPluginAction()">Test plugin action</VueButton>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  sharedData: {
+    testData: 'test-data'
+  },
+
+  created () {
+    this.$onPluginActionCalled(action => {
+      // eslint-disable-next-line no-console
+      console.log('called', action)
+    })
+    this.$onPluginActionResolved(action => {
+      // eslint-disable-next-line no-console
+      console.log('resolved', action)
+    })
+  },
+
+  methods: {
+    testPluginAction () {
+      this.$callPluginAction('test-action', {
+        meow: 'meow'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.test-view
+  padding 42px
+
+.section
+  margin-bottom 12px
+</style>
diff --git a/packages/@vue/cli-ui-addon-webpack/src/components/WebpackAnalyzer.vue b/packages/@vue/cli-ui-addon-webpack/src/components/WebpackAnalyzer.vue
new file mode 100644
index 0000000000..b3a8b92a9e
--- /dev/null
+++ b/packages/@vue/cli-ui-addon-webpack/src/components/WebpackAnalyzer.vue
@@ -0,0 +1,353 @@
+<template>
+  <div class="vue-webpack-analyzer">
+    <div class="pane-toolbar">
+      <VueIcon icon="donut_large"/>
+      <div class="title">{{ $t('vue-webpack.analyzer.title') }}</div>
+
+      <template v-if="currentTree">
+        <VueButton
+          icon-left="arrow_upward"
+          :label="$t('vue-webpack.analyzer.go-up')"
+          :disabled="currentTree === rootTree"
+          @click="goToParent()"
+        />
+        <VueButton
+          icon-left="home"
+          :label="$t('vue-webpack.analyzer.go-home')"
+          :disabled="currentTree === rootTree"
+          @click="goToHome()"
+        />
+        <VueIcon
+          icon="lens"
+          class="separator"
+        />
+      </template>
+      <VueSelect
+        v-model="selectedChunk"
+        :disabled="Object.keys(modulesTrees).length === 0"
+      >
+        <VueSelectButton
+          v-for="(chunk, key) of modulesTrees"
+          :key="key"
+          :value="key"
+          :label="`${$t('vue-webpack.analyzer.chunk')} ${getChunkName(key)}`"
+        />
+      </VueSelect>
+      <VueSelect v-model="sizeField">
+        <VueSelectButton value="stats" :label="`${$t('vue-webpack.sizes.stats')}`"/>
+        <VueSelectButton value="parsed" :label="`${$t('vue-webpack.sizes.parsed')}`"/>
+        <VueSelectButton value="gzip" :label="`${$t('vue-webpack.sizes.gzip')}`"/>
+      </VueSelect>
+      <VueButton
+        class="icon-button"
+        icon-left="help"
+        v-tooltip="$t('vue-webpack.sizes.help')"
+      />
+    </div>
+
+    <div class="content">
+      <template v-if="currentTree">
+        <svg
+          ref="svg"
+          :key="sizeField"
+          class="donut"
+          :class="{
+            hover: hoverModule
+          }"
+          viewBox="0 0 80 80"
+          @mousemove="onMouseMove"
+          @mouseout="onMouseOut"
+          @click="onDonutClick"
+        >
+          <g transform="translate(40, 40)">
+            <DonutModule
+              v-for="(module, index) of currentTree.children"
+              :key="module.id"
+              :module="module"
+              :colors="getColors(index)"
+              :depth="0"
+              :parent-ratio="1"
+            />
+          </g>
+        </svg>
+      </template>
+
+      <div v-if="describedModule" class="described-module">
+        <div class="wrapper">
+          <div class="path" v-html="modulePath"/>
+          <div
+            class="stats size"
+            :class="{ selected: sizeField === 'stats' }"
+          >
+            {{ $t('vue-webpack.sizes.stats') }}: {{ describedModule.size.stats | size('B')}}
+          </div>
+          <div
+            class="parsed size"
+            :class="{ selected: sizeField === 'parsed' }"
+          >
+            {{ $t('vue-webpack.sizes.parsed') }}: {{ describedModule.size.parsed | size('B')}}
+          </div>
+          <div
+            class="gzip size"
+            :class="{ selected: sizeField === 'gzip' }"
+          >
+            {{ $t('vue-webpack.sizes.gzip') }}: {{ describedModule.size.gzip | size('B')}}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Dashboard from '../mixins/Dashboard'
+import colors from '../util/colors'
+import { size } from '../filters'
+
+import DonutModule from './DonutModule.vue'
+
+export default {
+  mixins: [
+    Dashboard
+  ],
+
+  filters: {
+    size
+  },
+
+  components: {
+    DonutModule
+  },
+
+  provide () {
+    return {
+      WebpackAnalyzer: this.injection
+    }
+  },
+
+  data () {
+    return {
+      selectedChunk: null,
+      injection: {
+        hoverModule: null
+      },
+      currentTree: null
+    }
+  },
+
+  computed: {
+    ...mapGetters([
+      'modulesTrees',
+      'chunks'
+    ]),
+
+    hoverModule: {
+      get () { return this.injection.hoverModule },
+      set (value) { this.injection.hoverModule = value }
+    },
+
+    describedModule () {
+      return this.hoverModule || this.currentTree
+    },
+
+    modulePath () {
+      if (!this.describedModule) return
+      let path = `<b>${this.describedModule.id}</b>`
+      let module = this.describedModule
+      while (module.parent && module !== this.currentTree) {
+        module = module.parent
+        path = `${module.id} / ${path}`
+      }
+      return path
+    },
+
+    rootTree () {
+      return this.modulesTrees && this.modulesTrees[this.selectedChunk]
+    }
+  },
+
+  watch: {
+    modulesTrees: {
+      handler (value) {
+        if (value) {
+          const keys = Object.keys(value)
+          if (keys.length) {
+            if (!this.selectedChunk || !keys.includes(this.selectedChunk)) {
+              if (keys.length) {
+                this.selectedChunk = keys[0]
+              }
+            }
+            this.goToHome()
+            return
+          }
+        }
+
+        // Clear
+        this.currentTree = null
+        this.selectedChunk = null
+      },
+      immediate: true
+    },
+
+    selectedChunk: {
+      handler: 'goToHome',
+      immediate: true
+    }
+  },
+
+  methods: {
+    getColors (index) {
+      return colors[index % colors.length]
+    },
+
+    getChunk (id) {
+      return this.chunks.find(
+        c => c.id.toString() === id.toString()
+      )
+    },
+
+    getChunkName (id) {
+      const chunk = this.getChunk(id)
+      if (chunk) {
+        if (chunk.names && chunk.names.length) {
+          return `${chunk.names[0]} (${id})`
+        }
+        if (chunk.files && chunk.files.length) {
+          return `${chunk.files[0]} (${id})`
+        }
+      }
+      return id
+    },
+
+    onMouseMove (event) {
+      const svg = this.$refs.svg
+      const { clientX, clientY } = event
+      const pt = svg.createSVGPoint()
+      pt.x = clientX
+      pt.y = clientY
+      let { x, y } = pt.matrixTransform(svg.getScreenCTM().inverse())
+      x -= 40
+      y -= 40
+
+      let angle = (Math.atan2(y, x) / Math.PI * 180 + 90)
+      // Modulo 360
+      angle = ((angle % 360) + 360) % 360
+      const distance = Math.sqrt(x * x + y * y)
+      const depth = Math.floor(((distance + 1.5) * 2 - 40) / 6.5)
+
+      if (depth < 0) {
+        this.hoverModule = null
+        return
+      }
+
+      // Walk the tree to find the hovered module
+      const sizeField = this.sizeField
+      let tree = this.currentTree
+      let rotation = angle
+      let ratio = rotation / 360
+      // We use a target module size
+      let targetSize = tree.size[sizeField] * ratio
+      let parentRatio = 1
+      for (let d = 0; d <= depth; d++) {
+        let found = false
+        for (const child of tree.children) {
+          const previousSize = child.previousSize[sizeField]
+          const size = child.size[sizeField]
+          if (previousSize + size >= targetSize) {
+            // Select child
+            const parentSize = tree.size[sizeField]
+            const childRatio = size / parentSize * parentRatio
+            const childRotation = previousSize / parentSize * parentRatio * 360
+            // We update rotation to become relative to selected child
+            rotation -= childRotation
+            // We calculate a new target module size relative to selected child
+            ratio = rotation / 360 / childRatio
+            targetSize = size * ratio
+            // New base ratio for deeper children
+            parentRatio = childRatio
+            // Go deeper
+            tree = child
+            found = true
+            break
+          }
+        }
+        if (!found) {
+          tree = null
+          break
+        }
+      }
+      this.hoverModule = tree
+    },
+
+    onMouseOut (event) {
+      this.hoverModule = null
+    },
+
+    onDonutClick () {
+      if (this.hoverModule && this.hoverModule.children.length) {
+        this.currentTree = this.hoverModule
+        this.hoverModule = null
+      }
+    },
+
+    goToParent () {
+      if (this.currentTree && this.currentTree.parent) {
+        this.currentTree = this.currentTree.parent
+      }
+    },
+
+    goToHome () {
+      this.currentTree = this.rootTree
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@vue/cli-ui/src/style/imports"
+
+.vue-webpack-analyzer
+  height 100%
+  display grid
+  grid-template-columns auto
+  grid-template-rows auto 1fr
+  grid-gap $padding-item
+  overflow-y hidden
+
+  .pane-toolbar,
+  .described-module .wrapper
+    padding $padding-item
+    background $vue-ui-color-light-neutral
+    border-radius $br
+
+  .content
+    display flex
+    flex-direction column
+    position relative
+
+  .donut
+    width 100%
+    flex auto 1 1
+    height 0
+    &.hover
+      cursor pointer
+
+  .described-module
+    position absolute
+    top 0
+    left 0
+    width 100%
+    height 100%
+    pointer-events none
+    v-box()
+    box-center()
+
+    .wrapper
+      max-width 170px
+      overflow hidden
+
+      .size
+        &:not(.selected)
+          opacity .5
+</style>
diff --git a/packages/@vue/cli-ui-addon-webpack/src/components/WebpackDashboard.vue b/packages/@vue/cli-ui-addon-webpack/src/components/WebpackDashboard.vue
new file mode 100644
index 0000000000..39b82ce8fe
--- /dev/null
+++ b/packages/@vue/cli-ui-addon-webpack/src/components/WebpackDashboard.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="vue-webpack-dashboard">
+    <div class="pane-toolbar">
+      <VueIcon icon="dashboard"/>
+      <div class="title">{{ $t('vue-webpack.dashboard.title') }}</div>
+
+      <template
+        v-if="mode === 'serve'"
+      >
+        <VueButton
+          icon-left="open_in_browser"
+          :label="$t('vue-webpack.dashboard.open-app')"
+          :disabled="!serveUrl"
+          @click="$callPluginAction('webpack-dashboard-open-app')"
+        />
+        <VueIcon
+          icon="lens"
+          class="separator"
+        />
+      </template>
+      <VueSelect v-model="sizeField">
+        <VueSelectButton value="stats" :label="`${$t('vue-webpack.sizes.stats')}`"/>
+        <VueSelectButton value="parsed" :label="`${$t('vue-webpack.sizes.parsed')}`"/>
+        <VueSelectButton value="gzip" :label="`${$t('vue-webpack.sizes.gzip')}`"/>
+      </VueSelect>
+      <VueButton
+        class="icon-button"
+        icon-left="help"
+        v-tooltip="$t('vue-webpack.sizes.help')"
+      />
+    </div>
+
+    <div class="content vue-ui-grid default-gap">
+      <BuildStatus />
+      <BuildProgress />
+      <SpeedStats class="span-2"/>
+      <AssetList />
+      <ModuleList />
+    </div>
+
+    <div class="logo">
+      <a href="https://webpack.js.org/" target="_blank">
+        <img src="../assets/webpack.svg" class="webpack-logo">
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+import Dashboard from '../mixins/Dashboard'
+
+import BuildStatus from './BuildStatus'
+import BuildProgress from './BuildProgress'
+import SpeedStats from './SpeedStats'
+import AssetList from './AssetList'
+import ModuleList from './ModuleList'
+
+export default {
+  mixins: [
+    Dashboard
+  ],
+
+  components: {
+    BuildStatus,
+    BuildProgress,
+    SpeedStats,
+    AssetList,
+    ModuleList
+  },
+
+  sharedData () {
+    return {
+      serveUrl: `webpack-dashboard-serve-url`
+    }
+  }
+}
+</script>
+
+<style>
+@import '~vue-progress-path/dist/vue-progress-path.css';
+</style>
+
+<style lang="stylus" scoped>
+@import "~@vue/cli-ui/src/style/imports"
+
+.vue-webpack-dashboard
+  .content
+    grid-template-columns 9fr 4fr
+
+    >>>
+      .title
+        color lighten($vue-ui-color-dark, 60%)
+        font-size 20px
+        font-weight lighter
+        text-align center
+        margin-bottom $padding-item
+
+      .list
+        display grid
+        grid-template-columns 1fr
+        grid-gap 16px
+
+      .info-block
+        v-box()
+        box-center()
+        font-weight lighter
+        text-align center
+
+        .label
+          color lighten($vue-ui-color-dark, 60%)
+          font-size 20px
+
+        .value
+          color $vue-ui-color-dark
+          font-size 24px
+
+          .secondary
+            opacity .75
+            font-size 16px
+
+  .pane-toolbar,
+  .content >>> > div
+    padding $padding-item
+    background $vue-ui-color-light-neutral
+    border-radius $br
+
+  .pane-toolbar
+    margin-bottom $padding-item
+
+  .logo
+    margin $padding-item 0
+    v-box()
+    box-center()
+    .webpack-logo
+      width 32px
+      height @width
+</style>
diff --git a/packages/@vue/cli-ui-addon-webpack/src/filters.js b/packages/@vue/cli-ui-addon-webpack/src/filters.js
new file mode 100644
index 0000000000..e37492dd2b
--- /dev/null
+++ b/packages/@vue/cli-ui-addon-webpack/src/filters.js
@@ -0,0 +1,25 @@
+export function size (size, unit = '', precision = 1) {
+  const kb = {
+    label: 'k',
+    value: 1024
+  }
+  const mb = {
+    label: 'M',
+    value: 1024 * 1024
+  }
+  let denominator
+
+  if (size >= mb.value) {
+    denominator = mb
+  } else {
+    denominator = kb
+    if (size < kb.value * 0.92 && precision === 0) {
+      precision = 1
+    }
+  }
+  return (size / denominator.value).toFixed(precision) + denominator.label + unit
+}
+
+export function round (value, precision) {
+  return Math.round(value * precision) / precision
+}
diff --git a/packages/@vue/cli-ui-addon-webpack/src/locales/en.json b/packages/@vue/cli-ui-addon-webpack/src/locales/en.json
new file mode 100644
index 0000000000..0eed1cfe7b
--- /dev/null
+++ b/packages/@vue/cli-ui-addon-webpack/src/locales/en.json
@@ -0,0 +1,5 @@
+{
+  "vue-webpack": {
+    "test-view": "I'm a custom view"
+  }
+}
diff --git a/packages/@vue/cli-ui-addon-webpack/src/main.js b/packages/@vue/cli-ui-addon-webpack/src/main.js
new file mode 100644
index 0000000000..e6a1d016d5
--- /dev/null
+++ b/packages/@vue/cli-ui-addon-webpack/src/main.js
@@ -0,0 +1,22 @@
+import VueProgress from 'vue-progress-path'
+import WebpackDashboard from './components/WebpackDashboard.vue'
+import WebpackAnalyzer from './components/WebpackAnalyzer.vue'
+import TestView from './components/TestView.vue'
+
+Vue.use(VueProgress, {
+  defaultShape: 'circle'
+})
+
+ClientAddonApi.component('vue-webpack-dashboard', WebpackDashboard)
+ClientAddonApi.component('vue-webpack-analyzer', WebpackAnalyzer)
+
+ClientAddonApi.addRoutes('vue-webpack', [
+  { path: '', name: 'test-webpack-route', component: TestView }
+])
+
+// Locales
+const locales = require.context('./locales', true, /[a-z0-9]+\.json$/i)
+locales.keys().forEach(key => {
+  const locale = key.match(/([a-z0-9]+)\./i)[1]
+  ClientAddonApi.addLocalization(locale, locales(key))
+})
diff --git a/packages/@vue/cli-ui-addon-webpack/src/mixins/Dashboard.js b/packages/@vue/cli-ui-addon-webpack/src/mixins/Dashboard.js
new file mode 100644
index 0000000000..2302e4ab7e
--- /dev/null
+++ b/packages/@vue/cli-ui-addon-webpack/src/mixins/Dashboard.js
@@ -0,0 +1,34 @@
+import store from '../store'
+
+// @vue/component
+export default {
+  store,
+
+  inject: [
+    'TaskDetails'
+  ],
+
+  data () {
+    return {
+      mode: null
+    }
+  },
+
+  computed: {
+    sizeField: {
+      get () { return this.$store.getters.sizeField },
+      set (value) { this.$store.commit('sizeField', value) }
+    }
+  },
+
+  created () {
+    const mode = this.mode = this.TaskDetails.task.command.indexOf('vue-cli-service serve') !== -1 ? 'serve' : 'build'
+    this.$store.commit('mode', mode)
+    this.$watchSharedData(`webpack-dashboard-${mode}-stats`, value => {
+      this.$store.commit('stats', {
+        mode,
+        value
+      })
+    })
+  }
+}
diff --git a/packages/@vue/cli-ui-addon-webpack/src/store/index.js b/packages/@vue/cli-ui-addon-webpack/src/store/index.js
new file mode 100644
index 0000000000..ad85728c20
--- /dev/null
+++ b/packages/@vue/cli-ui-addon-webpack/src/store/index.js
@@ -0,0 +1,56 @@
+import Vuex from 'vuex'
+
+import { buildSortedAssets } from '../util/assets'
+import { filterModules, buildSortedModules, buildDepModules, buildModulesTrees } from '../util/modules'
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  state () {
+    return {
+      sizeField: localStorage.getItem('vue-webpack.sizeField') || 'parsed',
+      mode: 'serve',
+      serve: {
+        stats: null
+      },
+      build: {
+        stats: null
+      }
+    }
+  },
+
+  getters: {
+    sizeField: state => state.sizeField,
+    mode: state => state.mode,
+    stats: state => state[state.mode].stats,
+    errors: (state, getters) => (getters.stats && getters.stats.data.errors) || [],
+    warnings: (state, getters) => (getters.stats && getters.stats.data.warnings) || [],
+    assets: (state, getters) => (getters.stats && getters.stats.data.assets) || [],
+    assetsSorted: (state, getters) => buildSortedAssets(getters.assets, getters.sizeField),
+    assetsTotalSize: (state, getters) => getters.assetsSorted.filter(a => !a.secondary).reduce((total, asset) => total + asset.size, 0),
+    rawModules: (state, getters) => (getters.stats && filterModules(getters.stats.data.modules)) || [],
+    modules: (state, getters) => buildSortedModules(getters.rawModules, getters.sizeField),
+    modulesTotalSize: (state, getters) => getters.modules.reduce((total, module) => total + module.size, 0),
+    modulesTrees: (state, getters) => buildModulesTrees(getters.rawModules),
+    depModules: (state, getters) => buildDepModules(getters.modules),
+    depModulesTotalSize: (state, getters) => getters.depModules.reduce((total, module) => total + module.size, 0),
+    chunks: (state, getters) => (getters.stats && getters.stats.data.chunks) || []
+  },
+
+  mutations: {
+    sizeField (state, value) {
+      state.sizeField = value
+      localStorage.setItem('vue-webpack.sizeField', value)
+    },
+
+    mode (state, value) {
+      state.mode = value
+    },
+
+    stats (state, { mode, value }) {
+      state[mode].stats = value
+    }
+  }
+})
+
+export default store
diff --git a/packages/@vue/cli-ui-addon-webpack/src/util/assets.js b/packages/@vue/cli-ui-addon-webpack/src/util/assets.js
new file mode 100644
index 0000000000..fb6fed2ec4
--- /dev/null
+++ b/packages/@vue/cli-ui-addon-webpack/src/util/assets.js
@@ -0,0 +1,63 @@
+import speedsData from '../assets/speeds.json'
+
+const DOWNLOAD_TIME_THRESHOLD_SECONDS = 5
+
+export function getSpeedData (datapoint, size) {
+  const assetsSizeInMB = size / 1024 / 1024
+  const bandwidthInMbps = datapoint.mbps
+  const bandwidthInMBps = bandwidthInMbps / 8
+  const rttInSeconds = datapoint.rtt / 1000
+
+  const totalDownloadTime = assetsSizeInMB / bandwidthInMBps + rttInSeconds
+
+  const isDownloadTimeOverThreshold =
+    totalDownloadTime > DOWNLOAD_TIME_THRESHOLD_SECONDS
+  const timeDifferenceToThreshold =
+    (isDownloadTimeOverThreshold ? '+' : '-') +
+    Math.abs(totalDownloadTime - DOWNLOAD_TIME_THRESHOLD_SECONDS).toFixed(2) +
+'s'
+
+  return {
+    totalDownloadTime,
+    isDownloadTimeOverThreshold,
+    timeDifferenceToThreshold
+  }
+}
+
+export function getSpeeds (size) {
+  return Object.keys(speedsData).reduce((obj, key) => {
+    obj[key] = {
+      ...getSpeedData(speedsData[key], size),
+      ...speedsData[key]
+    }
+    return obj
+  }, {})
+}
+
+export function buildSortedAssets (assets, sizeField) {
+  let list = assets.slice()
+  if (list.length) {
+    const max = list[0].size
+    list = list.map(asset => {
+      const size = asset.size[sizeField]
+      return {
+        name: asset.name,
+        size,
+        big: size > 250000,
+        ratio: size / max,
+        secondary: /\.map$/.test(asset.name),
+        speeds: getSpeeds(size)
+      }
+    })
+    list = list.sort((a, b) => {
+      if (a.secondary === b.secondary) {
+        return b.size - a.size
+      } else if (a.secondary && !b.secondary) {
+        return 1
+      } else {
+        return -1
+      }
+    })
+  }
+  return list
+}
diff --git a/packages/@vue/cli-ui-addon-webpack/src/util/colors.js b/packages/@vue/cli-ui-addon-webpack/src/util/colors.js
new file mode 100644
index 0000000000..371f3b5d39
--- /dev/null
+++ b/packages/@vue/cli-ui-addon-webpack/src/util/colors.js
@@ -0,0 +1,34 @@
+export default [
+  [
+    '#42b983',
+    '#5DC395',
+    '#78CDA7',
+    '#93D7B9',
+    '#AEE1CB',
+    '#C9EBDD'
+  ],
+  [
+    '#A96FDA',
+    '#B684DF',
+    '#C399E4',
+    '#D0AEE9',
+    '#DDC3EE',
+    '#EAD8F3'
+  ],
+  [
+    '#03C2E6',
+    '#27CBEA',
+    '#4BD4EE',
+    '#6FDDF2',
+    '#93E6F6',
+    '#B7EFFA'
+  ],
+  [
+    '#778F9B',
+    '#8B9FA9',
+    '#9FAFB7',
+    '#B3BFC5',
+    '#C7CFD3',
+    '#DBDFE1'
+  ]
+]
diff --git a/packages/@vue/cli-ui-addon-webpack/src/util/modules.js b/packages/@vue/cli-ui-addon-webpack/src/util/modules.js
new file mode 100644
index 0000000000..1a5bfda366
--- /dev/null
+++ b/packages/@vue/cli-ui-addon-webpack/src/util/modules.js
@@ -0,0 +1,179 @@
+const getModulePath = function (identifier) {
+  return identifier.replace(/.*!/, '').replace(/\\/g, '/')
+}
+
+export function filterModules (modules) {
+  return modules.filter(module => module.name.indexOf('(webpack)') === -1)
+}
+
+export function buildSortedModules (modules, sizeField) {
+  let list = modules.slice()
+  if (list.length) {
+    list = list.map(module => {
+      const size = module.size[sizeField]
+      return {
+        id: module.id,
+        identifier: module.identifier,
+        size
+      }
+    })
+    list = list.sort((a, b) => b.size - a.size)
+  }
+  return list
+}
+
+export function buildDepModules (modules) {
+  const deps = new Map()
+  for (const module of modules) {
+    const path = getModulePath(module.identifier)
+    const pathParts = path.split('/node_modules/')
+    if (pathParts.length === 2) {
+      let name = pathParts[1]
+      if (name.charAt(0) === '@') {
+        // Scoped package
+        name = name.substr(0, name.indexOf('/', name.indexOf('/') + 1))
+      } else {
+        name = name.substr(0, name.indexOf('/'))
+      }
+      let dep = deps.get(name)
+      if (!dep) {
+        dep = {
+          name,
+          size: 0
+        }
+        deps.set(name, dep)
+      }
+      dep.size += module.size
+    }
+  }
+  let list = Array.from(deps.values())
+  list = list.sort((a, b) => b.size - a.size)
+  if (list.length) {
+    const max = list[0].size
+    for (const dep of list) {
+      dep.ratio = dep.size / max
+    }
+  }
+  return list
+}
+
+/*
+{
+  id: './node_modules',
+  size: {
+    stats: 1024,
+    parsed: 0,
+    gzip: 400
+  }
+  fullPath: '/node_modules',
+  parent: undefined,
+  children: [
+    {
+      id: 'vuex',
+      identifier: '...',
+      size: {
+        stats: 42,
+        parsed: 0,
+        gzip: 12
+      },
+      // Total size of previous children in list
+      previousSize: {
+        stats: 0,
+        parsed: 0,
+        gzip: 0
+      },
+      fullPath: '/node_modules/vuex',
+      children: [
+        ...
+      ],
+      parent: ...
+    },
+    ...
+  ]
+}
+*/
+
+export function buildModulesTrees (modules) {
+  const trees = {}
+
+  for (const module of modules) {
+    const path = getModulePath(module.identifier)
+    if (path.indexOf('multi ') === 0) continue
+    const parts = path.split('/')
+    for (const treeId of module.chunks) {
+      let subtree = trees[treeId]
+      if (!subtree) {
+        subtree = trees[treeId] = {
+          id: treeId,
+          size: {
+            stats: 0,
+            parsed: 0,
+            gzip: 0
+          },
+          children: {}
+        }
+      }
+      let fullPath = []
+      for (let i = 0; i < parts.length; i++) {
+        const part = parts[i]
+        let child = subtree.children[part]
+        if (!child) {
+          fullPath.push(part)
+          child = subtree.children[part] = {
+            id: part,
+            size: {
+              stats: 0,
+              parsed: 0,
+              gzip: 0
+            },
+            fullPath: fullPath.join('/'),
+            children: {},
+            parent: subtree
+          }
+        }
+        child.size.stats += module.size.stats
+        child.size.parsed += module.size.parsed || 0
+        child.size.gzip += module.size.gzip || 0
+        // Leaf
+        if (i === parts.length - 1) {
+          child.identifier = module.identifier
+        }
+        subtree = child
+      }
+    }
+  }
+
+  for (const n in trees) {
+    let tree = trees[n]
+    let keys
+    while ((keys = Object.keys(tree.children)).length !== 0 && keys.length === 1) {
+      tree = tree.children[keys[0]]
+    }
+    walkTreeToSortChildren(tree)
+    trees[n] = tree
+  }
+
+  return trees
+}
+
+function walkTreeToSortChildren (tree) {
+  let size = {
+    stats: 0,
+    parsed: 0,
+    gzip: 0
+  }
+  tree.children = Object.keys(tree.children).map(
+    key => tree.children[key]
+  ).sort((a, b) => b.size.stats - a.size.stats)
+  for (const child of tree.children) {
+    child.previousSize = {
+      stats: size.stats,
+      parsed: size.parsed,
+      gzip: size.gzip
+    }
+    size.stats += child.size.stats
+    size.parsed += child.size.parsed
+    size.gzip += child.size.gzip
+    walkTreeToSortChildren(child)
+  }
+}
diff --git a/packages/@vue/cli-ui-addon-webpack/vue.config.js b/packages/@vue/cli-ui-addon-webpack/vue.config.js
new file mode 100644
index 0000000000..179090ca7e
--- /dev/null
+++ b/packages/@vue/cli-ui-addon-webpack/vue.config.js
@@ -0,0 +1,8 @@
+const { clientAddonConfig } = require('@vue/cli-ui')
+
+module.exports = {
+  ...clientAddonConfig({
+    id: 'vue-webpack'
+    // port: 8042
+  })
+}
diff --git a/packages/@vue/cli-ui/.babelrc b/packages/@vue/cli-ui/.babelrc
new file mode 100644
index 0000000000..a736dde9b1
--- /dev/null
+++ b/packages/@vue/cli-ui/.babelrc
@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "@vue/app"
+  ]
+}
\ No newline at end of file
diff --git a/packages/@vue/cli-ui/.env.production b/packages/@vue/cli-ui/.env.production
new file mode 100644
index 0000000000..879486062f
--- /dev/null
+++ b/packages/@vue/cli-ui/.env.production
@@ -0,0 +1 @@
+VUE_APP_CLI_UI_URL=
diff --git a/packages/@vue/cli-ui/.eslintrc.js b/packages/@vue/cli-ui/.eslintrc.js
new file mode 100644
index 0000000000..5e3168705e
--- /dev/null
+++ b/packages/@vue/cli-ui/.eslintrc.js
@@ -0,0 +1,10 @@
+module.exports = {
+  root: true,
+  extends: [
+    'plugin:vue/essential',
+    '@vue/standard'
+  ],
+  globals: {
+    ClientAddonApi: false
+  }
+}
diff --git a/packages/@vue/cli-ui/.gitignore b/packages/@vue/cli-ui/.gitignore
new file mode 100644
index 0000000000..e015d4a45e
--- /dev/null
+++ b/packages/@vue/cli-ui/.gitignore
@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+
+/live/
+/live-test/
diff --git a/packages/@vue/cli-ui/.npmignore b/packages/@vue/cli-ui/.npmignore
new file mode 100644
index 0000000000..0607e35e55
--- /dev/null
+++ b/packages/@vue/cli-ui/.npmignore
@@ -0,0 +1,4 @@
+/public
+/live
+/live-test
+/tests
diff --git a/packages/@vue/cli-ui/.postcssrc b/packages/@vue/cli-ui/.postcssrc
new file mode 100644
index 0000000000..ed0149bf8b
--- /dev/null
+++ b/packages/@vue/cli-ui/.postcssrc
@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "autoprefixer": {}
+  }
+}
\ No newline at end of file
diff --git a/packages/@vue/cli-ui/README.md b/packages/@vue/cli-ui/README.md
new file mode 100644
index 0000000000..c9d7698a73
--- /dev/null
+++ b/packages/@vue/cli-ui/README.md
@@ -0,0 +1,15 @@
+# @vue/cli-ui
+
+Start development version:
+
+```
+yarn run serve
+```
+
+In another terminal:
+
+```
+yarn run graphql-api
+```
+
+You also need to build `@vue/cli-ui-addon-webpack`.
diff --git a/packages/@vue/cli-ui/cypress.json b/packages/@vue/cli-ui/cypress.json
new file mode 100644
index 0000000000..470c720199
--- /dev/null
+++ b/packages/@vue/cli-ui/cypress.json
@@ -0,0 +1,3 @@
+{
+  "pluginsFile": "tests/e2e/plugins/index.js"
+}
diff --git a/packages/@vue/cli-ui/index.js b/packages/@vue/cli-ui/index.js
new file mode 100644
index 0000000000..dc0ce5eca5
--- /dev/null
+++ b/packages/@vue/cli-ui/index.js
@@ -0,0 +1,28 @@
+exports.clientAddonConfig = function ({ id, port = 8042 }) {
+  return {
+    baseUrl: `/_addon/${id}`,
+    devBaseUrl: `http://localhost:${port}/`,
+    configureWebpack: {
+      output: {
+        // Important
+        filename: 'index.js'
+      }
+    },
+    css: {
+      extract: false
+    },
+    chainWebpack: config => {
+      config.plugins.delete('preload')
+      config.plugins.delete('prefetch')
+      config.plugins.delete('html')
+      config.plugins.delete('optimize-css')
+      config.optimization.splitChunks(false)
+    },
+    devServer: {
+      headers: {
+        'Access-Control-Allow-Origin': '*'
+      },
+      port
+    }
+  }
+}
diff --git a/packages/@vue/cli-ui/locales/en.json b/packages/@vue/cli-ui/locales/en.json
new file mode 100644
index 0000000000..648fcb6aab
--- /dev/null
+++ b/packages/@vue/cli-ui/locales/en.json
@@ -0,0 +1,479 @@
+{
+  "components": {
+    "file-diff": {
+      "binary": "Binary file not shown",
+      "actions": {
+        "open": "Open in editor"
+      }
+    },
+    "file-diff-view": {
+      "files-changed": "Files changed",
+      "search-file": "Search file",
+      "empty": "No change found",
+      "modals": {
+        "commit": {
+          "title": "Commit changes",
+          "input": "Enter a commit message",
+          "subtitle": "Record changes to the repository",
+          "actions": {
+            "commit": "Commit",
+            "cancel": "Cancel"
+          }
+        }
+      },
+      "actions": {
+        "collapse-all": "Collapse all",
+        "expand-all": "Expand all",
+        "commit": "Commit changes",
+        "skip": "Skip",
+        "continue": "Continue",
+        "refresh": "Refresh"
+      }
+    },
+    "folder-explorer": {
+      "toolbar": {
+        "tooltips": {
+          "parent-folder": "Open parent folder",
+          "edit-path": "Edit path",
+          "favorite": "Toggle favorite",
+          "favorite-folders": "Favorite folders",
+          "refresh": "Refresh"
+        },
+        "placeholder": "Enter the full path to a folder",
+        "empty": "No favorite folders yet."
+      }
+    },
+    "list-item-info": {
+      "more-info": "More Info"
+    },
+    "logger-view": {
+      "title": "Logs",
+      "empty": "Not logs yet",
+      "buttons": {
+        "clear": "Clear logs",
+        "scroll": "Scroll to bottom",
+        "close": "Close"
+      }
+    },
+    "progress-screen": {
+      "close": "Close"
+    },
+    "project-nav": {
+      "tooltips": {
+        "plugins": "Plugins",
+        "configuration": "Configuration",
+        "tasks": "Tasks",
+        "more": "More"
+      }
+    },
+    "project-select-list": {
+      "empty": "No existing projects",
+      "titles": {
+        "favorite": "Favorite projects",
+        "other": "Other projects"
+      }
+    },
+    "project-select-list-item": {
+      "tooltips": {
+        "favorite": "Toggle favorite",
+        "delete": "Delete"
+      }
+    },
+    "project-plugin-item": {
+      "version": "version",
+      "latest": "latest",
+      "official": "Official",
+      "installed": "Installed",
+      "actions": {
+        "update": "Update {target}"
+      }
+    },
+    "prompt-list": {
+      "default": "Default"
+    },
+    "prompts-list": {
+      "empty": "No configuration"
+    },
+    "status-bar": {
+      "project": {
+        "tooltip": "Current project<br><i>Click to toggle Project Manager</i>",
+        "empty": "No project"
+      },
+      "path": {
+        "tooltip": "Current Working Folder"
+      },
+      "log": {
+        "tooltip": "Logs<br><i>Click to toggle Vue CLI logs</i>",
+        "empty": "No logs yet"
+      },
+      "report-bug": "Report bug"
+    },
+    "terminal-view": {
+      "buttons": {
+        "clear": "Clear console",
+        "scroll": "Scroll to bottom"
+      }
+    },
+    "view-badge": {
+      "labels": {
+        "tasks": {
+          "error": "Error status",
+          "running": "Running status",
+          "done": "Done status"
+        }
+      }
+    }
+  },
+  "mixins": {
+    "progress": {
+      "creating": "Creating project...",
+      "git-init": "Initializing git repository...",
+      "plugins-install": "Installing Vue CLI plugins. This might take a while...",
+      "invoking-generators": "Invoking generators...",
+      "deps-install": "Installing additional dependencies...",
+      "completion-hooks": "Running completion hooks...",
+      "fetch-remote-preset": "Fetching remote preset...",
+      "done": "Successfully created project",
+      "plugin-install": "Installing {arg0}...",
+      "plugin-uninstall": "Uninstalling {arg0}...",
+      "plugin-invoke": "Invoking {arg0}...",
+      "plugin-update": "Updating {arg0}..."
+    }
+  },
+  "types": {
+    "task": {
+      "status": {
+        "idle": "Idle",
+        "running": "Running",
+        "done": "Done",
+        "error": "Error",
+        "terminated": "Terminated"
+      }
+    }
+  },
+  "views": {
+    "project-select": {
+      "title": "Vue Project Manager",
+      "tabs": {
+        "projects": "Projects",
+        "create": "Create",
+        "import": "Import"
+      },
+      "buttons": {
+        "create": "Create a new project here",
+        "import": "Import this folder"
+      }
+    },
+    "project-create": {
+      "title": "Create a new project",
+      "tabs": {
+        "details": {
+          "title": "Details",
+          "form": {
+            "folder": {
+              "label": "Project folder",
+              "placeholder": "my-app",
+              "tooltip": "Change base folder",
+              "action": "Select this folder"
+            },
+            "manager": {
+              "label": "Package manager",
+              "default": "Default"
+            },
+            "options": {
+              "label": "Additional options",
+              "description": "Overwrite target folder if it exists"
+            }
+          },
+          "buttons": {
+            "cancel": "Cancel",
+            "next": "Next"
+          },
+          "modal": {
+            "title": "Cancel and reset project creation",
+            "body": "Are you sure you want to reset the project creation?",
+            "buttons": {
+              "back": "Go back",
+              "clear": "Clear project"
+            }
+          }
+        },
+        "presets": {
+          "title": "Presets",
+          "description": "A preset is an association of plugins and configurations. After you've selected features, you can optionally save it as a preset so that you can reuse it for future projects, without having to reconfigure everything again.",
+          "select": "Select a preset",
+          "buttons": {
+            "previous": "Previous",
+            "next": "Next",
+            "create": "Create Project"
+          },
+          "modal": {
+            "title": "Configure Remote preset",
+            "body": "Available soon..."
+          },
+          "manual": {
+            "name": "Manual",
+            "description": "Manually select features"
+          },
+          "remote": {
+            "name": "Remote preset",
+            "description": "Fetch a preset from a git repository"
+          },
+          "default-preset": "Default preset"
+        },
+        "features": {
+          "title": "Features",
+          "description": "You will be able to add features after the project is created by installing plugins.",
+          "enable": "Enable features",
+          "buttons": {
+            "previous": "Previous",
+            "next": "Next",
+            "create": "Create Project"
+          },
+          "userConfigFiles": {
+            "name": "Use config files",
+            "description": "Use specific configuration files (like '.babelrc') instead of using 'package.json'."
+          }
+        },
+        "configuration": {
+          "title": "Configuration",
+          "buttons": {
+            "previous": "Previous",
+            "create": "Create Project"
+          },
+          "modal": {
+            "title": "Save as a new preset",
+            "body": {
+              "title": "Preset name",
+              "subtitle": "Save the features and configuration into a new preset"
+            },
+            "buttons": {
+              "cancel": "Cancel",
+              "continue": "Continue without saving",
+              "create": "Create a new preset"
+            }
+          }
+        }
+      }
+    },
+    "project-plugins": {
+      "title": "Project plugins",
+      "button": "Add plugin",
+      "heading": "Installed plugins"
+    },
+    "project-plugins-add": {
+      "title": "Add a plugin",
+      "plugin": "plugin",
+      "tabs": {
+        "search": {
+          "label": "Search",
+          "search-input": "Search a plugin",
+          "not-found": "No results found",
+          "buttons": {
+            "cancel": "Cancel",
+            "install": "Install {target}"
+          }
+        },
+        "configuration": {
+          "label": "Configuration",
+          "heading": "Installation of {target}",
+          "buttons": {
+            "cancel": "Cancel",
+            "finish": "Finish installation"
+          }
+        },
+        "diff": {
+          "label": "Files changed"
+        }
+      },
+      "modal": {
+        "title": "Uninstall {target}?",
+        "body": "Do you want to uninstall the {target} plugin?",
+        "buttons": {
+          "back": "Go back",
+          "cancel": "Cancel without uninstalling",
+          "uninstall": "Uninstall"
+        }
+      }
+    },
+    "project-configurations": {
+      "title": "Project configuration"
+    },
+    "project-configuration-details": {
+      "actions": {
+        "cancel": "Cancel changes",
+        "save": "Save changes",
+        "more-info": "More info"
+      }
+    },
+    "project-tasks": {
+      "title": "Project tasks"
+    },
+    "project-task-details": {
+      "actions": {
+        "play": "Run task",
+        "stop": "Stop task",
+        "close": "Close"
+      },
+      "command": "Script command",
+      "parameters": "Parameters",
+      "parameters-info": "Parameters will be saved when the task is run.",
+      "more-info": "More Info",
+      "output": "Output"
+    },
+    "about": {
+      "title": "About",
+      "description": "<a href=\"https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-ui\" target=\"_blank\">@vue/cli-ui</a> is a built-in package of vue-cli which opens a full-blown UI.",
+      "quote": "Vue-cli 3.x is a complete rewrite, with a lot of new awesome features. You will be to select features like routing, Vuex or Typescript, then add and upgrade building blocks called \"vue-cli plugins\". But having so much more options also means the tool is now more complex and harder to start using. That's why we thought having a full-blown GUI would help discover the new features, search and install vue-cli plugins and unlock more possibilities overall while not being limited by a terminal interface. To sum up, vue-cli will not only allow you to bootstrap a new project easily, but it will also remain useful for ongoing work afterwards!",
+      "links": "Useful links",
+      "back": "Go back"
+    }
+  },
+  "vue-webpack": {
+    "dashboard": {
+      "title": "Dashboard",
+      "open-app": "Open app",
+      "webpack-status": {
+        "Success": "Success",
+        "Failed": "Failed",
+        "Compiling": "Compiling",
+        "Invalidated": "Invalidated",
+        "Idle": "Idle"
+      },
+      "build-status": {
+        "labels": {
+          "status": "Status",
+          "errors": "Errors",
+          "warnings": "Warnings",
+          "assets": "Assets",
+          "modules": "Modules",
+          "deps": "Dependencies"
+        }
+      },
+      "speed-stats": {
+        "title": "Speed stats"
+      },
+      "module-list": {
+        "title": "Dependencies"
+      },
+      "asset-list": {
+        "title": "Assets",
+        "size-warning": "This asset is big, consider using Code splitting to create smaller assets."
+      }
+    },
+    "analyzer": {
+      "title": "Analyzer",
+      "go-up": "Go up",
+      "go-home": "Go to home",
+      "chunk": "Chunk"
+    },
+    "sizes": {
+      "stats": "Stats",
+      "parsed": "Parsed",
+      "gzip": "Gzip",
+      "help": "<b>Stats:</b> size from webpack stats data.<br><b>Parsed:</b> size from extracted source (after minification plugins). More accurate.<br><b>Gzip:</b> size of gzipped extracted source."
+    },
+    "tasks": {
+      "serve": {
+        "description": "Compiles and hot-reloads for development",
+        "open": "Open browser on server start",
+        "mode": "Specify env mode",
+        "host": "Specify host",
+        "port": "Specify port",
+        "https": "Use HTTPS"
+      },
+      "build": {
+        "description": "Compiles and minifies for production",
+        "mode": "Specify env mode",
+        "dest": "Output directory",
+        "target": {
+          "description": "Build target",
+          "app": "Web app",
+          "lib": "Library",
+          "wc": "Web component",
+          "wc-async": "Async web component"
+        },
+        "name": "Name for library or web-component mode (default: 'name' in package.json or entry filename)",
+        "watch": "Watch for changes"
+      },
+      "inspect": {
+        "description": "Inspect the resolved webpack config",
+        "mode": "Specify env mode",
+        "verbose": "Show full function definitions in output"
+      }
+    }
+  },
+  "eslint": {
+    "config": {
+      "eslint": {
+        "description": "Error checking & Code quality",
+        "groups": {
+          "strongly-recommended": "Strongly recommended",
+          "recommended": "Recommended"
+        }
+      },
+      "eslint-extra": {
+        "description": "Extra ESLint settings",
+        "lintOnSave": {
+          "message": "Lint on save",
+          "description": "Automatically lint source files when saved"
+        }
+      }
+    },
+    "tasks": {
+      "lint": {
+        "description": "Lints and fixes files",
+        "noFix": "Do not fix errors"
+      }
+    }
+  },
+  "pwa": {
+    "config": {
+      "pwa": {
+        "description": "Progressive Web App",
+        "workboxPluginMode": {
+          "message": "Plugin mode",
+          "description": "This allows you to the choose between the two modes supported by the underlying `workbox-webpack-plugin`"
+        },
+        "name": {
+          "message": "App name",
+          "description": "App name displayed on the Splash screen and various other places. Also used as the value for the `apple-mobile-web-app-title` meta tag in the generated HTML."
+        },
+        "themeColor": {
+          "message": "Theme color",
+          "description": "Color used to theme the browser"
+        },
+        "backgroundColor": {
+          "message": "Splash background color",
+          "description": "Background color used for the app splash screen"
+        },
+        "msTileColor": {
+          "message": "Windows app tile color",
+          "description": "Color used for the app tile on Windows"
+        },
+        "appleMobileWebAppStatusBarStyle": {
+          "message": "Apple mobile status bar style",
+          "description": "Style for the web app status bar on iOS"
+        }
+      }
+    }
+  },
+  "cypress": {
+    "tasks": {
+      "test": {
+        "description": "Run e2e tests with `cypress run`",
+        "headless": "Run in headless mode without GUI",
+        "mode": "Specify the mode the dev server should run in",
+        "url": "Run e2e tests against given url instead of auto-starting dev server"
+      }
+    }
+  },
+  "nightwatch": {
+    "tasks": {
+      "test": {
+        "description": "Run e2e tests with nightwatch",
+        "url": "Run e2e tests against given url instead of auto-starting dev server"
+      }
+    }
+  }
+}
diff --git a/packages/@vue/cli-ui/package.json b/packages/@vue/cli-ui/package.json
new file mode 100644
index 0000000000..bbeaf19180
--- /dev/null
+++ b/packages/@vue/cli-ui/package.json
@@ -0,0 +1,89 @@
+{
+  "name": "@vue/cli-ui",
+  "version": "3.0.0-beta.11",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "graphql-api": "cross-env VUE_CLI_DEBUG=true vue-cli-service graphql-api",
+    "run-graphql-api": "vue-cli-service run-graphql-api",
+    "run-test-graphql-api": "cross-env NODE_ENV=test VUE_APP_GRAPHQL_PORT=4040 VUE_APP_CLI_UI_URL=ws://localhost:4040/graphql yarn run graphql-api",
+    "prepublishOnly": "yarn run lint --no-fix && yarn run build",
+    "test:e2e:dev": "cross-env VUE_APP_CLI_UI_URL=ws://localhost:4040/graphql vue-cli-service test:e2e --mode development",
+    "test:e2e:run": "vue-cli-service test:e2e --mode production --headless --url=http://localhost:4040",
+    "test:e2e": "start-server-and-test run-test-graphql-api http://localhost:4040 test:e2e:dev",
+    "test:run": "start-server-and-test run-test-graphql-api http://localhost:4040 test:e2e:run",
+    "test": "yarn run build && cd ../cli-ui-addon-webpack && yarn run build && cd ../cli-ui && yarn run test:run"
+  },
+  "dependencies": {
+    "clone": "^2.1.1",
+    "deepmerge": "^2.1.0",
+    "express-history-api-fallback": "^2.2.1",
+    "fs-extra": "^6.0.0",
+    "graphql": "^0.13.0",
+    "graphql-tag": "^2.9.2",
+    "graphql-type-json": "^0.2.0",
+    "js-yaml": "^3.11.0",
+    "lodash.merge": "^4.6.1",
+    "lowdb": "^1.0.0",
+    "lru-cache": "^4.1.2",
+    "node-notifier": "^5.2.1",
+    "semver": "^5.5.0",
+    "shortid": "^2.2.8",
+    "terminate": "^2.1.0",
+    "vue-cli-plugin-apollo": "^0.11.0",
+    "watch": "^1.0.2"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.0.0-beta.11",
+    "@vue/cli-plugin-e2e-cypress": "^3.0.0-beta.11",
+    "@vue/cli-plugin-eslint": "^3.0.0-beta.11",
+    "@vue/cli-service": "^3.0.0-beta.11",
+    "@vue/eslint-config-standard": "^3.0.0-beta.11",
+    "@vue/ui": "^0.2.5",
+    "ansi_up": "^2.0.2",
+    "cross-env": "^5.1.5",
+    "eslint": "^4.16.0",
+    "file-icons-js": "^1.0.3",
+    "lint-staged": "^6.0.0",
+    "start-server-and-test": "^1.4.1",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.1",
+    "vue": "^2.5.16",
+    "vue-apollo": "^3.0.0-beta.5",
+    "vue-color": "^2.4.6",
+    "vue-i18n": "^7.6.0",
+    "vue-instantsearch": "^1.5.1",
+    "vue-meta": "^1.5.0",
+    "vue-router": "^3.0.1",
+    "vue-template-compiler": "^2.5.16",
+    "xterm": "^3.2.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ],
+  "main": "index.js",
+  "license": "MIT",
+  "author": "Guillaume Chau",
+  "engines": {
+    "node": ">=8"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.js": [
+      "vue-cli-service lint",
+      "git add"
+    ],
+    "*.vue": [
+      "vue-cli-service lint",
+      "git add"
+    ]
+  }
+}
diff --git a/packages/@vue/cli-ui/public/favicon.ico b/packages/@vue/cli-ui/public/favicon.ico
new file mode 100644
index 0000000000..c7b9a43c8c
Binary files /dev/null and b/packages/@vue/cli-ui/public/favicon.ico differ
diff --git a/packages/@vue/cli-ui/public/index.html b/packages/@vue/cli-ui/public/index.html
new file mode 100644
index 0000000000..96098ec9c7
--- /dev/null
+++ b/packages/@vue/cli-ui/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
+    <title>Vue CLI</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but cli-ui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/packages/@vue/cli-ui/src/App.vue b/packages/@vue/cli-ui/src/App.vue
new file mode 100644
index 0000000000..dcab4ee4a9
--- /dev/null
+++ b/packages/@vue/cli-ui/src/App.vue
@@ -0,0 +1,51 @@
+<template>
+  <div id="app" class="app">
+    <div v-if="ready" class="content">
+      <router-view/>
+    </div>
+    <VueLoadingIndicator v-else class="overlay big accent"/>
+
+    <StatusBar/>
+    <ClientAddonLoader/>
+    <LocaleLoader/>
+  </div>
+</template>
+
+<script>
+import i18n from './i18n'
+
+export default {
+  metaInfo: {
+    titleTemplate: chunk => chunk ? `[Beta] ${chunk} - Vue CLI` : '[Beta] Vue CLI'
+  },
+
+  computed: {
+    ready () {
+      return Object.keys(i18n.getLocaleMessage('en')).length
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+@import "~@vue/ui/dist/vue-ui.css"
+@import "~file-icons-js/css/style.css"
+@import "~@/style/main"
+</style>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.app
+  display grid
+  grid-template-columns 1fr
+  grid-template-rows 1fr auto
+  grid-template-areas "content" "status"
+
+.content
+  grid-area content
+  overflow hidden
+
+.status-bar
+  grid-area status
+</style>
diff --git a/packages/@vue/cli-ui/src/assets/done.png b/packages/@vue/cli-ui/src/assets/done.png
new file mode 100644
index 0000000000..844970e622
Binary files /dev/null and b/packages/@vue/cli-ui/src/assets/done.png differ
diff --git a/packages/@vue/cli-ui/src/assets/error.png b/packages/@vue/cli-ui/src/assets/error.png
new file mode 100644
index 0000000000..335e6b4929
Binary files /dev/null and b/packages/@vue/cli-ui/src/assets/error.png differ
diff --git a/packages/@vue/cli-ui/src/assets/logo.png b/packages/@vue/cli-ui/src/assets/logo.png
new file mode 100644
index 0000000000..8e984b9bca
Binary files /dev/null and b/packages/@vue/cli-ui/src/assets/logo.png differ
diff --git a/packages/@vue/cli-ui/src/assets/search-by-algolia.svg b/packages/@vue/cli-ui/src/assets/search-by-algolia.svg
new file mode 100644
index 0000000000..989ed6ab8f
--- /dev/null
+++ b/packages/@vue/cli-ui/src/assets/search-by-algolia.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 130 18" xmlns="http://www.w3.org/2000/svg"><title>search-by-algolia</title><defs><linearGradient x1="-36.868%" y1="134.936%" x2="129.432%" y2="-27.7%" id="a"><stop stop-color="#00AEFF" offset="0%"/><stop stop-color="#3369E7" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="M59.399.022h13.299a2.372 2.372 0 0 1 2.377 2.364V15.62a2.372 2.372 0 0 1-2.377 2.364H59.399a2.372 2.372 0 0 1-2.377-2.364V2.381A2.368 2.368 0 0 1 59.399.022z" fill="url(#a)"/><path d="M66.257 4.56c-2.815 0-5.1 2.272-5.1 5.078 0 2.806 2.284 5.072 5.1 5.072 2.815 0 5.1-2.272 5.1-5.078 0-2.806-2.279-5.072-5.1-5.072zm0 8.652c-1.983 0-3.593-1.602-3.593-3.574 0-1.972 1.61-3.574 3.593-3.574 1.983 0 3.593 1.602 3.593 3.574a3.582 3.582 0 0 1-3.593 3.574zm0-6.418v2.664c0 .076.082.131.153.093l2.377-1.226c.055-.027.071-.093.044-.147a2.96 2.96 0 0 0-2.465-1.487c-.055 0-.11.044-.11.104l.001-.001zm-3.33-1.956l-.312-.311a.783.783 0 0 0-1.106 0l-.372.37a.773.773 0 0 0 0 1.101l.307.305c.049.049.121.038.164-.011.181-.245.378-.479.597-.697.225-.223.455-.42.707-.599.055-.033.06-.109.016-.158h-.001zm5.001-.806v-.616a.781.781 0 0 0-.783-.779h-1.824a.78.78 0 0 0-.783.779v.632c0 .071.066.12.137.104a5.736 5.736 0 0 1 1.588-.223c.52 0 1.035.071 1.534.207a.106.106 0 0 0 .131-.104z" fill="#FFF"/><path d="M102.162 13.762c0 1.455-.372 2.517-1.123 3.193-.75.676-1.895 1.013-3.44 1.013-.564 0-1.736-.109-2.673-.316l.345-1.689c.783.163 1.819.207 2.361.207.86 0 1.473-.174 1.84-.523.367-.349.548-.866.548-1.553v-.349a6.374 6.374 0 0 1-.838.316 4.151 4.151 0 0 1-1.194.158 4.515 4.515 0 0 1-1.616-.278 3.385 3.385 0 0 1-1.254-.817 3.744 3.744 0 0 1-.811-1.351c-.192-.539-.29-1.504-.29-2.212 0-.665.104-1.498.307-2.054a3.925 3.925 0 0 1 .904-1.433 4.124 4.124 0 0 1 1.441-.926 5.31 5.31 0 0 1 1.945-.365c.696 0 1.337.087 1.961.191a15.86 15.86 0 0 1 1.588.332v8.456h-.001zm-5.954-4.206c0 .893.197 1.885.592 2.299.394.414.904.621 1.528.621.34 0 .663-.049.964-.142a2.75 2.75 0 0 0 .734-.332v-5.29a8.531 8.531 0 0 0-1.413-.18c-.778-.022-1.369.294-1.786.801-.411.507-.619 1.395-.619 2.223zm16.12 0c0 .719-.104 1.264-.318 1.858a4.389 4.389 0 0 1-.904 1.52c-.389.42-.854.746-1.402.975-.548.229-1.391.36-1.813.36-.422-.005-1.26-.125-1.802-.36a4.088 4.088 0 0 1-1.397-.975 4.486 4.486 0 0 1-.909-1.52 5.037 5.037 0 0 1-.329-1.858c0-.719.099-1.411.318-1.999.219-.588.526-1.09.92-1.509.394-.42.865-.741 1.402-.97a4.547 4.547 0 0 1 1.786-.338 4.69 4.69 0 0 1 1.791.338c.548.229 1.019.55 1.402.97.389.42.69.921.909 1.509.23.588.345 1.28.345 1.999h.001zm-2.191.005c0-.921-.203-1.689-.597-2.223-.394-.539-.948-.806-1.654-.806-.707 0-1.26.267-1.654.806-.394.539-.586 1.302-.586 2.223 0 .932.197 1.558.592 2.098.394.545.948.812 1.654.812.707 0 1.26-.272 1.654-.812.394-.545.592-1.166.592-2.098h-.001zm6.962 4.707c-3.511.016-3.511-2.822-3.511-3.274L113.583.926l2.142-.338v10.003c0 .256 0 1.88 1.375 1.885v1.792h-.001zm3.774 0h-2.153V5.072l2.153-.338v9.534zm-1.079-10.542c.718 0 1.304-.578 1.304-1.291 0-.714-.581-1.291-1.304-1.291-.723 0-1.304.578-1.304 1.291 0 .714.586 1.291 1.304 1.291zm6.431 1.013c.707 0 1.304.087 1.786.262.482.174.871.42 1.156.73.285.311.488.735.608 1.182.126.447.186.937.186 1.476v5.481a25.24 25.24 0 0 1-1.495.251c-.668.098-1.419.147-2.251.147a6.829 6.829 0 0 1-1.517-.158 3.213 3.213 0 0 1-1.178-.507 2.455 2.455 0 0 1-.761-.904c-.181-.37-.274-.893-.274-1.438 0-.523.104-.855.307-1.215.208-.36.487-.654.838-.883a3.609 3.609 0 0 1 1.227-.49 7.073 7.073 0 0 1 2.202-.103c.263.027.537.076.833.147v-.349c0-.245-.027-.479-.088-.697a1.486 1.486 0 0 0-.307-.583c-.148-.169-.34-.3-.581-.392a2.536 2.536 0 0 0-.915-.163c-.493 0-.942.06-1.353.131-.411.071-.75.153-1.008.245l-.257-1.749c.268-.093.668-.185 1.183-.278a9.335 9.335 0 0 1 1.66-.142l-.001-.001zm.181 7.731c.657 0 1.145-.038 1.484-.104v-2.168a5.097 5.097 0 0 0-1.978-.104c-.241.033-.46.098-.652.191a1.167 1.167 0 0 0-.466.392c-.121.169-.175.267-.175.523 0 .501.175.79.493.981.323.196.75.289 1.293.289h.001zM84.109 4.794c.707 0 1.304.087 1.786.262.482.174.871.42 1.156.73.29.316.487.735.608 1.182.126.447.186.937.186 1.476v5.481a25.24 25.24 0 0 1-1.495.251c-.668.098-1.419.147-2.251.147a6.829 6.829 0 0 1-1.517-.158 3.213 3.213 0 0 1-1.178-.507 2.455 2.455 0 0 1-.761-.904c-.181-.37-.274-.893-.274-1.438 0-.523.104-.855.307-1.215.208-.36.487-.654.838-.883a3.609 3.609 0 0 1 1.227-.49 7.073 7.073 0 0 1 2.202-.103c.257.027.537.076.833.147v-.349c0-.245-.027-.479-.088-.697a1.486 1.486 0 0 0-.307-.583c-.148-.169-.34-.3-.581-.392a2.536 2.536 0 0 0-.915-.163c-.493 0-.942.06-1.353.131-.411.071-.75.153-1.008.245l-.257-1.749c.268-.093.668-.185 1.183-.278a8.89 8.89 0 0 1 1.66-.142l-.001-.001zm.186 7.736c.657 0 1.145-.038 1.484-.104v-2.168a5.097 5.097 0 0 0-1.978-.104c-.241.033-.46.098-.652.191a1.167 1.167 0 0 0-.466.392c-.121.169-.175.267-.175.523 0 .501.175.79.493.981.318.191.75.289 1.293.289h.001zm8.682 1.738c-3.511.016-3.511-2.822-3.511-3.274L89.461.926l2.142-.338v10.003c0 .256 0 1.88 1.375 1.885v1.792h-.001z" fill="#182359"/><path d="M5.027 11.025c0 .698-.252 1.246-.757 1.644-.505.397-1.201.596-2.089.596-.888 0-1.615-.138-2.181-.414v-1.214c.358.168.739.301 1.141.397.403.097.778.145 1.125.145.508 0 .884-.097 1.125-.29a.945.945 0 0 0 .363-.779.978.978 0 0 0-.333-.747c-.222-.204-.68-.446-1.375-.725-.716-.29-1.221-.621-1.515-.994-.294-.372-.44-.82-.44-1.343 0-.655.233-1.171.698-1.547.466-.376 1.09-.564 1.875-.564.752 0 1.5.165 2.245.494l-.408 1.047c-.698-.294-1.321-.44-1.869-.44-.415 0-.73.09-.945.271a.89.89 0 0 0-.322.717c0 .204.043.379.129.524.086.145.227.282.424.411.197.129.551.299 1.063.51.577.24.999.464 1.268.671.269.208.466.442.591.704.125.261.188.569.188.924l-.001.002zm3.98 2.24c-.924 0-1.646-.269-2.167-.808-.521-.539-.782-1.281-.782-2.226 0-.97.242-1.733.725-2.288.483-.555 1.148-.833 1.993-.833.784 0 1.404.238 1.858.714.455.476.682 1.132.682 1.966v.682H7.357c.018.577.174 1.02.467 1.329.294.31.707.465 1.241.465.351 0 .678-.033.98-.099a5.1 5.1 0 0 0 .975-.33v1.026a3.865 3.865 0 0 1-.935.312 5.723 5.723 0 0 1-1.08.091l.002-.001zm-.231-5.199c-.401 0-.722.127-.964.381s-.386.625-.432 1.112h2.696c-.007-.491-.125-.862-.354-1.115-.229-.252-.544-.379-.945-.379l-.001.001zm7.692 5.092l-.252-.827h-.043c-.286.362-.575.608-.865.739-.29.131-.662.196-1.117.196-.584 0-1.039-.158-1.367-.473-.328-.315-.491-.761-.491-1.337 0-.612.227-1.074.682-1.386.455-.312 1.148-.482 2.079-.51l1.026-.032v-.317c0-.38-.089-.663-.266-.851-.177-.188-.452-.282-.824-.282-.304 0-.596.045-.876.134a6.68 6.68 0 0 0-.806.317l-.408-.902a4.414 4.414 0 0 1 1.058-.384 4.856 4.856 0 0 1 1.085-.132c.756 0 1.326.165 1.711.494.385.329.577.847.577 1.552v4.002h-.902l-.001-.001zm-1.88-.859c.458 0 .826-.128 1.104-.384.278-.256.416-.615.416-1.077v-.516l-.763.032c-.594.021-1.027.121-1.297.298s-.406.448-.406.814c0 .265.079.47.236.615.158.145.394.218.709.218h.001zm7.557-5.189c.254 0 .464.018.628.054l-.124 1.176a2.383 2.383 0 0 0-.559-.064c-.505 0-.914.165-1.227.494-.313.329-.47.757-.47 1.284v3.105h-1.262V7.218h.988l.167 1.047h.064c.197-.354.454-.636.771-.843a1.83 1.83 0 0 1 1.023-.312h.001zm4.125 6.155c-.899 0-1.582-.262-2.049-.787-.467-.525-.701-1.277-.701-2.259 0-.999.244-1.767.733-2.304.489-.537 1.195-.806 2.119-.806.627 0 1.191.116 1.692.349l-.381 1.015c-.534-.208-.974-.312-1.321-.312-1.028 0-1.542.682-1.542 2.046 0 .666.128 1.166.384 1.501.256.335.631.502 1.125.502a3.23 3.23 0 0 0 1.595-.419v1.101a2.53 2.53 0 0 1-.722.285 4.356 4.356 0 0 1-.932.086v.002zm8.277-.107h-1.268V9.506c0-.458-.092-.8-.277-1.026-.184-.226-.477-.338-.878-.338-.53 0-.919.158-1.168.475-.249.317-.373.848-.373 1.593v2.949h-1.262V4.801h1.262v2.122c0 .34-.021.704-.064 1.09h.081a1.76 1.76 0 0 1 .717-.666c.306-.158.663-.236 1.072-.236 1.439 0 2.159.725 2.159 2.175v3.873l-.001-.001zm7.649-6.048c.741 0 1.319.269 1.732.806.414.537.62 1.291.62 2.261 0 .974-.209 1.732-.628 2.275-.419.542-1.001.814-1.746.814-.752 0-1.336-.27-1.751-.811h-.086l-.231.704h-.945V4.801h1.262v1.987l-.021.655-.032.553h.054c.401-.591.992-.886 1.772-.886zm-.328 1.031c-.508 0-.875.149-1.098.448-.224.299-.339.799-.346 1.501v.086c0 .723.115 1.247.344 1.571.229.324.603.486 1.123.486.448 0 .787-.177 1.018-.532.231-.354.346-.867.346-1.536 0-1.35-.462-2.025-1.386-2.025l-.001.001zm3.244-.924h1.375l1.209 3.368c.183.48.304.931.365 1.354h.043c.032-.197.091-.436.177-.717.086-.281.541-1.616 1.364-4.004h1.364l-2.541 6.73c-.462 1.235-1.232 1.853-2.31 1.853-.279 0-.551-.03-.816-.091v-.999c.19.043.406.064.65.064.609 0 1.037-.353 1.284-1.058l.22-.559-2.385-5.941h.001z" fill="#1D3657"/></g></svg>
\ No newline at end of file
diff --git a/packages/@vue/cli-ui/src/components/ClientAddonComponent.vue b/packages/@vue/cli-ui/src/components/ClientAddonComponent.vue
new file mode 100644
index 0000000000..595156a30e
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/ClientAddonComponent.vue
@@ -0,0 +1,48 @@
+<template>
+  <component
+    v-if="component"
+    :is="component"
+  />
+  <div v-else class="loading">
+    <VueLoadingIndicator />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      default: null
+    }
+  },
+
+  data () {
+    return {
+      component: null
+    }
+  },
+
+  watch: {
+    name: {
+      handler: 'updateComponent',
+      immediate: true
+    }
+  },
+
+  methods: {
+    async updateComponent () {
+      this.component = await ClientAddonApi.awaitComponent(this.name)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.loading
+  v-box()
+  box-center()
+  padding 100px
+</style>
diff --git a/packages/@vue/cli-ui/src/components/ClientAddonLoader.vue b/packages/@vue/cli-ui/src/components/ClientAddonLoader.vue
new file mode 100644
index 0000000000..f00295f37f
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/ClientAddonLoader.vue
@@ -0,0 +1,40 @@
+<script>
+import CLIENT_ADDONS from '../graphql/clientAddons.gql'
+import CLIENT_ADDON_ADDED from '../graphql/clientAddonAdded.gql'
+
+export default {
+  apollo: {
+    clientAddons: {
+      query: CLIENT_ADDONS,
+      fetchPolicy: 'no-cache',
+      manual: true,
+      result ({ data: { clientAddons } }) {
+        clientAddons.forEach(this.loadAddon)
+      }
+    },
+
+    $subscribe: {
+      clientAddonAdded: {
+        query: CLIENT_ADDON_ADDED,
+        result ({ data }) {
+          this.loadAddon(data.clientAddonAdded)
+        }
+      }
+    }
+  },
+
+  methods: {
+    loadAddon (addon) {
+      // eslint-disable-next-line no-console
+      console.log(`[UI] Loading client addon ${addon.id} (${addon.url})...`)
+      const script = document.createElement('script')
+      script.setAttribute('src', addon.url)
+      document.body.appendChild(script)
+    }
+  },
+
+  render () {
+    return null
+  }
+}
+</script>
diff --git a/packages/@vue/cli-ui/src/components/ConfigurationItem.vue b/packages/@vue/cli-ui/src/components/ConfigurationItem.vue
new file mode 100644
index 0000000000..0dbdc1f527
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/ConfigurationItem.vue
@@ -0,0 +1,74 @@
+<template>
+  <div
+    class="configuration-item list-item"
+    :class="{
+      selected
+    }"
+    v-tooltip.right="$t(configuration.description)"
+  >
+    <div class="content">
+      <ItemLogo
+        :file-icon="iconClass"
+      />
+
+      <ListItemInfo
+        :name="configuration.name"
+        :description="$t(configuration.description)"
+        :selected="selected"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import icons from 'file-icons-js'
+
+export default {
+  props: {
+    configuration: {
+      type: Object,
+      required: true
+    },
+
+    selected: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  computed: {
+    iconClass () {
+      return icons.getClassWithColor(this.getFileName(this.configuration.icon) || this.configuration.id) || 'gear-icon medium-blue'
+    }
+  },
+
+  methods: {
+    getFileName (icon) {
+      if (icon) {
+        if (!icon.includes('.')) return `f.${icon}`
+        return icon
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.configuration-item
+  padding $padding-item
+
+  .content
+    h-box()
+    box-center()
+
+  .list-item-info
+    flex auto 1 1
+    width 0
+
+    >>> .description
+      white-space nowrap
+      overflow hidden
+      text-overflow ellipsis
+</style>
diff --git a/packages/@vue/cli-ui/src/components/ContentView.vue b/packages/@vue/cli-ui/src/components/ContentView.vue
new file mode 100644
index 0000000000..cd0e98f924
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/ContentView.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="content-view">
+    <div class="header">
+      <div class="wrapper">
+        <h2 v-if="title" class="title">{{ title }}</h2>
+        <slot name="header"/>
+      </div>
+    </div>
+
+    <div class="content">
+      <div class="wrapper">
+        <slot/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: null
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.content-view
+  height 100%
+  display grid
+  grid-template-columns 1fr
+  grid-template-rows auto 1fr
+  grid-template-areas "header" "content"
+
+  .wrapper
+    width 100%
+    height 100%
+    box-sizing border-box
+
+  .header
+    grid-area header
+    background darken($vue-ui-color-light-neutral, 3%)
+    .wrapper
+      background $vue-ui-color-light-neutral
+      h-box()
+      box-center()
+      padding $padding-item
+
+    .title
+      flex 100% 1 1
+      width 0
+      margin 0
+
+    >>> > *
+      space-between-x($padding-item)
+
+  .content
+    grid-area content
+    background $color-background-light
+    .wrapper
+      background $md-white
+      position relative
+      overflow-x hidden
+      overflow-y auto
+
+  &.limit-width
+    .wrapper
+      max-width 1200px
+</style>
diff --git a/packages/@vue/cli-ui/src/components/FileDiff.vue b/packages/@vue/cli-ui/src/components/FileDiff.vue
new file mode 100644
index 0000000000..ec3db3600e
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/FileDiff.vue
@@ -0,0 +1,157 @@
+<template>
+  <div
+    :class="{
+      new: fileDiff.new,
+      deleted: fileDiff.deleted
+    }"
+    class="file-diff"
+  >
+    <div class="toolbar" @click="$emit('update:collapsed', !collapsed)">
+      <VueIcon class="file-icon" :icon="icon"/>
+      <template v-if="fileDiff.from !== fileDiff.to && !fileDiff.new">
+        <div class="name from-file">
+          <span v-tooltip="fileDiff.from">{{ fileDiff.from }}</span>
+        </div>
+        <VueIcon v-if="!fileDiff.deleted" icon="arrow_forward"/>
+      </template>
+      <div v-if="!fileDiff.deleted" class="name to-file">
+        <span v-tooltip="fileDiff.to">{{ fileDiff.to }}</span>
+      </div>
+
+      <div class="vue-ui-spacer"/>
+
+      <VueButton
+        v-if="!fileDiff.deleted"
+        icon-left="edit"
+        class="icon-button"
+        v-tooltip="$t('components.file-diff.actions.open')"
+        @click.stop="openInEditor()"
+      />
+
+      <VueButton
+        :icon-left="collapsed ? 'keyboard_arrow_down' : 'keyboard_arrow_up'"
+        class="icon-button"
+      />
+    </div>
+
+    <div v-if="!collapsed" class="content">
+      <div v-if="fileDiff.binary" class="is-binary">
+        <VueIcon icon="memory" class="icon"/>
+        <span>{{ $t('components.file-diff.binary') }}</span>
+      </div>
+      <template v-else>
+        <FileDiffChunk
+          v-for="(chunk, index) in fileDiff.chunks"
+          :key="index"
+          :chunk="chunk"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import FILE_OPEN_IN_EDITOR from '../graphql/fileOpenInEditor.gql'
+
+export default {
+  provide () {
+    const vm = this
+    return {
+      FileDiffInjection: {
+        get data () { return vm.fileDiff }
+      }
+    }
+  },
+
+  props: {
+    fileDiff: {
+      type: Object,
+      required: true
+    },
+
+    collapsed: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  computed: {
+    icon () {
+      if (this.fileDiff.new) {
+        return 'note_add'
+      } else if (this.fileDiff.deleted) {
+        return 'delete'
+      }
+      return 'insert_drive_file'
+    }
+  },
+
+  methods: {
+    openInEditor () {
+      this.$apollo.mutate({
+        mutation: FILE_OPEN_IN_EDITOR,
+        variables: {
+          input: {
+            file: this.fileDiff.to,
+            gitPath: true
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+status-color($color)
+  .name
+    color $color
+  .file-icon
+    >>> svg
+      fill $color
+
+.file-diff
+  background $vue-ui-color-light
+  border solid 1px $vue-ui-color-light-neutral
+  margin $padding-item
+
+  .toolbar
+    padding $padding-item
+    background $color-background-light
+    h-box()
+    align-items center
+
+    >>> > *
+      space-between-x($padding-item)
+
+    .file-icon
+      >>> svg
+        fill darken($vue-ui-color-light-neutral, 20%)
+
+    .name
+      flex auto 1 0
+      font-family $font-mono
+      font-size 12px
+      ellipsis()
+      &.from-file
+        text-decoration line-through
+      &.to-file
+        flex 100% 1 1
+        width 0
+
+  .is-binary
+    h-box()
+    box-center()
+    padding $padding-item
+    opacity .5
+
+    .icon
+      margin-right 4px
+
+  &.new
+    status-color($vue-ui-color-success)
+  &.deleted
+    status-color($vue-ui-color-danger)
+</style>
diff --git a/packages/@vue/cli-ui/src/components/FileDiffChange.vue b/packages/@vue/cli-ui/src/components/FileDiffChange.vue
new file mode 100644
index 0000000000..5302a544ce
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/FileDiffChange.vue
@@ -0,0 +1,122 @@
+<template>
+  <div
+    :class="[
+      `type-${change.type}`
+    ]"
+    class="file-diff-change"
+  >
+    <div class="lines">
+      <div class="ln ln1">
+        {{ ln1 }}
+      </div>
+      <div
+        :class="{
+          disabled: !ln2
+        }"
+        class="ln ln2"
+        @click="openInEditor()"
+      >
+        {{ ln2 }}
+      </div>
+    </div>
+    <div class="content">{{ change.content }}</div>
+  </div>
+</template>
+
+<script>
+import FILE_OPEN_IN_EDITOR from '../graphql/fileOpenInEditor.gql'
+
+export default {
+  inject: [
+    'FileDiffInjection'
+  ],
+
+  props: {
+    change: {
+      type: Object,
+      required: true
+    }
+  },
+
+  computed: {
+    ln1 () {
+      if (this.change.normal) {
+        return this.change.ln1
+      } else if (this.change.type === 'del') {
+        return this.change.ln
+      }
+    },
+
+    ln2 () {
+      if (this.change.normal) {
+        return this.change.ln2
+      } else if (this.change.type === 'add') {
+        return this.change.ln
+      }
+    }
+  },
+
+  methods: {
+    openInEditor () {
+      if (!this.ln2) return
+
+      this.$apollo.mutate({
+        mutation: FILE_OPEN_IN_EDITOR,
+        variables: {
+          input: {
+            file: this.FileDiffInjection.data.to,
+            line: this.ln2,
+            gitPath: true
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.file-diff-change
+  font-family $font-mono
+  font-size 12px
+  h-box()
+
+  .ln,
+  .content
+    padding 4px $padding-item
+
+  .lines
+    width 120px
+    h-box()
+    background $color-background-light
+    color rgba($vue-ui-color-dark, .4)
+
+    .ln
+      text-align right
+      flex 100% 1 1
+      width 0
+      overflow hidden
+
+    .ln2
+      cursor pointer
+      &:hover
+        text-decoration underline
+      &.disabled
+        pointer-events none
+
+  .content
+    flex auto 1 1
+    white-space pre
+
+  &.type-add
+    background lighten($vue-ui-color-success, 80%)
+    .lines
+      background lighten($vue-ui-color-success, 60%)
+
+  &.type-del
+    background lighten($vue-ui-color-danger, 80%)
+    .lines
+      background lighten($vue-ui-color-danger, 60%)
+</style>
diff --git a/packages/@vue/cli-ui/src/components/FileDiffChunk.vue b/packages/@vue/cli-ui/src/components/FileDiffChunk.vue
new file mode 100644
index 0000000000..6fb5ca2363
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/FileDiffChunk.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="file-diff-chunk">
+    <div class="changes">
+      <FileDiffChange
+        v-for="(change, index) of chunk.changes"
+        :key="index"
+        :change="change"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    chunk: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.file-diff-chunk
+  .changes
+    overflow-x auto
+    display grid
+    grid-template-column 1fr
+
+  &:not(:last-child)
+    &::after
+      content '•••'
+      height 44px
+      background lighten($vue-ui-color-light-neutral, 30%)
+      h-box()
+      box-center()
+      color darken($vue-ui-color-light-neutral, 30%)
+      letter-spacing 4px
+
+</style>
diff --git a/packages/@vue/cli-ui/src/components/FileDiffView.vue b/packages/@vue/cli-ui/src/components/FileDiffView.vue
new file mode 100644
index 0000000000..a3125451db
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/FileDiffView.vue
@@ -0,0 +1,260 @@
+<template>
+  <div class="file-diff-view">
+    <div class="toolbar">
+      <VueIcon icon="cached"/>
+      <div class="title">{{ $t('components.file-diff-view.files-changed') }}</div>
+      <div class="file-count">{{ fileDiffs.length }}</div>
+      <div class="vue-ui-spacer"/>
+      <VueInput
+        v-model="search"
+        icon-left="search"
+        :placeholder="$t('components.file-diff-view.search-file')"
+      />
+      <VueButton
+        :icon-left="allCollapsed ? 'keyboard_arrow_down' : 'keyboard_arrow_up'"
+        :label="$t(`components.file-diff-view.actions.${allCollapsed ? 'expand-all' : 'collapse-all'}`)"
+        @click="setCollapsedToAll(!allCollapsed)"
+      />
+      <VueButton
+        icon-left="refresh"
+        class="icon-button"
+        @click="refresh()"
+      />
+    </div>
+    <div class="list">
+      <FileDiff
+        v-for="fileDiff of filteredList"
+        :key="fileDiff.id"
+        :file-diff="fileDiff"
+        :collapsed="!!collapsed[fileDiff.id]"
+        @update:collapsed="value => $set(collapsed, fileDiff.id, value)"
+      />
+
+      <div v-if="!filteredList.length" class="vue-ui-empty">
+        <VueIcon icon="check_circle" class="empty-icon"/>
+        <span>{{ $t('components.file-diff-view.empty') }}</span>
+      </div>
+    </div>
+    <div class="actions-bar">
+      <template v-if="fileDiffs.length">
+        <VueButton
+          icon-left="vertical_align_bottom"
+          :label="$t('components.file-diff-view.actions.commit')"
+          class="big primary"
+          @click="openCommitModal()"
+        />
+        <VueButton
+          :label="$t('components.file-diff-view.actions.skip')"
+          class="big"
+          @click="skip()"
+        />
+      </template>
+      <template v-else>
+        <VueButton
+          icon-left="done"
+          :label="$t('components.file-diff-view.actions.continue')"
+          class="big primary"
+          data-testid="skip-button"
+          @click="skip()"
+        />
+        <VueButton
+          :label="$t('components.file-diff-view.actions.refresh')"
+          class="big"
+          @click="refresh()"
+        />
+      </template>
+    </div>
+
+    <transition name="vue-ui-fade">
+      <VueLoadingIndicator
+        v-if="loading"
+        class="overlay"
+      />
+    </transition>
+
+    <VueModal
+      v-if="showCommitModal"
+      :title="$t('components.file-diff-view.modals.commit.title')"
+      class="medium"
+      @close="showCommitModal = false"
+    >
+      <div class="default-body">
+        <VueFormField
+          :title="$t('components.file-diff-view.modals.commit.input')"
+          :subtitle="$t('components.file-diff-view.modals.commit.subtitle')"
+        >
+          <VueInput
+            ref="commitMessageInput"
+            v-model="commitMessage"
+            icon-left="local_offer"
+            @keyup.enter="commitMessage && commit()"
+          />
+        </VueFormField>
+      </div>
+
+      <div slot="footer" class="actions space-between">
+        <VueButton
+          :label="$t('components.file-diff-view.modals.commit.actions.cancel')"
+          class="flat"
+          @click="showCommitModal = false"
+        />
+        <VueButton
+          :label="$t('components.file-diff-view.modals.commit.actions.commit')"
+          class="primary"
+          icon-left="vertical_align_bottom"
+          :disabled="!commitMessage"
+          @click="commit()"
+        />
+      </div>
+    </VueModal>
+  </div>
+</template>
+
+<script>
+import PageVisibility from '../mixins/PageVisibility'
+
+import FILE_DIFFS from '../graphql/fileDiffs.gql'
+import GIT_COMMIT from '../graphql/gitCommit.gql'
+
+const defaultCollapsed = [
+  'yarn.lock',
+  'package-lock.json'
+]
+
+export default {
+  mixins: [
+    PageVisibility
+  ],
+
+  data () {
+    return {
+      fileDiffs: [],
+      collapsed: {},
+      search: '',
+      loading: 0,
+      commitMessage: '',
+      showCommitModal: false
+    }
+  },
+
+  apollo: {
+    fileDiffs: {
+      query: FILE_DIFFS,
+      loadingKey: 'loading',
+      fetchPolicy: 'cahe-and-network',
+      result () {
+        this.fileDiffs.forEach(fileDiff => {
+          if (typeof this.collapsed[fileDiff.id] === 'undefined' && (
+            fileDiff.binary ||
+            defaultCollapsed.includes(fileDiff.from) ||
+            defaultCollapsed.includes(fileDiff.to)
+          )) {
+            this.$set(this.collapsed, fileDiff.id, true)
+          }
+        })
+      }
+    }
+  },
+
+  computed: {
+    allCollapsed () {
+      return !this.fileDiffs.find(
+        fileDiff => !this.collapsed[fileDiff.id]
+      )
+    },
+
+    filteredList () {
+      const search = this.search.trim()
+      if (search) {
+        const reg = new RegExp(search.replace(/\s+/g, '.*'), 'i')
+        return this.fileDiffs.filter(
+          fileDiff => reg.test(fileDiff.from) || reg.test(fileDiff.to)
+        )
+      } else {
+        return this.fileDiffs
+      }
+    }
+  },
+
+  watch: {
+    documentFocus (value) {
+      if (value) {
+        this.refresh()
+      }
+    }
+  },
+
+  methods: {
+    setCollapsedToAll (value) {
+      const map = {}
+      this.fileDiffs.forEach(fileDiff => {
+        map[fileDiff.id] = value
+      })
+      this.collapsed = map
+    },
+
+    refresh () {
+      this.$apollo.queries.fileDiffs.refetch()
+    },
+
+    openCommitModal () {
+      this.showCommitModal = true
+      requestAnimationFrame(() => {
+        this.$refs.commitMessageInput.focus()
+      })
+    },
+
+    async commit () {
+      this.showCommitModal = false
+      this.loading++
+      try {
+        await this.$apollo.mutate({
+          mutation: GIT_COMMIT,
+          variables: {
+            message: this.commitMessage
+          }
+        })
+        this.refresh()
+        this.$emit('continue')
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error(e)
+      }
+      this.loading--
+    },
+
+    skip () {
+      this.$emit('continue')
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.file-diff-view
+  v-box()
+  height 100%
+  position relative
+
+  .toolbar
+    padding $padding-item
+    background $md-white
+    h-box()
+    align-items center
+
+    >>> > *
+      space-between-x($padding-item)
+
+    .file-count
+      padding 3px 6px
+      background darken(@background, 3%)
+      border-radius $br
+
+  .list
+    flex 100% 1 1
+    height 0
+    overflow-x hidden
+    overflow-y auto
+</style>
diff --git a/packages/@vue/cli-ui/src/components/FolderExplorer.vue b/packages/@vue/cli-ui/src/components/FolderExplorer.vue
new file mode 100644
index 0000000000..4d08b9862d
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/FolderExplorer.vue
@@ -0,0 +1,268 @@
+<template>
+  <div
+    class="folder-explorer"
+    :class="{
+      error
+    }"
+  >
+    <div class="toolbar">
+      <VueButton
+        class="icon-button go-up"
+        icon-left="keyboard_arrow_up"
+        v-tooltip="$t('components.folder-explorer.toolbar.tooltips.parent-folder')"
+        @click="openParentFolder"
+      />
+
+      <div v-if="editingPath" class="path-edit">
+        <VueInput
+          ref="pathInput"
+          class="path-input"
+          v-model="editedPath"
+          :placeholder="$t('components.folder-explorer.toolbar.placeholder')"
+          icon-left="edit"
+          @keyup.esc="editingPath = false"
+          @keyup.enter="submitPathEdit()"
+        />
+      </div>
+
+      <ApolloQuery
+        v-else
+        :query="require('@/graphql/cwd.gql')"
+        class="current-path"
+        v-tooltip="$t('components.folder-explorer.toolbar.tooltips.edit-path')"
+        @click.native="openPathEdit()"
+      >
+        <ApolloSubscribeToMore
+          :document="require('@/graphql/cwdChanged.gql')"
+          :update-query="cwdChangedUpdate"
+        />
+
+        <template slot-scope="{ result: { data } }">
+          <span v-if="data">{{ data.cwd }}</span>
+        </template>
+      </ApolloQuery>
+
+      <VueIcon
+        v-if="error"
+        icon="error"
+        class="error-icon big"
+      />
+
+      <VueButton
+        class="icon-button favorite-button"
+        :icon-left="folderCurrent.favorite ? 'star' : 'star_border'"
+        v-tooltip="$t('components.folder-explorer.toolbar.tooltips.favorite')"
+        @click="toggleFavorite()"
+      />
+
+      <VueDropdown
+        placement="bottom-end"
+      >
+        <VueButton
+          slot="trigger"
+          icon-left="arrow_drop_down"
+          class="icon-button"
+          v-tooltip="$t('components.folder-explorer.toolbar.tooltips.favorite-folders')"
+        />
+
+        <template v-if="foldersFavorite.length">
+          <VueDropdownButton
+            v-for="folder of foldersFavorite"
+            :key="folder.path"
+            :label="folder.path"
+            icon-left="folder"
+            @click="openFolder(folder.path)"
+          />
+        </template>
+
+        <div v-else class="vue-ui-empty">
+          {{ $t('components.folder-explorer.toolbar.empty') }}
+        </div>
+      </VueDropdown>
+
+      <VueButton
+        class="icon-button"
+        icon-left="refresh"
+        v-tooltip="$t('components.folder-explorer.toolbar.tooltips.refresh')"
+        @click="refreshFolder"
+      />
+    </div>
+
+    <div class="folders">
+      <template v-if="folderCurrent.children">
+        <FolderExplorerItem
+          v-for="folder of folderCurrent.children"
+          :key="folder.name"
+          :folder="folder"
+          @click.native="openFolder(folder.path)"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import FOLDER_CURRENT from '../graphql/folderCurrent.gql'
+import FOLDERS_FAVORITE from '../graphql/foldersFavorite.gql'
+import FOLDER_OPEN from '../graphql/folderOpen.gql'
+import FOLDER_OPEN_PARENT from '../graphql/folderOpenParent.gql'
+import FOLDER_SET_FAVORITE from '../graphql/folderSetFavorite.gql'
+import PROJECT_CWD_RESET from '../graphql/projectCwdReset.gql'
+
+export default {
+  data () {
+    return {
+      error: false,
+      editingPath: false,
+      editedPath: '',
+      folderCurrent: {},
+      foldersFavorite: []
+    }
+  },
+
+  apollo: {
+    folderCurrent: {
+      query: FOLDER_CURRENT,
+      fetchPolicy: 'network-only'
+    },
+
+    foldersFavorite: FOLDERS_FAVORITE
+  },
+
+  beforeRouteLeave (to, from, next) {
+    if (to.matched.some(m => m.meta.needProject)) {
+      this.resetProjectCwd()
+    }
+    next()
+  },
+
+  methods: {
+    async openFolder (path) {
+      this.editingPath = false
+      this.error = false
+      try {
+        await this.$apollo.mutate({
+          mutation: FOLDER_OPEN,
+          variables: {
+            path
+          },
+          update: (store, { data: { folderOpen } }) => {
+            store.writeQuery({ query: FOLDER_CURRENT, data: { folderCurrent: folderOpen } })
+          }
+        })
+      } catch (e) {
+        this.error = true
+      }
+    },
+
+    async openParentFolder (folder) {
+      this.editingPath = false
+      this.error = false
+      try {
+        await this.$apollo.mutate({
+          mutation: FOLDER_OPEN_PARENT,
+          update: (store, { data: { folderOpenParent } }) => {
+            store.writeQuery({ query: FOLDER_CURRENT, data: { folderCurrent: folderOpenParent } })
+          }
+        })
+      } catch (e) {
+        this.error = true
+      }
+    },
+
+    async toggleFavorite () {
+      await this.$apollo.mutate({
+        mutation: FOLDER_SET_FAVORITE,
+        variables: {
+          path: this.folderCurrent.path,
+          favorite: !this.folderCurrent.favorite
+        },
+        update: (store, { data: { folderSetFavorite } }) => {
+          store.writeQuery({ query: FOLDER_CURRENT, data: { folderCurrent: folderSetFavorite } })
+
+          const data = store.readQuery({ query: FOLDERS_FAVORITE })
+          if (folderSetFavorite.favorite) {
+            data.foldersFavorite.push(folderSetFavorite)
+          } else {
+            const index = data.foldersFavorite.findIndex(
+              f => f.path === folderSetFavorite.path
+            )
+            index !== -1 && data.foldersFavorite.splice(index, 1)
+          }
+          store.writeQuery({ query: FOLDERS_FAVORITE, data })
+        }
+      })
+    },
+
+    cwdChangedUpdate (previousResult, { subscriptionData }) {
+      return {
+        cwd: subscriptionData.data.cwd
+      }
+    },
+
+    async openPathEdit () {
+      this.editedPath = this.folderCurrent.path
+      this.editingPath = true
+      await this.$nextTick()
+      this.$refs.pathInput.focus()
+    },
+
+    submitPathEdit () {
+      this.openFolder(this.editedPath)
+    },
+
+    refreshFolder () {
+      this.openFolder(this.folderCurrent.path)
+    },
+
+    resetProjectCwd () {
+      this.$apollo.mutate({
+        mutation: PROJECT_CWD_RESET
+      })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.toolbar
+  padding $padding-item
+  background $md-white
+  h-box()
+  align-items center
+
+  >>> > *
+    space-between-x($padding-item)
+
+.current-path
+  flex 100% 1 1
+  ellipsis()
+  cursor pointer
+
+.path-edit
+  flex 100% 1 1
+  > .vue-ui-input
+    width 100%
+
+.favorite-button
+  margin-right 4px
+
+.error-icon
+  >>> svg
+    fill $vue-ui-color-danger
+
+.folder-explorer
+  v-box()
+  align-items stretch
+
+  .folders
+    flex 100% 1 1
+    overflow-x hidden
+    overflow-y auto
+
+  &.error
+    .current-path
+      color $vue-ui-color-danger
+</style>
diff --git a/packages/@vue/cli-ui/src/components/FolderExplorerItem.vue b/packages/@vue/cli-ui/src/components/FolderExplorerItem.vue
new file mode 100644
index 0000000000..aa396c5199
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/FolderExplorerItem.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="folder-explorer-item">
+    <VueIcon :icon="folder.isPackage ? 'folder' : 'folder_open'" class="folder-icon big"/>
+    <div class="folder-name">
+      {{ folder.name }}
+      <img
+        v-if="folder.isVueProject"
+        class="vue-ui-project-icon"
+        src="~@/assets/logo.png"
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    folder: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.folder-icon
+  margin 0 4px
+  >>> svg
+    fill $vue-ui-color-primary
+
+.folder-name
+  flex 100% 1 1
+  margin-left $padding-item
+  ellipsis()
+
+.vue-ui-project-icon
+  width 14px
+  height @width
+  vertical-align top
+  position relative
+  top 5px
+
+.folder-explorer-item
+  padding $padding-item
+  h-box()
+  align-items center
+  user-select none
+  cursor pointer
+  position relative
+
+  &:hover
+    background rgba($vue-ui-color-primary, .1)
+</style>
diff --git a/packages/@vue/cli-ui/src/components/InstantSearchInput.vue b/packages/@vue/cli-ui/src/components/InstantSearchInput.vue
new file mode 100644
index 0000000000..c571373bab
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/InstantSearchInput.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="instant-search-input">
+    <VueInput
+      ref="input"
+      icon-left="search"
+      v-model="query"
+      class="big"
+      :placeholder="placeholder"
+    >
+      <template slot="right">
+        <VueButton
+          class="icon-button flat"
+          icon-left="clear"
+          @click="clear()"
+        />
+      </template>
+    </VueInput>
+  </div>
+</template>
+
+<script>
+import { Component } from 'vue-instantsearch'
+
+export default {
+  mixins: [
+    Component
+  ],
+
+  props: {
+    placeholder: {
+      type: String,
+      default: null
+    }
+  },
+
+  computed: {
+    query: {
+      get () {
+        return this.searchStore.query
+      },
+      set (value) {
+        this.searchStore.stop()
+        this.searchStore.query = value
+        this.$emit('query', value)
+        // We here ensure we give the time to listeners to alter the store's state
+        // without triggering in between ghost queries.
+        this.$nextTick(() => {
+          this.searchStore.start()
+          this.searchStore.refresh()
+        })
+      }
+    }
+  },
+
+  methods: {
+    clear () {
+      this.searchStore.stop()
+      if (this.searchStore.query.length > 0) {
+        this.searchStore.query = ''
+      }
+      if (this.searchStore.activeRefinements.length > 0) {
+        this.searchStore.clearRefinements()
+      }
+      this.searchStore.start()
+      this.searchStore.refresh()
+    },
+
+    focus () {
+      this.$refs.input.focus()
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.instant-search-input
+  .vue-ui-input
+    width 100%
+</style>
diff --git a/packages/@vue/cli-ui/src/components/InstantSearchPagination.vue b/packages/@vue/cli-ui/src/components/InstantSearchPagination.vue
new file mode 100644
index 0000000000..1a6c0534f3
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/InstantSearchPagination.vue
@@ -0,0 +1,67 @@
+<template>
+  <div
+    v-show="totalResults > 0"
+    class="instant-search-pagination"
+  >
+    <div class="content">
+      <VueButton
+        class="icon-button"
+        icon-left="first_page"
+        :disabled="page === 1"
+        @click="goToFirstPage()"
+      />
+
+      <VueButton
+        class="icon-button"
+        icon-left="chevron_left"
+        :disabled="page === 1"
+        @click="goToPreviousPage()"
+      />
+
+      <VueButton
+        v-for="item in pages"
+        :key="item"
+        class="icon-button"
+        :class="{
+          primary: page === item
+        }"
+        :label="item.toString()"
+        @click="goToPage(item)"
+      />
+
+      <VueButton
+        class="icon-button"
+        icon-left="chevron_right"
+        :disabled="page >= totalPages"
+        @click="goToNextPage()"
+      />
+
+      <VueButton
+        class="icon-button"
+        icon-left="last_page"
+        :disabled="page >= totalPages"
+        @click="goToLastPage()"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Pagination } from 'vue-instantsearch'
+
+export default {
+  extends: Pagination
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.instant-search-pagination
+  .content
+    h-box()
+    box-center()
+
+    > .vue-ui-button
+      space-between-x(6px)
+</style>
diff --git a/packages/@vue/cli-ui/src/components/ItemLogo.vue b/packages/@vue/cli-ui/src/components/ItemLogo.vue
new file mode 100644
index 0000000000..e155a76fbc
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/ItemLogo.vue
@@ -0,0 +1,167 @@
+<template>
+  <div
+    class="item-logo"
+    :class="{
+      selected,
+      loaded,
+      error,
+      vuejs: image && image.includes('vuejs')
+    }"
+  >
+    <div class="wrapper">
+      <VueIcon
+        v-if="selected"
+        icon="done"
+      />
+      <img
+        v-else-if="imageEnabled && !error"
+        class="image"
+        :src="imageUrl"
+        :key="imageUrl"
+        @load="loaded = true"
+        @error="error = true"
+      >
+      <div
+        v-else-if="fileIcon"
+        class="dynamic-file-icon"
+        :class="fileIcon"
+      />
+      <VueIcon
+        v-else
+        :icon="icon"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    image: {
+      type: String,
+      default: null
+    },
+
+    icon: {
+      type: String,
+      default: 'widgets'
+    },
+
+    fileIcon: {
+      type: String,
+      default: null
+    },
+
+    selected: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  data () {
+    return {
+      loaded: false,
+      error: false
+    }
+  },
+
+  computed: {
+    imageEnabled () {
+      return this.image || (this.icon && this.icon.indexOf('.') !== -1)
+    },
+
+    imageUrl () {
+      return this.image || this.icon
+    }
+  },
+
+  watch: {
+    image: 'reset',
+    selected: 'reset'
+  },
+
+  methods: {
+    reset () {
+      this.loaded = false
+      this.error = false
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.item-logo
+  margin-right $padding-item
+  .wrapper
+    h-box()
+    box-center()
+    width 42px
+    height @width
+    background rgba(black, .03)
+    border-radius 50%
+    overflow hidden
+    .image
+      width 100%
+      height @width
+      transform scale(0)
+    .vue-ui-icon
+      width 24px
+      height @width
+      >>> svg
+        fill rgba($color-text-light, .3)
+
+  .dynamic-file-icon
+    &::before
+      font-size 24px
+
+  &.vuejs
+    .wrapper
+      background lighten($vue-ui-color-primary, 70%)
+    .image
+      width 70%
+      height @width
+      position relative
+      top 3px
+
+  &.loaded
+    .image
+      animation zoom .1s
+      transform none
+
+  &.selected,
+  &.error
+    .wrapper
+      animation zoom .1s
+
+  &.selected
+    .wrapper
+      background $vue-ui-color-primary
+      .vue-ui-icon
+        >>> svg
+          fill $vue-ui-color-light
+
+  &.danger
+    .vue-ui-icon
+      >>> svg
+        fill $vue-ui-color-danger
+  &.warning
+    .vue-ui-icon
+      >>> svg
+        fill $vue-ui-color-warning
+  &.info
+    .vue-ui-icon
+      >>> svg
+        fill $vue-ui-color-info
+  &.success
+    .vue-ui-icon
+      >>> svg
+        fill $vue-ui-color-success
+
+@keyframes zoom
+  0%
+    transform scale(0)
+  100%
+    transform scale(1)
+</style>
diff --git a/packages/@vue/cli-ui/src/components/ListFilter.vue b/packages/@vue/cli-ui/src/components/ListFilter.vue
new file mode 100644
index 0000000000..129a9e08b8
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/ListFilter.vue
@@ -0,0 +1,9 @@
+<script>
+export default {
+  functional: true,
+
+  render (h, { props, data }) {
+    return h('div', data.scopedSlots.default({ list: props.list.filter(props.filter) }))
+  }
+}
+</script>
diff --git a/packages/@vue/cli-ui/src/components/ListItemInfo.vue b/packages/@vue/cli-ui/src/components/ListItemInfo.vue
new file mode 100644
index 0000000000..4187873c7f
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/ListItemInfo.vue
@@ -0,0 +1,100 @@
+<template>
+  <div
+    class="list-item-info"
+    :class="{
+      selected
+    }"
+  >
+    <div class="name">
+      <slot name="name">
+        {{ name }}
+      </slot>
+    </div>
+    <div v-if="description || link || showDescription" class="description">
+      <slot name="description">
+        <span v-html="description"/>
+      </slot>
+      <a
+        v-if="link"
+        :href="link"
+        target="_blank"
+        class="more-info"
+        @click.stop="() => {}"
+      >
+        <VueIcon icon="open_in_new" class="medium top"/>
+        {{ $t('components.list-item-info.more-info') }}
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    description: {
+      type: String,
+      default: ''
+    },
+
+    link: {
+      type: String,
+      default: null
+    },
+
+    name: {
+      type: String,
+      default: null
+    },
+
+    selected: {
+      type: Boolean,
+      default: false
+    },
+
+    showDescription: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.list-item-info
+  v-box()
+  align-items stretch
+  justify-content center
+
+  .description
+    color $color-text-light
+
+    >>> :first-child
+      margin-right 4px
+
+    >>> .vue-ui-icon
+      svg
+        fill @color
+
+    .more-info
+      color $vue-ui-color-primary
+      padding 0 4px 0 2px
+      border-radius $br
+      display inline-block
+      .vue-ui-icon
+        >>> svg
+          fill @color
+      &:hover
+        color $vue-ui-color-light
+        background $vue-ui-color-primary
+        .vue-ui-icon
+          >>> svg
+            fill @color
+      &:active
+        background darken($vue-ui-color-primary, 10%)
+
+  &.selected
+    .name
+      color $vue-ui-color-primary
+</style>
diff --git a/packages/@vue/cli-ui/src/components/ListSort.vue b/packages/@vue/cli-ui/src/components/ListSort.vue
new file mode 100644
index 0000000000..fbdc166b8d
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/ListSort.vue
@@ -0,0 +1,9 @@
+<script>
+export default {
+  functional: true,
+
+  render (h, { props, data }) {
+    return h('div', data.scopedSlots.default({ list: props.list.slice().sort(props.compare) }))
+  }
+}
+</script>
diff --git a/packages/@vue/cli-ui/src/components/LocaleLoader.vue b/packages/@vue/cli-ui/src/components/LocaleLoader.vue
new file mode 100644
index 0000000000..06603a2b83
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/LocaleLoader.vue
@@ -0,0 +1,40 @@
+<script>
+import { mergeLocale } from '../i18n'
+
+import LOCALES from '../graphql/locales.gql'
+import LOCALE_ADDED from '../graphql/localeAdded.gql'
+
+export default {
+  apollo: {
+    locales: {
+      query: LOCALES,
+      fetchPolicy: 'no-cache',
+      manual: true,
+      result ({ data: { locales } }) {
+        locales.forEach(this.loadLocale)
+      }
+    },
+
+    $subscribe: {
+      localeAdded: {
+        query: LOCALE_ADDED,
+        result ({ data }) {
+          this.loadLocale(data.localeAdded)
+        }
+      }
+    }
+  },
+
+  methods: {
+    loadLocale (locale) {
+      // eslint-disable-next-line no-console
+      console.log(`[UI] Locale ${locale.lang} updated with new strings`)
+      mergeLocale(locale.lang, locale.strings)
+    }
+  },
+
+  render () {
+    return null
+  }
+}
+</script>
diff --git a/packages/@vue/cli-ui/src/components/LoggerMessage.vue b/packages/@vue/cli-ui/src/components/LoggerMessage.vue
new file mode 100644
index 0000000000..271ea76bcb
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/LoggerMessage.vue
@@ -0,0 +1,109 @@
+<template>
+  <div
+    class="logger-message"
+    :class="[
+      `type-${message.type}`,
+      {
+        'has-type': message.type !== 'log',
+        'has-tag': message.tag,
+        pre
+      }
+    ]"
+  >
+    <div v-if="message.type !== 'log'" class="type">{{ message.type }}</div>
+    <div v-if="message.tag" class="tag">{{ message.tag }}</div>
+    <div class="message" v-html="formattedMessage"/>
+    <div class="date">{{ message.date | date }}</div>
+  </div>
+</template>
+
+<script>
+import AU from 'ansi_up'
+
+const ansiUp = new AU()
+ansiUp.use_classes = true
+
+export default {
+  props: {
+    message: {
+      type: Object,
+      required: true
+    },
+
+    pre: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  computed: {
+    formattedMessage () {
+      return ansiUp.ansi_to_html(this.message.message)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.logger-message
+  h-box()
+  align-items baseline
+  font-family $font-mono
+  box-sizing border-box
+  padding 2px 4px
+
+  .type,
+  .tag
+    padding 2px 6px
+    border-radius $br
+
+  .type
+    text-transform uppercase
+
+  &.type-warn
+    .type
+      background $vue-ui-color-warning
+      color $vue-ui-color-light
+  &.type-error
+    .type
+      background $vue-ui-color-danger
+      color $vue-ui-color-light
+  &.type-info
+    .type
+      background $vue-ui-color-info
+      color $vue-ui-color-light
+  &.type-done
+    .type
+      background $vue-ui-color-success
+      color $vue-ui-color-light
+
+  .tag
+    background lighten($vue-ui-color-dark, 60%)
+
+  &.has-type.has-tag
+    .type
+      border-top-right-radius 0
+      border-bottom-right-radius 0
+    .tag
+      border-top-left-radius 0
+      border-bottom-left-radius 0
+
+  .message
+    flex 100% 1 1
+    width 0
+    ellipsis()
+
+  &.has-type,
+  &.has-tag
+    .message
+      margin-left 12px
+
+  &.pre
+    .message
+      white-space pre-wrap
+
+  .date
+    opacity .5
+</style>
diff --git a/packages/@vue/cli-ui/src/components/LoggerView.vue b/packages/@vue/cli-ui/src/components/LoggerView.vue
new file mode 100644
index 0000000000..e6b30a0821
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/LoggerView.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="logger-view">
+    <div class="toolbar">
+      <VueIcon
+        icon="dvr"
+      />
+      <div class="title">
+        {{ $t('components.logger-view.title') }}
+      </div>
+      <VueButton
+        class="icon-button"
+        icon-left="delete_forever"
+        v-tooltip="$t('components.logger-view.buttons.clear')"
+        @click="clearLogs()"
+      />
+      <VueIcon
+        icon="lens"
+        class="separator"
+      />
+      <VueButton
+        class="icon-button"
+        icon-left="subdirectory_arrow_left"
+        v-tooltip="$t('components.logger-view.buttons.scroll')"
+        @click="scrollToBottom()"
+      />
+      <VueButton
+        class="icon-button"
+        icon-left="close"
+        v-tooltip="$t('components.logger-view.buttons.close')"
+        @click="close()"
+      />
+    </div>
+    <ApolloQuery
+      ref="logs"
+      :query="require('../graphql/consoleLogs.gql')"
+      fetch-policy="cache-and-network"
+      class="logs"
+      @result="scrollToBottom()"
+    >
+      <ApolloSubscribeToMore
+        :document="require('../graphql/consoleLogAdded.gql')"
+        :update-query="onConsoleLogAdded"
+      />
+
+      <template slot-scope="{ result: { data } }">
+        <template v-if="data && data.consoleLogs">
+          <LoggerMessage
+            v-for="log of data.consoleLogs"
+            :key="log.id"
+            :message="log"
+            pre
+          />
+
+          <div
+            v-if="!data.consoleLogs.length"
+            class="vue-ui-empty"
+          >
+            <VueIcon icon="wifi" class="large"/>
+            <div>{{ $t('components.logger-view.empty') }}</div>
+          </div>
+        </template>
+      </template>
+    </ApolloQuery>
+  </div>
+</template>
+
+<script>
+import CONSOLE_LOGS from '../graphql/consoleLogs.gql'
+import CONSOLE_LOG_LAST from '../graphql/consoleLogLast.gql'
+import CONSOLE_LOGS_CLEAR from '../graphql/consoleLogsClear.gql'
+
+export default {
+  methods: {
+    onConsoleLogAdded (previousResult, { subscriptionData }) {
+      this.scrollToBottom()
+      return {
+        consoleLogs: [
+          ...previousResult.consoleLogs,
+          subscriptionData.data.consoleLogAdded
+        ]
+      }
+    },
+
+    async scrollToBottom () {
+      await this.$nextTick()
+      const list = this.$refs.logs.$el
+      list.scrollTop = list.scrollHeight
+    },
+
+    async clearLogs () {
+      await this.$apollo.mutate({
+        mutation: CONSOLE_LOGS_CLEAR,
+        update: store => {
+          store.writeQuery({
+            query: CONSOLE_LOGS,
+            data: { consoleLogs: [] }
+          })
+          store.writeQuery({
+            query: CONSOLE_LOG_LAST,
+            data: { consoleLogLast: null }
+          })
+        }
+      })
+      this.close()
+    },
+
+    close () {
+      this.$emit('close')
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.logger-view
+  background $vue-ui-color-light-neutral
+  height 174px
+  display grid
+  grid-template-columns 1fr
+  grid-template-rows auto 1fr
+  grid-template-areas "toolbar" "logs"
+
+  .toolbar
+    grid-area toolbar
+    h-box()
+    align-items center
+    padding 6px 6px 6px $padding-item
+    > :not(.separator)
+      space-between-x(6px)
+    > * + .separator
+      margin-left 6px
+    .title
+      flex 100% 1 1
+      width 0
+      ellipsis()
+
+  .logs
+    grid-area logs
+    padding 0 $padding-item
+    overflow-x hidden
+    overflow-y auto
+
+  .logger-message
+    font-size 12px
+    &:hover
+      background lighten(@background, 40%)
+</style>
diff --git a/packages/@vue/cli-ui/src/components/NavContent.vue b/packages/@vue/cli-ui/src/components/NavContent.vue
new file mode 100644
index 0000000000..24200f7a52
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/NavContent.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="nav-content">
+    <NavList
+      :items="items"
+    >
+      <template slot-scope="props">
+        <slot v-bind="props"/>
+      </template>
+    </NavList>
+
+    <div class="content vue-ui-disable-scroll">
+      <router-view/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    items: {
+      type: Array,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.nav-content
+  width 100%
+  height 100%
+  display grid
+  grid-template-columns 300px 1fr
+  grid-template-rows 1fr
+  grid-template-areas "nav content"
+  > .nav-list
+    grid-area nav
+  > .content
+    grid-area content
+    overflow-x hidden
+    overflow-y auto
+</style>
diff --git a/packages/@vue/cli-ui/src/components/NavList.vue b/packages/@vue/cli-ui/src/components/NavList.vue
new file mode 100644
index 0000000000..febfb321d2
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/NavList.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="nav-list vue-ui-disable-scroll">
+    <div class="content">
+      <div
+        v-for="item of items"
+        :key="item.id"
+        @click="currentRoute = item.route"
+      >
+        <slot
+          :item="item"
+          :selected="item.route === currentRoute"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { isSameRoute, isIncludedRoute } from '../util/route'
+
+export default {
+  props: {
+    items: {
+      type: Array,
+      required: true
+    }
+  },
+
+  computed: {
+    currentRoute: {
+      get () {
+        const currentRoute = this.$route
+        const item = this.items.find(
+          item => isIncludedRoute(currentRoute, this.$router.resolve(item.route).route)
+        )
+        return item && item.route
+      },
+      set (route) {
+        if (!isSameRoute(this.$route, route)) {
+          this.$router.push(route)
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.nav-list
+  overflow-x hidden
+  overflow-y auto
+  background $color-background-light
+</style>
diff --git a/packages/@vue/cli-ui/src/components/PackageSearchItem.vue b/packages/@vue/cli-ui/src/components/PackageSearchItem.vue
new file mode 100644
index 0000000000..7a8b42362b
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/PackageSearchItem.vue
@@ -0,0 +1,133 @@
+<template>
+  <div
+    class="package-search-item list-item"
+    :class="{
+      selected
+    }"
+  >
+    <ItemLogo
+      :image="logoUrl"
+      :selected="selected"
+    />
+
+    <ListItemInfo
+      :link="pkg.homepage || (pkg.repository && pkg.repository.url) || ''"
+      :selected="selected"
+      show-description
+    >
+      <template slot="name">
+        <span class="name" data-testid="name">
+          <ais-highlight
+            :result="pkg"
+            attribute-name="name"
+          />
+        </span>
+        <span class="version">{{ pkg.version }}</span>
+      </template>
+      <template slot="description">
+        <span class="info description">
+          <ais-highlight
+            :result="pkg"
+            attribute-name="description"
+          />
+        </span>
+        <span v-if="official" class="info">
+          <VueIcon icon="star" class="top medium"/>
+          <span>Official</span>
+        </span>
+        <span class="info downloads">
+          <VueIcon class="medium" icon="file_download"/>
+          <span>{{ pkg.humanDownloadsLast30Days }}</span>
+        </span>
+        <span class="info owner">
+          <VueIcon class="medium" icon="account_circle"/>
+          <span>{{ pkg.owner.name }}</span>
+        </span>
+      </template>
+    </ListItemInfo>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    pkg: {
+      type: Object,
+      required: true
+    },
+
+    selected: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  data () {
+    return {
+      logoUrl: null
+    }
+  },
+
+  computed: {
+    official () {
+      return this.pkg.owner.name === 'vuejs'
+    }
+  },
+
+  watch: {
+    'pkg.name': {
+      handler: 'updateLogo',
+      immediate: true
+    }
+  },
+
+  methods: {
+    updateLogo () {
+      // By default, show the npm user avatar
+      this.logoUrl = this.pkg.owner.avatar
+
+      // Try to load the logo.png file inside the package
+      const name = this.pkg.name
+      const img = new Image()
+      img.onload = () => {
+        if (name !== this.pkg.name) return
+        this.logoUrl = img.src
+      }
+      img.src = `https://unpkg.com/${name}/logo.png`
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.package-search-item
+  padding $padding-item
+  h-box()
+  box-center()
+
+  .list-item-info
+    flex 100% 1 1
+    width 0
+
+  .name
+    font-weight bold
+
+  .version
+    color $color-text-light
+    margin-left 6px
+
+  .info
+    space-between-x(6px)
+
+  .description
+    font-style italic
+
+  .downloads
+    text-transform uppercase
+
+  .owner
+    .vue-ui-icon
+      margin-right 2px
+</style>
diff --git a/packages/@vue/cli-ui/src/components/ProgressScreen.vue b/packages/@vue/cli-ui/src/components/ProgressScreen.vue
new file mode 100644
index 0000000000..e660450bb5
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/ProgressScreen.vue
@@ -0,0 +1,126 @@
+<template>
+  <transition name="vue-ui-fade">
+    <div
+      v-if="progress"
+      class="loading-screen"
+      :class="{
+        loading
+      }"
+    >
+      <VueLoadingIndicator
+        class="primary big overlay fixed"
+      >
+        <div class="content">
+          <div v-if="progress.error" class="error">
+            <VueIcon
+              icon="error"
+              class="huge"
+            />
+            <div>{{ progress.error }}</div>
+            <div class="actions">
+              <VueButton
+                icon-left="close"
+                :label="$t('components.progress-screen.close')"
+                @click="close()"
+              />
+            </div>
+          </div>
+
+          <template v-else>
+            <div v-if="statusMessage" class="status">
+              {{ statusMessage }}
+            </div>
+
+            <div class="secondary-info">
+              <div v-if="progress.info" class="info">
+                {{ progress.info }}
+              </div>
+
+              <VueLoadingBar
+                v-if="progress.progress !== -1"
+                :value="progress.progress"
+              />
+
+              <div v-if="debug" class="debug"><pre>{{ debug }}</pre></div>
+            </div>
+          </template>
+        </div>
+      </VueLoadingIndicator>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { DisableScroll } from '@vue/ui'
+import Progress from '../mixins/Progress'
+
+export default {
+  mixins: [
+    DisableScroll,
+    Progress
+  ],
+
+  props: {
+    debug: String
+  },
+
+  methods: {
+    close () {
+      this.progress = null
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.loading-screen
+  position absolute
+
+  .content
+    display grid
+    grid-template-columns 1fr
+    grid-gap $padding-item
+    text-align center
+
+    .error
+      color $vue-ui-color-danger
+      v-box()
+      box-center()
+      > .vue-ui-icon
+        margin-bottom $padding-item
+        >>> svg
+          fill @color
+      .actions
+        margin-top $padding-item
+
+    .secondary-info
+      position absolute
+      bottom 42px
+      left 0
+      right 0
+      v-box()
+      box-center()
+
+    .info
+      color $color-text-light
+
+    .debug
+      color $vue-ui-color-warning
+      font-size 10px
+
+    .vue-ui-loading-bar
+      width 50vw
+      max-width 400px
+      margin-top 24px
+
+  &:not(.loading)
+    .vue-ui-loading-indicator
+      >>> .animation
+        display none
+
+  &.loading
+    .content
+      margin-top $padding-item
+</style>
diff --git a/packages/@vue/cli-ui/src/components/ProjectFeatureItem.vue b/packages/@vue/cli-ui/src/components/ProjectFeatureItem.vue
new file mode 100644
index 0000000000..f552b902c9
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/ProjectFeatureItem.vue
@@ -0,0 +1,42 @@
+<template>
+  <div
+    class="project-feature-item list-item"
+    :class="{
+      selected: feature.enabled
+    }"
+    :data-testid="feature.id"
+  >
+    <VueSwitch
+      :value="feature.enabled"
+      class="extend-left"
+    >
+      <ListItemInfo
+        :name="$t(feature.name)"
+        :description="$t(feature.description)"
+        :link="feature.link"
+        :selected="feature.enabled"
+      />
+    </VueSwitch>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    feature: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.project-feature-item
+  .vue-ui-switch
+    padding $padding-item
+    width 100%
+    box-sizing border-box
+</style>
diff --git a/packages/@vue/cli-ui/src/components/ProjectNav.vue b/packages/@vue/cli-ui/src/components/ProjectNav.vue
new file mode 100644
index 0000000000..a63f92198f
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/ProjectNav.vue
@@ -0,0 +1,161 @@
+<template>
+  <div
+    class="project-nav"
+    :class="{
+      wide: $responsive.wide
+    }"
+  >
+    <div class="content">
+      <VueGroup
+        v-model="currentView"
+        class="vertical small-indicator left-indicator primary"
+        indicator
+      >
+        <ProjectNavButton
+          v-for="view of views"
+          :key="view.id"
+          :view="view"
+        />
+      </VueGroup>
+
+      <ProjectNavMore/>
+    </div>
+  </div>
+</template>
+
+<script>
+import { isSameRoute, isIncludedRoute } from '../util/route'
+
+import VIEWS from '../graphql/views.gql'
+import VIEW_ADDED from '../graphql/viewAdded.gql'
+import VIEW_REMOVED from '../graphql/viewRemoved.gql'
+import VIEW_CHANGED from '../graphql/viewChanged.gql'
+
+export default {
+  data () {
+    return {
+      views: []
+    }
+  },
+
+  apollo: {
+    views: {
+      query: VIEWS,
+      fetchPolicy: 'cache-and-network',
+      subscribeToMore: [
+        {
+          document: VIEW_ADDED,
+          updateQuery: (previousResult, { subscriptionData }) => {
+            const view = subscriptionData.data.viewAdded
+            if (!previousResult.views) {
+              return {
+                views: [ view ]
+              }
+            }
+            if (previousResult.views.find(r => r.id === view.id)) return previousResult
+            return {
+              views: [
+                ...previousResult.views,
+                view
+              ]
+            }
+          }
+        },
+        {
+          document: VIEW_REMOVED,
+          updateQuery: (previousResult, { subscriptionData }) => {
+            const index = previousResult.views.findIndex(r => r.id === subscriptionData.data.viewRemoved.id)
+            if (index === -1) return previousResult
+            const views = previousResult.views.slice()
+            views.splice(index, 1)
+            return {
+              views
+            }
+          }
+        },
+        {
+          document: VIEW_CHANGED,
+          updateQuery: (previousResult, { subscriptionData }) => {
+            const view = subscriptionData.data.viewChanged
+            const index = previousResult.views.findIndex(r => r.id === view.id)
+            if (index === -1) return previousResult
+            const views = previousResult.views.slice()
+            views.splice(index, 1, view)
+            return {
+              views
+            }
+          }
+        }
+      ]
+    }
+  },
+
+  computed: {
+    currentView: {
+      get () {
+        const currentRoute = this.$route
+        const view = this.views.find(
+          item => isIncludedRoute(currentRoute, this.$router.resolve({ name: item.name }).route)
+        )
+        return view && view.name
+      },
+      set (name) {
+        if (!isSameRoute(this.$route, this.$router.resolve({ name }).route)) {
+          this.$router.push({ name })
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.project-nav
+  background $vue-ui-color-dark
+
+  .content
+    v-box()
+    height 100%
+    padding 8px 0
+    box-sizing border-box
+
+    .vue-ui-group
+      flex auto 1 1
+      height 0
+      overflow hidden
+
+    >>> .v-popover .trigger,
+    >>> .vue-ui-dropdown
+      display block !important
+
+    >>> .vue-ui-button
+      button-colors(rgba($vue-ui-color-light, .7), transparent)
+      border-radius 0
+      padding-left 0
+      padding-right @padding-left
+      h-box()
+      box-center()
+      width 100%
+
+      &:hover, &:active
+        $bg = darken($vue-ui-color-dark, 70%)
+        button-colors($vue-ui-color-light, $bg)
+        &.selected
+          button-colors(lighten($vue-ui-color-primary, 40%), $bg)
+
+  &.wide
+    >>> .vue-ui-button
+      justify-content flex-start
+      padding-left $padding-item
+      padding-right @padding-left
+      > .content
+        width 100%
+        text-align left
+        > .default-slot
+          flex auto 1 1
+          width 0
+          ellipsis()
+          padding 4px 0
+</style>
diff --git a/packages/@vue/cli-ui/src/components/ProjectNavButton.vue b/packages/@vue/cli-ui/src/components/ProjectNavButton.vue
new file mode 100644
index 0000000000..e2a82dbdbf
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/ProjectNavButton.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="project-nav-button">
+    <v-popover
+      trigger="hover"
+      handle-resize
+      popover-class="force-tooltip"
+      placement="right"
+      offset="4"
+      :delay="{ show: 300, hide: 0 }"
+    >
+      <VueGroupButton
+        class="flat big"
+        :class="{
+          'icon-button': !$responsive.wide
+        }"
+        :value="view.name"
+        :icon-left="!imageIcon && view.icon"
+      >
+        <img
+          v-if="imageIcon"
+          :src="view.icon"
+          class="image-icon"
+        >
+
+        <span v-if="$responsive.wide" class="label">{{ $t(view.tooltip) }}</span>
+      </VueGroupButton>
+
+      <template slot="popover">
+        <div class="title">{{ $t(view.tooltip) }}</div>
+
+        <div v-if="badges" class="badges">
+          <ViewBadge
+            v-for="badge of badges"
+            :key="badge.id"
+            :badge="badge"
+          />
+        </div>
+      </template>
+    </v-popover>
+
+    <div
+      v-if="firstNotHiddenBadge"
+      class="bullet"
+      :class="[
+        `type-${firstNotHiddenBadge.type}`
+      ]"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    view: {
+      type: Object,
+      required: true
+    }
+  },
+
+  computed: {
+    badges () {
+      if (this.view.badges && this.view.badges.length) {
+        return this.view.badges.slice().sort((a, b) => b.priority - a.priority)
+      }
+    },
+
+    firstNotHiddenBadge () {
+      return this.badges && this.badges.find(b => !b.hidden)
+    },
+
+    imageIcon () {
+      return this.view.icon && this.view.icon.indexOf('.') !== -1
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+$bg = darken($vue-ui-color-dark, 70%)
+
+.project-nav-button
+  position relative
+
+  .bullet
+    position absolute
+    width 6px
+    height @width
+    border-radius 50%
+    bottom 12px
+    left 27px
+    pointer-events none
+    border solid 2px $vue-ui-color-dark
+    transition border-color .1s
+    &.type-info
+      background $vue-ui-color-info
+    &.type-success
+      background $vue-ui-color-success
+    &.type-error
+      background $vue-ui-color-danger
+    &.type-warning
+      background $vue-ui-color-warning
+    &.type-accent
+      background $vue-ui-color-accent
+    &.type-dim
+      background $md-grey
+
+  .wide &
+    .bullet
+      left 28px
+
+  &:hover
+    .bullet
+      border-color lighten($bg, 25%)
+  &:active
+    .bullet
+      border-color darken($bg, 8%)
+
+  .image-icon
+    max-width 24px
+    max-height @width
+
+.badges
+  margin ($padding-item/2) 0
+  display grid
+  grid-template-columns auto
+  grid-gap 4px
+</style>
diff --git a/packages/@vue/cli-ui/src/components/ProjectNavMore.vue b/packages/@vue/cli-ui/src/components/ProjectNavMore.vue
new file mode 100644
index 0000000000..dbda80c109
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/ProjectNavMore.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="project-nav-more">
+    <VueDropdown placement="right-end">
+      <VueButton
+        slot="trigger"
+        icon-left="more_horiz"
+        class="big flat"
+        :class="{
+          'icon-button': !$responsive.wide
+        }"
+      >
+        <span v-if="$responsive.wide" class="label">{{ $t('components.project-nav.tooltips.more') }}</span>
+      </VueButton>
+
+      <VueDropdownButton
+        icon-left="work"
+        :to="{ name: 'project-select' }"
+        :label="$t('views.project-select.title')"
+      />
+      <VueDropdownButton
+        icon-left="info"
+        :to="{ name: 'about' }"
+        :label="$t('views.about.title')"
+      />
+    </VueDropdown>
+  </div>
+</template>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.project-nav-more
+  .vue-ui-dropdown.open .dropdown-trigger .vue-ui-button
+    &,
+    &:hover
+      background lighten($vue-ui-color-dark, 10%) !important
+      color $md-white
+      /deep/ > .content > .button-icon
+        svg
+          fill @color
+</style>
diff --git a/packages/@vue/cli-ui/src/components/ProjectPluginItem.vue b/packages/@vue/cli-ui/src/components/ProjectPluginItem.vue
new file mode 100644
index 0000000000..d1a0869991
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/ProjectPluginItem.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="project-plugin-item list-item">
+    <div class="content">
+      <ItemLogo :image="pluginLogo && pluginLogo.logo"/>
+
+      <ListItemInfo
+        :name="plugin.id"
+        :link="plugin.website"
+        show-description
+      >
+        <span slot="description" class="plugin-description">
+          <template v-if="pluginDetails">
+            <span class="info version">
+              <span class="label">{{ $t('components.project-plugin-item.version') }}</span>
+              <span class="value">{{ pluginDetails.version.current }}</span>
+            </span>
+
+            <span class="info latest">
+              <span class="label">{{ $t('components.project-plugin-item.latest') }}</span>
+              <VueIcon
+                v-if="pluginDetails.version.current !== pluginDetails.version.latest"
+                icon="warning"
+                class="top medium"
+              />
+              <span class="value">{{ pluginDetails.version.latest }}</span>
+            </span>
+          </template>
+
+          <span v-if="plugin.official" class="info">
+            <VueIcon
+              icon="star"
+              class="top medium"
+            />
+            {{ $t('components.project-plugin-item.official') }}
+          </span>
+
+          <span v-if="plugin.installed" class="info">
+            <VueIcon
+              icon="check_circle"
+              class="top medium"
+            />
+            {{ $t('components.project-plugin-item.installed') }}
+          </span>
+
+          <span v-if="pluginDetails && pluginDetails.description" class="package-description">
+            {{ pluginDetails.description }}
+          </span>
+        </span>
+      </ListItemInfo>
+
+      <VueButton
+        v-if="pluginDetails && pluginDetails.version.current !== pluginDetails.version.wanted"
+        icon-left="file_download"
+        class="icon-button"
+        v-tooltip="$t('components.project-plugin-item.actions.update', { target: plugin.id })"
+        :loading-left="updating"
+        @click="updatePlugin()"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import PLUGIN_DETAILS from '../graphql/pluginDetails.gql'
+import PLUGIN_LOGO from '../graphql/pluginLogo.gql'
+import PLUGIN_UPDATE from '../graphql/pluginUpdate.gql'
+
+export default {
+  props: {
+    plugin: {
+      type: Object,
+      required: true
+    }
+  },
+
+  data () {
+    return {
+      pluginDetails: null,
+      pluginLogo: null,
+      updating: false
+    }
+  },
+
+  apollo: {
+    pluginDetails: {
+      query: PLUGIN_DETAILS,
+      variables () {
+        return {
+          id: this.plugin.id
+        }
+      },
+      fetchPolicy: 'cache-and-network'
+    },
+
+    pluginLogo: {
+      query: PLUGIN_LOGO,
+      variables () {
+        return {
+          id: this.plugin.id
+        }
+      }
+    }
+  },
+
+  methods: {
+    async updatePlugin () {
+      this.updating = true
+      try {
+        this.$apollo.mutate({
+          mutation: PLUGIN_UPDATE,
+          variables: {
+            id: this.plugin.id
+          }
+        })
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error(e)
+      }
+      this.updating = false
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.project-plugin-item
+  padding $padding-item
+  cursor default
+
+  .content
+    h-box()
+    box-center()
+
+  .list-item-info
+    flex 100% 1 1
+    width 0
+
+  .plugin-description
+    margin-right $padding-item
+
+  .label
+    opacity .7
+
+  .info
+    display inline-block
+    space-between-x($padding-item)
+    >>> > *
+      space-between-x(4px)
+
+  .package-description
+    font-style italic
+    opacity .7
+
+</style>
diff --git a/packages/@vue/cli-ui/src/components/ProjectPresetItem.vue b/packages/@vue/cli-ui/src/components/ProjectPresetItem.vue
new file mode 100644
index 0000000000..130548b01a
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/ProjectPresetItem.vue
@@ -0,0 +1,71 @@
+<template>
+  <div
+    class="project-preset-item list-item"
+    :class="{
+      selected
+    }"
+    :data-testid="preset.id"
+  >
+    <div class="content">
+      <div
+        class="radio-icon"
+      >
+        <VueIcon
+          :icon="selected ? 'radio_button_checked' : 'radio_button_unchecked'"
+          class="medium"
+        />
+      </div>
+
+      <ListItemInfo
+        :name="$t(preset.name)"
+        :description="$t(preset.description)"
+        :link="preset.link"
+        :selected="selected"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    preset: {
+      type: Object,
+      required: true
+    },
+
+    selected: {
+      type: Boolean,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.project-preset-item
+  padding $padding-item
+  padding-left 0
+
+  .content
+    display grid
+    grid-template-columns 64px auto
+    grid-template-rows auto
+    grid-template-areas "icon info"
+
+  .radio-icon
+    h-box()
+    box-center()
+    grid-area icon
+
+  .list-item-info
+    grid-area info
+
+  &.selected
+    .radio-icon
+      >>> svg
+        fill $vue-ui-color-primary
+
+</style>
diff --git a/packages/@vue/cli-ui/src/components/ProjectSelectList.vue b/packages/@vue/cli-ui/src/components/ProjectSelectList.vue
new file mode 100644
index 0000000000..e3a933c8ee
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/ProjectSelectList.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="project-select-list">
+    <ApolloQuery
+      :query="require('@/graphql/projects.gql')"
+      fetch-policy="network-only"
+    >
+      <template slot-scope="{ result: { data } }">
+        <template v-if="data">
+          <div v-if="data.projects.length">
+            <ListFilter
+              v-for="favorite of [true, false]"
+              :key="favorite"
+              :list="data.projects"
+              :filter="item => !!item.favorite === favorite"
+            >
+              <template slot-scope="{ list }">
+                <div
+                  v-if="data.projects.find(item => item.favorite)"
+                  class="cta-text"
+                  :class="favorite ? 'favorite' : 'other'"
+                >
+                  {{ $t(`components.project-select-list.titles.${favorite ? 'favorite' : 'other'}`) }}
+                </div>
+
+                <ListSort
+                  :list="list"
+                  :compare="compareProjects"
+                >
+                  <template slot-scope="{ list }">
+                    <ProjectSelectListItem
+                      v-for="project of list"
+                      :key="project.id"
+                      :project="project"
+                      @click.native="openProject(project)"
+                      @remove="removeProject(project)"
+                      @favorite="toggleFavorite(project)"
+                    />
+                  </template>
+                </ListSort>
+              </template>
+            </ListFilter>
+          </div>
+          <div v-else class="vue-ui-empty">
+            <VueIcon icon="attach_file" class="empty-icon"/>
+            <div>{{ $t('components.project-select-list.empty') }}</div>
+          </div>
+        </template>
+      </template>
+    </ApolloQuery>
+  </div>
+</template>
+
+<script>
+import PROJECTS from '../graphql/projects.gql'
+import PROJECT_OPEN from '../graphql/projectOpen.gql'
+import PROJECT_REMOVE from '../graphql/projectRemove.gql'
+import PROJECT_SET_FAVORITE from '../graphql/projectSetFavorite.gql'
+
+export default {
+  methods: {
+    async openProject (project) {
+      await this.$apollo.mutate({
+        mutation: PROJECT_OPEN,
+        variables: {
+          id: project.id
+        }
+      })
+
+      this.$router.push({ name: 'project-home' })
+    },
+
+    async removeProject (project) {
+      await this.$apollo.mutate({
+        mutation: PROJECT_REMOVE,
+        variables: {
+          id: project.id
+        },
+        update: store => {
+          const data = store.readQuery({ query: PROJECTS })
+          const index = data.projects.findIndex(
+            p => p.id === project.id
+          )
+          if (index !== -1) data.projects.splice(index, 1)
+          store.writeQuery({ query: PROJECTS, data })
+        }
+      })
+    },
+
+    async toggleFavorite (project) {
+      await this.$apollo.mutate({
+        mutation: PROJECT_SET_FAVORITE,
+        variables: {
+          id: project.id,
+          favorite: project.favorite ? 0 : 1
+        }
+      })
+    },
+
+    compareProjects (a, b) {
+      return a.name.localeCompare(b.name)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.project-select-list
+  height 100%
+  overflow-y auto
+</style>
diff --git a/packages/@vue/cli-ui/src/components/ProjectSelectListItem.vue b/packages/@vue/cli-ui/src/components/ProjectSelectListItem.vue
new file mode 100644
index 0000000000..c0b3d14320
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/ProjectSelectListItem.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="project-select-list-item list-item">
+    <div class="content">
+      <div class="favorite">
+        <VueButton
+          class="icon-button"
+          :icon-left="project.favorite ? 'star' : 'star_border'"
+          v-tooltip="$t('components.project-select-list-item.tooltips.favorite')"
+          data-testid="favorite-button"
+          @click.stop="$emit('favorite')"
+        />
+      </div>
+      <div class="info">
+        <ListItemInfo
+          :name="project.name"
+          :description="project.path"
+        />
+      </div>
+      <div class="actions">
+        <VueButton
+          class="icon-button"
+          icon-left="delete"
+          v-tooltip="$t('components.project-select-list-item.tooltips.delete')"
+          data-testid="delete-button"
+          @click.stop="$emit('remove')"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    project: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.content
+  padding $padding-item
+  display grid
+  grid-template-columns auto 1fr auto
+  grid-template-rows auto
+  grid-template-areas "icon info actions"
+  grid-gap $padding-item
+
+.favorite
+  grid-area icon
+  h-box()
+  box-center()
+
+.info
+  grid-area info
+
+.actions
+  grid-area actions
+  h-box()
+  align-items center
+
+  >>> > *
+    space-between-x($padding-item)
+</style>
diff --git a/packages/@vue/cli-ui/src/components/Prompt.vue b/packages/@vue/cli-ui/src/components/Prompt.vue
new file mode 100644
index 0000000000..8920f83693
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/Prompt.vue
@@ -0,0 +1,57 @@
+<script>
+import ListItemInfo from './ListItemInfo.vue'
+
+export default {
+  components: {
+    ListItemInfo
+  },
+
+  props: {
+    prompt: {
+      type: Object,
+      required: true
+    }
+  },
+
+  data () {
+    return {
+      modifiedValue: undefined
+    }
+  },
+
+  methods: {
+    value (value) {
+      if (this.$options.buffer && typeof this.modifiedValue !== 'undefined') return this.modifiedValue
+      return JSON.parse(value)
+    },
+
+    answer (value) {
+      this.modifiedValue = value
+      this.$emit('answer', value)
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+@import "~@/style/imports"
+
+.prompt
+  list-item()
+  .prompt-content
+    display grid
+    grid-template-columns auto 300px
+    grid-template-rows auto
+    grid-template-areas "info input"
+    grid-gap $padding-item
+    padding $padding-item
+
+    > .list-item-info
+      grid-area info
+
+    > .prompt-input
+      grid-area input
+      v-box()
+      align-items stretch
+      justify-content center
+</style>
diff --git a/packages/@vue/cli-ui/src/components/PromptCheckbox.vue b/packages/@vue/cli-ui/src/components/PromptCheckbox.vue
new file mode 100644
index 0000000000..e057a79a60
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/PromptCheckbox.vue
@@ -0,0 +1,70 @@
+<template>
+  <VueDisable
+    :disabled="!prompt.enabled"
+    class="prompt prompt-checkbox"
+  >
+    <div class="prompt-content">
+      <ListItemInfo
+        :name="$t(prompt.message)"
+        :description="$t(prompt.description)"
+        :link="prompt.link"
+      />
+
+      <VueSwitch
+        v-for="(choice, index) of prompt.choices"
+        :key="index"
+        :value="isCheckboxSelected(choice)"
+        :disabled="choice.disabled"
+        class="right"
+        @input="value => asnwerCheckbox(choice, value)"
+      >
+        {{ $t(choice.name) }}
+      </VueSwitch>
+    </div>
+
+    <PromptError :error="prompt.error"/>
+  </VueDisable>
+</template>
+
+<script>
+import Prompt from './Prompt'
+
+export default {
+  extends: Prompt,
+
+  computed: {
+    checkboxValue () {
+      return this.value(this.prompt.value)
+    }
+  },
+
+  methods: {
+    isCheckboxSelected (choice) {
+      return this.checkboxValue && this.checkboxValue.includes(this.value(choice.value))
+    },
+
+    asnwerCheckbox (choice, value) {
+      let list = this.checkboxValue
+      const choiceValue = this.value(choice.value)
+      if (value) {
+        list.push(choiceValue)
+      } else {
+        const index = list.indexOf(choiceValue)
+        if (index !== -1) list.splice(index, 1)
+      }
+      this.answer(list)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.prompt-content
+  v-box()
+  align-items stretch
+
+  .vue-ui-switch
+    margin-top 6px
+</style>
diff --git a/packages/@vue/cli-ui/src/components/PromptColor.vue b/packages/@vue/cli-ui/src/components/PromptColor.vue
new file mode 100644
index 0000000000..d37930283c
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/PromptColor.vue
@@ -0,0 +1,75 @@
+<template>
+  <VueDisable
+    :disabled="!prompt.enabled"
+    class="prompt prompt-color"
+  >
+    <div class="prompt-content">
+      <ListItemInfo
+        :name="$t(prompt.message)"
+        :description="$t(prompt.description)"
+        :link="prompt.link"
+      />
+
+      <VueDropdown
+        class="prompt-input"
+      >
+        <VueInput
+          slot="trigger"
+          :value="value(prompt.value)"
+          @input="value => answer(value)"
+        >
+          <div slot="right" class="color-preview">
+            <div class="color-swatch" :style="{
+              backgroundColor: value(prompt.value)
+            }" />
+          </div>
+        </VueInput>
+
+        <ColorPicker
+          class="color-picker"
+          :value="value(prompt.value)"
+          @input="value => answer(value.hex)"
+        />
+      </VueDropdown>
+    </div>
+
+    <PromptError :error="prompt.error"/>
+  </VueDisable>
+</template>
+
+<script>
+import Prompt from './Prompt'
+import { Sketch } from 'vue-color'
+
+export default {
+  extends: Prompt,
+
+  components: {
+    ColorPicker: Sketch
+  },
+
+  buffer: true
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.color-preview
+  padding-left $padding-item
+
+.color-swatch
+  width 18px
+  height @width
+  border-radius 50%
+
+.color-picker
+  width 300px
+  height 370px
+  background none
+  box-shadow none
+  padding ($padding-item - 4px) $padding-item
+
+  >>> .vc-sketch-presets
+    border-top-color rgba(black, .1)
+</style>
diff --git a/packages/@vue/cli-ui/src/components/PromptConfirm.vue b/packages/@vue/cli-ui/src/components/PromptConfirm.vue
new file mode 100644
index 0000000000..a7c84171bd
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/PromptConfirm.vue
@@ -0,0 +1,38 @@
+<template>
+  <VueDisable
+    :disabled="!prompt.enabled"
+    class="prompt prompt-confirm"
+  >
+    <VueSwitch
+      :value="value(prompt.value)"
+      class="extend-left"
+      @input="value => answer(value)"
+    >
+      <ListItemInfo
+        :name="$t(prompt.message)"
+        :description="$t(prompt.description)"
+        :link="prompt.link"
+      />
+    </VueSwitch>
+
+    <PromptError :error="prompt.error"/>
+  </VueDisable>
+</template>
+
+<script>
+import Prompt from './Prompt'
+
+export default {
+  extends: Prompt
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.prompt-confirm
+  .vue-ui-switch
+    padding $padding-item
+    width 100%
+    box-sizing border-box
+</style>
diff --git a/packages/@vue/cli-ui/src/components/PromptError.vue b/packages/@vue/cli-ui/src/components/PromptError.vue
new file mode 100644
index 0000000000..82987f4139
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/PromptError.vue
@@ -0,0 +1,29 @@
+<template>
+  <div v-if="error" class="prompt-error">
+    <div class="vue-ui-text danger banner">
+      <VueIcon icon="warning" class="big"/>
+      <span>{{ $t(error.message) }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    error: {
+      type: Object,
+      default: null
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.prompt-error
+  padding 0 $padding-item $padding-item
+
+  .banner
+    border-radius $br
+</style>
diff --git a/packages/@vue/cli-ui/src/components/PromptInput.vue b/packages/@vue/cli-ui/src/components/PromptInput.vue
new file mode 100644
index 0000000000..4217b7d027
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/PromptInput.vue
@@ -0,0 +1,34 @@
+<template>
+  <VueDisable
+    :disabled="!prompt.enabled"
+    class="prompt prompt-input"
+  >
+    <div class="prompt-content">
+      <ListItemInfo
+        :name="$t(prompt.message)"
+        :description="$t(prompt.description)"
+        :link="prompt.link"
+      />
+
+      <div class="prompt-input">
+        <VueInput
+          :value="value(prompt.value)"
+          :type="prompt.type === 'password' ? 'password' : 'text'"
+          @input="value => answer(value)"
+        />
+      </div>
+    </div>
+
+    <PromptError :error="prompt.error"/>
+  </VueDisable>
+</template>
+
+<script>
+import Prompt from './Prompt'
+
+export default {
+  extends: Prompt,
+
+  buffer: true
+}
+</script>
diff --git a/packages/@vue/cli-ui/src/components/PromptList.vue b/packages/@vue/cli-ui/src/components/PromptList.vue
new file mode 100644
index 0000000000..c86a5cc970
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/PromptList.vue
@@ -0,0 +1,48 @@
+<template>
+  <VueDisable
+    :disabled="!prompt.enabled"
+    class="prompt prompt-list"
+  >
+    <div class="prompt-content">
+      <ListItemInfo
+        :name="$t(prompt.message)"
+        :description="$t(prompt.description)"
+        :link="prompt.link"
+      />
+
+      <div class="prompt-input">
+        <VueSelect
+          :value="value(prompt.value)"
+          @input="value => answer(value)"
+        >
+          <VueSelectButton
+            v-for="(choice, index) of prompt.choices"
+            :key="index"
+            :value="value(choice.value)"
+            :label="generateLabel(choice)"
+          />
+        </VueSelect>
+      </div>
+    </div>
+
+    <PromptError :error="prompt.error"/>
+  </VueDisable>
+</template>
+
+<script>
+import Prompt from './Prompt'
+
+export default {
+  extends: Prompt,
+
+  methods: {
+    generateLabel (choice) {
+      let label = this.$t(choice.name)
+      if (choice.isDefault) {
+        label += ` (${this.$t('components.prompt-list.default')})`
+      }
+      return label
+    }
+  }
+}
+</script>
diff --git a/packages/@vue/cli-ui/src/components/PromptsList.vue b/packages/@vue/cli-ui/src/components/PromptsList.vue
new file mode 100644
index 0000000000..8305970b62
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/PromptsList.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="prompts-list">
+    <div class="content">
+      <div
+        v-for="group of groups"
+        :key="group.id"
+        class="group"
+      >
+        <div v-if="group.id" class="group-name">{{ $t(group.id) }}</div>
+
+        <component
+          v-for="prompt of group.prompts"
+          v-if="prompt.visible"
+          :key="prompt.id"
+          :is="getModule(prompt)"
+          :prompt="prompt"
+          @answer="value => $emit('answer', { prompt, value })"
+        />
+      </div>
+
+      <div v-if="!prompts.length" class="vue-ui-empty">
+        <VueIcon icon="check_circle" class="empty-icon"/>
+        <span>{{ $t('components.prompts-list.empty') }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+const types = {
+  rawlist: 'list',
+  password: 'input'
+}
+
+export default {
+  props: {
+    prompts: {
+      type: Array,
+      required: true
+    }
+  },
+
+  computed: {
+    groups () {
+      const groupMap = {}
+      const groups = []
+      this.prompts.forEach(prompt => {
+        let group = groupMap[prompt.group]
+        if (!group) {
+          group = groupMap[prompt.group] = {
+            id: prompt.group,
+            prompts: []
+          }
+          groups.push(group)
+        }
+        group.prompts.push(prompt)
+      })
+      return groups
+    }
+  },
+
+  methods: {
+    getModule (prompt) {
+      let type = prompt.type
+      if (types[type]) {
+        type = types[type]
+      }
+      type = type.charAt(0).toUpperCase() + type.substr(1)
+      return require(`./Prompt${type}.vue`).default
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.group
+  margin-bottom ($padding-item * 2)
+
+.group-name
+  padding $padding-item $padding-item ($padding-item / 2)
+  font-size 1.6em
+  font-weight lighter
+  color $vue-ui-color-accent
+</style>
diff --git a/packages/@vue/cli-ui/src/components/StatusBar.vue b/packages/@vue/cli-ui/src/components/StatusBar.vue
new file mode 100644
index 0000000000..f9eee17168
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/StatusBar.vue
@@ -0,0 +1,179 @@
+<template>
+  <div class="status-bar">
+    <LoggerView
+      v-if="showLogs"
+      @close="showLogs = false"
+    />
+
+    <div class="content">
+      <div
+        class="section action current-project"
+        v-tooltip="$t('components.status-bar.project.tooltip')"
+        @click="onProjectClick()"
+      >
+        <VueIcon icon="work"/>
+        <span v-if="projectCurrent">{{ projectCurrent.name }}</span>
+        <span v-else class="label">{{ $t('components.status-bar.project.empty') }}</span>
+      </div>
+
+      <ApolloQuery
+        :query="require('@/graphql/cwd.gql')"
+        class="section current-path"
+        v-tooltip="$t('components.status-bar.path.tooltip')"
+        @click.native="onCwdClick()"
+      >
+        <ApolloSubscribeToMore
+          :document="require('@/graphql/cwdChanged.gql')"
+          :update-query="(previousResult, { subscriptionData }) => ({
+            cwd: subscriptionData.data.cwd
+          })"
+        />
+
+        <template slot-scope="{ result: { data } }">
+          <VueIcon icon="folder"/>
+          <span v-if="data">{{ data.cwd }}</span>
+        </template>
+      </ApolloQuery>
+
+      <div
+        class="section action console-log"
+        v-tooltip="$t('components.status-bar.log.tooltip')"
+        @click="onConsoleClick()"
+      >
+        <VueIcon icon="dvr"/>
+        <LoggerMessage class="last-message"
+          v-if="consoleLogLast"
+          :message="consoleLogLast"
+        />
+        <div v-else class="last-message">{{ $t('components.status-bar.log.empty') }}</div>
+      </div>
+
+      <div
+        class="section action bug-report"
+        @click="onBugReportClick()"
+      >
+        <VueIcon icon="bug_report"/>
+        <span>{{ $t('components.status-bar.report-bug') }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import PROJECT_CURRENT from '../graphql/projectCurrent.gql'
+import CONSOLE_LOG_LAST from '../graphql/consoleLogLast.gql'
+import CONSOLE_LOG_ADDED from '../graphql/consoleLogAdded.gql'
+
+let lastRoute
+
+export default {
+  data () {
+    return {
+      consoleLogLast: null,
+      showLogs: false,
+      projectCurrent: null
+    }
+  },
+
+  apollo: {
+    projectCurrent: {
+      query: PROJECT_CURRENT,
+      fetchPolicy: 'cache-and-network'
+    },
+
+    consoleLogLast: {
+      query: CONSOLE_LOG_LAST,
+      fetchPolicy: 'cache-and-network'
+    },
+
+    $subscribe: {
+      consoleLogAdded: {
+        query: CONSOLE_LOG_ADDED,
+        result ({ data }) {
+          this.consoleLogLast = data.consoleLogAdded
+        }
+      }
+    }
+  },
+
+  methods: {
+    onProjectClick () {
+      this.$emit('project')
+      if (this.$route.name === 'project-select') {
+        this.$router.push(lastRoute || { name: 'project-home' })
+      } else {
+        if (this.$route.name === 'project-create') {
+          lastRoute = null
+        } else {
+          const { name, params, query } = this.$route
+          lastRoute = { name, params, query }
+        }
+        this.$router.push({ name: 'project-select' })
+      }
+    },
+
+    onCwdClick () {
+      this.$emit('cwd')
+    },
+
+    onConsoleClick () {
+      this.$emit('console')
+      this.showLogs = !this.showLogs
+    },
+
+    onBugReportClick () {
+      const win = window.open(
+        'https://new-issue.vuejs.org/?repo=vuejs/vue-cli',
+        '_blank'
+      )
+      win.focus()
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.status-bar
+  $bg = $vue-ui-color-light-neutral
+
+  .content
+    h-box()
+    align-items center
+    background $bg
+    font-size $padding-item
+    height 28px
+
+  .section
+    h-box()
+    align-items center
+    opacity .8
+    padding 0 8px
+    height 100%
+    cursor default
+
+    &:hover
+      opacity 1
+      background lighten($bg, 40%)
+
+    > .vue-ui-icon + *
+      margin-left 4px
+
+    .label
+      color lighten($vue-ui-color-dark, 20%)
+
+    &.action
+      user-select none
+      cursor pointer
+
+  .console-log
+    &,
+    .last-message
+      flex 100% 1 1
+      width 0
+
+    .logger-message
+      font-size .9em
+      padding-right 0
+</style>
diff --git a/packages/@vue/cli-ui/src/components/StepWizard.vue b/packages/@vue/cli-ui/src/components/StepWizard.vue
new file mode 100644
index 0000000000..179fadaa3c
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/StepWizard.vue
@@ -0,0 +1,130 @@
+<template>
+  <div
+    class="step-wizard"
+    :class="{
+      'hide-tabs': hideTabs
+    }"
+  >
+    <div class="shell">
+      <div class="header">
+        <div class="content">
+          <div v-if="title" class="title">{{ title }}</div>
+        </div>
+      </div>
+
+      <VueTabs
+        ref="tabs"
+        class="main-tabs"
+        group-class="accent"
+        v-bind="$attrs"
+        v-on="$listeners"
+      >
+        <slot
+          :next="next"
+          :previous="previous"
+        />
+      </VueTabs>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  inheritAttrs: false,
+
+  props: {
+    hideTabs: {
+      type: Boolean,
+      default: false
+    },
+
+    title: {
+      type: String,
+      default: null
+    }
+  },
+
+  methods: {
+    next () {
+      const tabs = this.$refs.tabs
+      tabs.activateChild(tabs.activeChildIndex + 1)
+    },
+    previous () {
+      const tabs = this.$refs.tabs
+      tabs.activateChild(tabs.activeChildIndex - 1)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.step-wizard
+  box-sizing border-box
+
+  .shell
+    v-box()
+    height 100%
+
+  .header
+    .content
+      margin 0 auto
+
+  .main-tabs
+    height 0
+    flex auto 1 1
+
+  >>> .vue-ui-tab
+    margin 0 auto
+    padding $padding-item $padding-item 0
+    box-sizing border-box
+
+  .header,
+  >>> .tabs
+    background $vue-ui-color-light-neutral
+
+  >>> .tabs-content
+    height 0
+    flex auto 1 1
+
+  &,
+  >>> .vue-ui-tab,
+  >>> .vue-ui-tab-content
+    height 100%
+
+  >>> .vue-ui-tab-content
+    overflow-y hidden
+    v-box()
+    margin 0 auto
+
+    > .content
+      flex 100% 1 1
+      height 0
+      overflow-y auto
+
+    > .actions-bar
+      justify-content space-between
+      &.center
+        justify-content center
+
+  .title
+    padding $padding-item
+    font-size 24px
+    text-align center
+    font-weight lighter
+
+  &.hide-tabs
+    >>> .tabs
+      display none
+
+  &.frame
+    margin 0 auto
+    $max-width = 1200px
+    .shell
+      background $md-white
+    .header .content,
+    >>> .vue-ui-tab
+      max-width $max-width
+
+</style>
diff --git a/packages/@vue/cli-ui/src/components/TaskItem.vue b/packages/@vue/cli-ui/src/components/TaskItem.vue
new file mode 100644
index 0000000000..fbe2b98fde
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/TaskItem.vue
@@ -0,0 +1,101 @@
+<template>
+  <div
+    class="task-item list-item"
+    :class="[
+      `status-${task.status}`,
+      {
+        selected
+      }
+    ]"
+    @dblclick="runTask()"
+  >
+    <div class="content">
+      <ItemLogo
+        :icon="iconData.icon"
+        :class="iconData.class"
+        v-tooltip="status"
+      />
+
+      <ListItemInfo
+        :name="task.name"
+        :description="(task.status === 'idle' && $t(task.description)) || status"
+        :selected="selected"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import TASK_RUN from '../graphql/taskRun.gql'
+
+const icons = {
+  idle: { icon: 'assignment', class: '' },
+  running: { icon: 'more_horiz', class: 'info' },
+  done: { icon: 'check_circle', class: 'success' },
+  error: { icon: 'error', class: 'danger' },
+  terminated: { icon: 'error', class: '' }
+}
+
+export default {
+  props: {
+    task: {
+      type: Object,
+      required: true
+    },
+
+    selected: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  computed: {
+    status () {
+      return this.$t(`types.task.status.${this.task.status}`)
+    },
+
+    iconData () {
+      return icons[this.task.status]
+    }
+  },
+
+  methods: {
+    runTask () {
+      if (this.task.status === 'running') return
+      this.$apollo.mutate({
+        mutation: TASK_RUN,
+        variables: {
+          id: this.task.id
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.task-item
+  padding $padding-item
+
+  .content
+    h-box()
+    box-center()
+
+  .list-item-info
+    flex 100% 1 1
+    width 0
+    overflow hidden
+
+    >>> .description
+      white-space nowrap
+      overflow hidden
+      text-overflow ellipsis
+
+  &.selected
+    &.status-error .list-item-info >>> .name
+      color $vue-ui-color-danger
+    &.status-running .list-item-info >>> .name
+      color $vue-ui-color-info
+</style>
diff --git a/packages/@vue/cli-ui/src/components/TerminalView.vue b/packages/@vue/cli-ui/src/components/TerminalView.vue
new file mode 100644
index 0000000000..513f4b63a7
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/TerminalView.vue
@@ -0,0 +1,226 @@
+<template>
+  <div class="terminal-view">
+    <div v-if="toolbar" class="pane-toolbar">
+      <VueIcon
+        icon="dvr"
+      />
+      <div class="title">{{ title }}</div>
+      <VueButton
+        class="icon-button"
+        icon-left="delete_forever"
+        v-tooltip="$t('components.terminal-view.buttons.clear')"
+        @click="clear(); $emit('clear')"
+      />
+      <VueIcon
+        icon="lens"
+        class="separator"
+      />
+      <VueButton
+        class="icon-button"
+        icon-left="subdirectory_arrow_left"
+        v-tooltip="$t('components.terminal-view.buttons.scroll')"
+        @click="scrollToBottom()"
+      />
+    </div>
+
+    <div class="view">
+      <div ref="render" class="xterm-render"></div>
+    </div>
+
+    <resize-observer v-if="autoSize" @notify="fit"/>
+  </div>
+</template>
+
+<script>
+import { Terminal } from 'xterm'
+import * as fit from 'xterm/dist/addons/fit/fit'
+import * as webLinks from 'xterm/dist/addons/webLinks/webLinks'
+
+Terminal.applyAddon(fit)
+Terminal.applyAddon(webLinks)
+
+const defaultTheme = {
+  foreground: '#000',
+  background: '#dbebec',
+  cursor: 'rgba(0, 0, 0, .4)',
+  selection: 'rgba(0, 0, 0, 0.3)',
+  black: '#000000',
+  red: '#e83030',
+  brightRed: '#e83030',
+  green: '#42b983',
+  brightGreen: '#42b983',
+  brightYellow: '#ea6e00',
+  yellow: '#ea6e00',
+  magenta: '#e83030',
+  brightMagenta: '#e83030',
+  cyan: '#03c2e6',
+  brightBlue: '#03c2e6',
+  brightCyan: '#03c2e6',
+  blue: '#03c2e6',
+  white: '#d0d0d0',
+  brightBlack: '#808080',
+  brightWhite: '#ffffff'
+}
+
+export default {
+  props: {
+    cols: {
+      type: Number,
+      required: true
+    },
+
+    rows: {
+      type: Number,
+      required: true
+    },
+
+    content: {
+      type: String,
+      default: undefined
+    },
+
+    autoSize: {
+      type: Boolean,
+      default: false
+    },
+
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+
+    toolbar: {
+      type: Boolean,
+      default: false
+    },
+
+    title: {
+      type: String,
+      default: null
+    },
+
+    openLinks: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  watch: {
+    cols (c) {
+      this.$_terminal.resize(c, this.rows)
+    },
+
+    rows (r) {
+      this.$_terminal.resize(this.cols, r)
+    },
+
+    content: 'setContent'
+  },
+
+  mounted () {
+    this.initTerminal()
+
+    if (this.autoSize) {
+      this.$nextTick(this.fit)
+    }
+  },
+
+  beforeDestroy () {
+    this.$_terminal.destroy()
+  },
+
+  methods: {
+    initTerminal () {
+      let term = this.$_terminal = new Terminal({
+        cols: this.cols,
+        rows: this.rows,
+        theme: defaultTheme,
+        ...this.options
+      })
+      webLinks.webLinksInit(term, this.handleLink)
+      term.open(this.$refs.render)
+
+      term.on('blur', () => this.$emit('blur'))
+      term.on('focus', () => this.$emit('focus'))
+    },
+
+    setContent (value, ln = true) {
+      if (value.indexOf('\n') !== -1) {
+        value.split('\n').forEach(
+          t => this.setContent(t)
+        )
+        return
+      }
+      if (typeof value === 'string') {
+        this.$_terminal[ln ? 'writeln' : 'write'](value)
+      } else {
+        this.$_terminal.writeln('')
+      }
+    },
+
+    addLog (log) {
+      this.setContent(log.text, log.type === 'stdout')
+    },
+
+    clear () {
+      this.$_terminal.clear()
+    },
+
+    scrollToBottom () {
+      this.$_terminal.scrollToBottom()
+    },
+
+    handleLink (event, uri) {
+      if (this.openLinks) {
+        window.open(uri, '_blank')
+      }
+      this.$emit('link', uri)
+    },
+
+    async fit () {
+      let term = this.$_terminal
+      term.element.style.display = 'none'
+
+      await this.$nextTick()
+
+      term.fit()
+      term.element.style.display = ''
+      term.refresh(0, term.rows - 1)
+    },
+
+    focus () {
+      this.$_terminal.focus()
+    },
+
+    blur () {
+      this.$_terminal.blur()
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+@import "~xterm/dist/xterm.css"
+</style>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.terminal-view
+  v-box()
+  align-items stretch
+  background $vue-ui-color-light-neutral
+
+  .view
+    flex 100% 1 1
+    height 0
+    position relative
+    padding-left $padding-item
+
+  .xterm-render
+    width 100%
+    height 100%
+    >>> .xterm
+      .xterm-cursor-layer
+        display none
+</style>
diff --git a/packages/@vue/cli-ui/src/components/ViewBadge.vue b/packages/@vue/cli-ui/src/components/ViewBadge.vue
new file mode 100644
index 0000000000..3b8fb1f94e
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/ViewBadge.vue
@@ -0,0 +1,63 @@
+<template>
+  <div
+    class="view-badge"
+    :class="[
+      `type-${badge.type}`
+    ]"
+  >
+    <div class="content">
+      <div class="counter">{{ badge.count }}</div>
+      <div class="label">{{ $t(badge.label) }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    badge: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.view-badge
+  .content
+    font-size 12px
+    h-box()
+    box-center()
+
+    .counter
+      min-width 22px
+      text-align center
+      border-radius 8px
+      margin-right 6px
+      font-family $font-mono
+
+    .label
+      flex auto 1 1
+
+  &.type-info
+    .counter
+      background $vue-ui-color-info
+  &.type-success
+    .counter
+      background $vue-ui-color-success
+  &.type-error
+    .counter
+      background $vue-ui-color-danger
+  &.type-warning
+    .counter
+      background $vue-ui-color-warning
+  &.type-accent
+    .counter
+      background $vue-ui-color-accent
+  &.type-dim
+    .counter
+      background $md-grey
+</style>
diff --git a/packages/@vue/cli-ui/src/filters.js b/packages/@vue/cli-ui/src/filters.js
new file mode 100644
index 0000000000..7d9f963539
--- /dev/null
+++ b/packages/@vue/cli-ui/src/filters.js
@@ -0,0 +1,25 @@
+/**
+ * Display a folder path
+ * @param {string} value path
+ * @param {number} maxLength maximum length of displayed path
+ */
+export function folder (value, maxLength = -1) {
+  value = value.replace(/\\/g, '/')
+
+  if (value.charAt(value.length - 1) !== '/') {
+    value += '/'
+  }
+
+  if (maxLength !== -1 && value.length > maxLength) {
+    const exceeded = value.length - maxLength + 3
+    const firstEnd = Math.floor(maxLength / 2 - exceeded / 2)
+    const lastStart = Math.ceil(maxLength / 2 + exceeded / 2)
+    value = value.substring(0, firstEnd) + '...' + value.substring(lastStart)
+  }
+
+  return value
+}
+
+export function date (value) {
+  return new Date(value).toLocaleString()
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/api/PluginApi.js b/packages/@vue/cli-ui/src/graphql-api/api/PluginApi.js
new file mode 100644
index 0000000000..cfdb7fc3b4
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/api/PluginApi.js
@@ -0,0 +1,375 @@
+// Connectors
+const logs = require('../connectors/logs')
+const sharedData = require('../connectors/shared-data')
+const views = require('../connectors/views')
+// Utils
+const ipc = require('../utils/ipc')
+// Validators
+const { validateConfiguration } = require('./configuration')
+const { validateDescribeTask, validateAddTask } = require('./task')
+const { validateClientAddon } = require('./client-addon')
+const { validateView, validateBadge } = require('./view')
+
+class PluginApi {
+  constructor (context) {
+    // Context
+    this.context = context
+    this.pluginId = null
+    this.project = null
+    // Hooks
+    this.projectOpenHooks = []
+    this.pluginReloadHooks = []
+    // Data
+    this.configurations = []
+    this.describedTasks = []
+    this.addedTasks = []
+    this.clientAddons = []
+    this.views = []
+    this.actions = new Map()
+    this.ipcHandlers = []
+  }
+
+  /**
+   * Register an handler called when the project is open (only if this plugin is loaded).
+   *
+   * @param {function} cb Handler
+   */
+  onProjectOpen (cb) {
+    if (this.project) {
+      cb(this.project)
+      return
+    }
+    this.projectOpenHooks.push(cb)
+  }
+
+  /**
+   * Register an handler called when the plugin is reloaded.
+   *
+   * @param {function} cb Handler
+   */
+  onPluginReload (cb) {
+    this.pluginReloadHooks.push(cb)
+  }
+
+  /**
+   * Describe a project configuration (usually for config file like `.eslintrc.json`).
+   *
+   * @param {object} options Configuration description
+   */
+  describeConfig (options) {
+    try {
+      validateConfiguration(options)
+      this.configurations.push(options)
+    } catch (e) {
+      logs.add({
+        type: 'error',
+        tag: 'PluginApi',
+        message: `(${this.pluginId || 'unknown plugin'}) 'describeConfig' options are invalid\n${e.message}`
+      }, this.context)
+      console.error(new Error(`Invalid options: ${e.message}`))
+    }
+  }
+
+  /**
+   * Describe a project task with additional information.
+   * The tasks are generated from the scripts in the project `package.json`.
+   *
+   * @param {object} options Task description
+   */
+  describeTask (options) {
+    try {
+      validateDescribeTask(options)
+      this.describedTasks.push(options)
+    } catch (e) {
+      logs.add({
+        type: 'error',
+        tag: 'PluginApi',
+        message: `(${this.pluginId || 'unknown plugin'}) 'describeTask' options are invalid\n${e.message}`
+      }, this.context)
+      console.error(new Error(`Invalid options: ${e.message}`))
+    }
+  }
+
+  /**
+   * Get the task description matching a script command.
+   *
+   * @param {string} command Npm script command from `package.json`
+   * @returns {object} Task description
+   */
+  getDescribedTask (command) {
+    return this.describedTasks.find(
+      options => options.match.test(command)
+    )
+  }
+
+  /**
+   * Add a new task indepently from the scripts.
+   * The task will only appear in the UI.
+   *
+   * @param {object} options Task description
+   */
+  addTask (options) {
+    try {
+      validateAddTask(options)
+      this.addedTasks.push(options)
+    } catch (e) {
+      logs.add({
+        type: 'error',
+        tag: 'PluginApi',
+        message: `(${this.pluginId || 'unknown plugin'}) 'addTask' options are invalid\n${e.message}`
+      }, this.context)
+      console.error(new Error(`Invalid options: ${e.message}`))
+    }
+  }
+
+  /**
+   * Register a client addon (a JS bundle which will be loaded in the browser).
+   * Used to load components and add vue-router routes.
+   *
+   * @param {object} options Client addon options
+   *   {
+   *     id: string,
+   *     url: string
+   *   }
+   *   or
+   *   {
+   *     id: string,
+   *     path: string
+   *   }
+   */
+  addClientAddon (options) {
+    try {
+      validateClientAddon(options)
+      if (options.url && options.path) {
+        throw new Error(`'url' and 'path' can't be defined at the same time.`)
+      }
+      this.clientAddons.push(options)
+    } catch (e) {
+      logs.add({
+        type: 'error',
+        tag: 'PluginApi',
+        message: `(${this.pluginId || 'unknown plugin'}) 'addClientAddon' options are invalid\n${e.message}`
+      }, this.context)
+      console.error(new Error(`Invalid options: ${e.message}`))
+    }
+  }
+
+  /* Project view */
+
+  /**
+   * Add a new project view below the builtin 'plugins', 'config' and 'tasks' ones.
+   *
+   * @param {object} options ProjectView options
+   */
+  addView (options) {
+    try {
+      validateView(options)
+      this.views.push(options)
+    } catch (e) {
+      logs.add({
+        type: 'error',
+        tag: 'PluginApi',
+        message: `(${this.pluginId || 'unknown plugin'}) 'addView' options are invalid\n${e.message}`
+      }, this.context)
+      console.error(new Error(`Invalid options: ${e.message}`))
+    }
+  }
+
+  /**
+   * Add a badge to the project view button.
+   * If the badge already exists, add 1 to the counter.
+   *
+   * @param {string} viewId Project view id
+   * @param {object} options Badge options
+   */
+  addViewBadge (viewId, options) {
+    try {
+      validateBadge(options)
+      views.addBadge({ viewId, badge: options }, this.context)
+    } catch (e) {
+      logs.add({
+        type: 'error',
+        tag: 'PluginApi',
+        message: `(${this.pluginId || 'unknown plugin'}) 'addViewBadge' options are invalid\n${e.message}`
+      }, this.context)
+      console.error(new Error(`Invalid options: ${e.message}`))
+    }
+  }
+
+  /**
+   * Remove 1 from the counter of a badge if it exists.
+   * If the badge counter reaches 0, it is removed from the button.
+   *
+   * @param {any} viewId
+   * @param {any} badgeId
+   * @memberof PluginApi
+   */
+  removeViewBadge (viewId, badgeId) {
+    views.removeBadge({ viewId, badgeId }, this.context)
+  }
+
+  /* IPC */
+
+  /**
+   * Add a listener to the IPC messages.
+   *
+   * @param {function} cb Callback with 'data' param
+   */
+  ipcOn (cb) {
+    this.ipcHandlers.push(cb)
+    return ipc.on(cb)
+  }
+
+  /**
+   * Remove a listener for IPC messages.
+   *
+   * @param {any} cb Callback to be removed
+   */
+  ipcOff (cb) {
+    const index = this.ipcHandlers.indexOf(cb)
+    if (index !== -1) this.ipcHandlers.splice(index, 1)
+    ipc.off(cb)
+  }
+
+  /**
+   * Send an IPC message to all connected IPC clients.
+   *
+   * @param {any} data Message data
+   */
+  ipcSend (data) {
+    ipc.send(data)
+  }
+
+  /**
+   * Get the local DB instance (lowdb)
+   *
+   * @readonly
+   */
+  get db () {
+    return this.context.db
+  }
+
+  /* Namespaced */
+
+  /**
+   * Retrieve a Shared data value.
+   *
+   * @param {string} id Id of the Shared data
+   * @returns {any} Shared data value
+   */
+  getSharedData (id) {
+    return sharedData.get(id, this.context)
+  }
+
+  /**
+   * Set or update the value of a Shared data
+   *
+   * @param {string} id Id of the Shared data
+   * @param {any} value Value of the Shared data
+   */
+  setSharedData (id, value) {
+    sharedData.set({ id, value }, this.context)
+  }
+
+  /**
+   * Delete a shared data.
+   *
+   * @param {string} id Id of the Shared data
+   */
+  removeSharedData (id) {
+    sharedData.remove(id, this.context)
+  }
+
+  /**
+   * Watch for a value change of a shared data
+   *
+   * @param {string} id Id of the Shared data
+   * @param {function} handler Callback
+   */
+  watchSharedData (id, handler) {
+    sharedData.watch(id, handler)
+  }
+
+  /**
+   * Delete the watcher of a shared data.
+   *
+   * @param {string} id Id of the Shared data
+   * @param {function} handler Callback
+   */
+  unwatchSharedData (id, handler) {
+    sharedData.unwatch(id, handler)
+  }
+
+  /**
+   * Listener triggered when a Plugin action is called from a client addon component.
+   *
+   * @param {string} id Id of the action to listen
+   * @param {any} cb Callback (ex: (params) => {} )
+   */
+  onAction (id, cb) {
+    let list = this.actions.get(id)
+    if (!list) {
+      list = []
+      this.actions.set(id, list)
+    }
+    list.push(cb)
+  }
+
+  /**
+   * Call a Plugin action. This can also listened by client addon components.
+   *
+   * @param {string} id Id of the action
+   * @param {object} params Params object passed as 1st argument to callbacks
+   * @returns {Promise}
+   */
+  callAction (id, params) {
+    const plugins = require('../connectors/plugins')
+    return plugins.callAction({ id, params }, this.context)
+  }
+
+  /**
+   * Retrieve a value from the local DB
+   *
+   * @param {string} id Path to the item
+   * @returns Item value
+   */
+  storageGet (id) {
+    return this.db.get(id).value()
+  }
+
+  /**
+   * Store a value into the local DB
+   *
+   * @param {string} id Path to the item
+   * @param {any} value Value to be stored (must be serializable in JSON)
+   */
+  storageSet (id, value) {
+    this.db.set(id, value).write()
+  }
+
+  /**
+   * Create a namespaced version of:
+   *   - getSharedData
+   *   - setSharedData
+   *   - onAction
+   *   - callAction
+   *
+   * @param {string} namespace Prefix to add to the id params
+   * @returns {object} Namespaced methods
+   */
+  namespace (namespace) {
+    return {
+      getSharedData: (id) => this.getSharedData(namespace + id),
+      setSharedData: (id, value) => this.setSharedData(namespace + id, value),
+      removeSharedData: (id) => this.removeSharedData(namespace + id),
+      watchSharedData: (id, handler) => this.watchSharedData(namespace + id, handler),
+      unwatchSharedData: (id, handler) => this.unwatchSharedData(namespace + id, handler),
+      onAction: (id, cb) => this.onAction(namespace + id, cb),
+      callAction: (id, params) => this.callAction(namespace + id, params),
+      storageGet: (id) => this.storageGet(namespace + id),
+      storageSet: (id, value) => this.storageSet(namespace + id, value)
+    }
+  }
+}
+
+module.exports = PluginApi
diff --git a/packages/@vue/cli-ui/src/graphql-api/api/client-addon.js b/packages/@vue/cli-ui/src/graphql-api/api/client-addon.js
new file mode 100644
index 0000000000..431ceadf2a
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/api/client-addon.js
@@ -0,0 +1,11 @@
+const { createSchema, validateSync } = require('@vue/cli-shared-utils')
+
+const schema = createSchema(joi => ({
+  id: joi.string().required(),
+  path: joi.string(),
+  url: joi.string()
+}))
+
+exports.validateClientAddon = (options) => {
+  validateSync(options, schema)
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/api/configuration.js b/packages/@vue/cli-ui/src/graphql-api/api/configuration.js
new file mode 100644
index 0000000000..c5304ee228
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/api/configuration.js
@@ -0,0 +1,21 @@
+const { createSchema, validateSync } = require('@vue/cli-shared-utils')
+
+const schema = createSchema(joi => ({
+  id: joi.string().required(),
+  name: joi.string().required(),
+  description: joi.string(),
+  link: joi.string().uri(),
+  icon: joi.string(),
+  files: joi.object({
+    json: joi.array().items(joi.string()),
+    js: joi.array().items(joi.string()),
+    yaml: joi.array().items(joi.string()),
+    package: joi.string()
+  }),
+  onRead: joi.func().required(),
+  onWrite: joi.func().required()
+}))
+
+exports.validateConfiguration = (options) => {
+  validateSync(options, schema)
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/api/task.js b/packages/@vue/cli-ui/src/graphql-api/api/task.js
new file mode 100644
index 0000000000..21d366eb56
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/api/task.js
@@ -0,0 +1,36 @@
+const { createSchema, validateSync } = require('@vue/cli-shared-utils')
+
+const schema = joi => ({
+  description: joi.string(),
+  link: joi.string().uri(),
+  prompts: joi.array(),
+  views: joi.array().items(joi.object({
+    id: joi.string().required(),
+    label: joi.string().required(),
+    icon: joi.string(),
+    component: joi.string().required()
+  })),
+  defaultView: joi.string(),
+  onBeforeRun: joi.func(),
+  onRun: joi.func(),
+  onExit: joi.func()
+})
+
+const describeSchema = createSchema(joi => ({
+  match: joi.object().type(RegExp).required().description('Match a npm script command'),
+  ...schema(joi)
+}))
+
+const addSchema = createSchema(joi => ({
+  name: joi.string().required(),
+  command: joi.string().required(),
+  ...schema(joi)
+}))
+
+exports.validateDescribeTask = (options) => {
+  validateSync(options, describeSchema)
+}
+
+exports.validateAddTask = (options) => {
+  validateSync(options, addSchema)
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/api/view.js b/packages/@vue/cli-ui/src/graphql-api/api/view.js
new file mode 100644
index 0000000000..e8d0044628
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/api/view.js
@@ -0,0 +1,24 @@
+const { createSchema, validateSync } = require('@vue/cli-shared-utils')
+
+const viewSchema = createSchema(joi => ({
+  id: joi.string().required(),
+  name: joi.string().required().description('route name (vue-router)'),
+  icon: joi.string().required(),
+  tooltip: joi.string().required()
+}))
+
+const badgeSchema = createSchema(joi => ({
+  id: joi.string().required(),
+  type: joi.string(),
+  label: joi.string().required(),
+  priority: joi.number().integer(),
+  hidden: joi.boolean()
+}))
+
+exports.validateView = (options) => {
+  validateSync(options, viewSchema)
+}
+
+exports.validateBadge = (options) => {
+  validateSync(options, badgeSchema)
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/channels.js b/packages/@vue/cli-ui/src/graphql-api/channels.js
new file mode 100644
index 0000000000..c8ed274f63
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/channels.js
@@ -0,0 +1,16 @@
+module.exports = {
+  CWD_CHANGED: 'cwd_changed',
+  PROGRESS_CHANGED: 'progress_changed',
+  PROGRESS_REMOVED: 'progress_removed',
+  CONSOLE_LOG_ADDED: 'console_log_added',
+  TASK_CHANGED: 'task_changed',
+  TASK_LOG_ADDED: 'task_log_added',
+  VIEW_ADDED: 'view_added',
+  VIEW_REMOVED: 'view_removed',
+  VIEW_CHANGED: 'view_changed',
+  CLIENT_ADDON_ADDED: 'client_addon_added',
+  SHARED_DATA_UPDATED: 'shared_data_updated',
+  PLUGIN_ACTION_CALLED: 'plugin_action_called',
+  PLUGIN_ACTION_RESOLVED: 'plugin_action_resolved',
+  LOCALE_ADDED: 'locale_added'
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/connectors/client-addons.js b/packages/@vue/cli-ui/src/graphql-api/connectors/client-addons.js
new file mode 100644
index 0000000000..69a52aa3f0
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/connectors/client-addons.js
@@ -0,0 +1,68 @@
+const path = require('path')
+// Subs
+const channels = require('../channels')
+// Utils
+const { resolveModuleRoot } = require('../utils/resolve-path')
+
+let addons = []
+
+let baseUrl = process.env.VUE_APP_CLI_UI_URL
+if (typeof baseUrl === 'undefined') {
+  baseUrl = 'http://localhost:4000'
+} else {
+  baseUrl = baseUrl.replace(/ws:\/\/([a-z0-9_-]+:\d+).*/i, 'http://$1')
+}
+
+function list (context) {
+  return addons
+}
+
+function add (options, context) {
+  if (findOne(options.id)) remove(options.id, context)
+
+  addons.push(options)
+  context.pubsub.publish(channels.CLIENT_ADDON_ADDED, {
+    clientAddonAdded: options
+  })
+}
+
+function findOne (id, context = null) {
+  return addons.find(
+    addon => addon.id === id
+  )
+}
+
+function remove (id, context) {
+  const index = addons.findIndex(
+    addon => addon.id === id
+  )
+  if (index !== -1) addons.splice(index, 1)
+}
+
+function getUrl (addon, context) {
+  return addon.url || `${baseUrl}/_addon/${addon.id}/index.js`
+}
+
+function serve (req, res) {
+  const { id, 0: file } = req.params
+  const addon = findOne(id)
+  if (addon && addon.path) {
+    const basePath = resolveModuleRoot(require.resolve(addon.path))
+    if (basePath) {
+      res.sendFile(path.join(basePath, file))
+      return
+    }
+  }
+
+  res.status(404)
+  res.send(`Addon ${id} not found in loaded addons. Try opening a vue-cli project first?`)
+}
+
+module.exports = {
+  list,
+  add,
+  remove,
+  findOne,
+  getUrl,
+  serve
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/connectors/configurations.js b/packages/@vue/cli-ui/src/graphql-api/connectors/configurations.js
new file mode 100644
index 0000000000..7225ddef9e
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/connectors/configurations.js
@@ -0,0 +1,228 @@
+const fs = require('fs-extra')
+const path = require('path')
+const yaml = require('js-yaml')
+const clone = require('clone')
+const stringifyJS = require('javascript-stringify')
+// Connectors
+const cwd = require('./cwd')
+const plugins = require('./plugins')
+const folders = require('./folders')
+const prompts = require('./prompts')
+// Utils
+const { get, set, remove } = require('../../util/object')
+const { log } = require('../utils/logger')
+const { loadModule } = require('@vue/cli/lib/util/module')
+const extendJSConfig = require('@vue/cli/lib/util/extendJSConfig')
+
+const fileTypes = ['js', 'json', 'yaml']
+let current = {}
+
+function list (context) {
+  return plugins.getApi().configurations
+}
+
+function findOne (id, context) {
+  return list(context).find(
+    c => c.id === id
+  )
+}
+
+function findFile (config, context) {
+  if (!config.files) {
+    return null
+  }
+
+  if (config.files.package) {
+    const pkg = folders.readPackage(cwd.get(), context)
+    const data = pkg[config.files.package]
+    if (data) {
+      return { type: 'package', path: path.join(cwd.get(), 'package.json') }
+    }
+  }
+
+  for (const type of fileTypes) {
+    const files = config.files[type]
+    if (files) {
+      for (const file of files) {
+        const resolvedFile = path.resolve(cwd.get(), file)
+        if (fs.existsSync(resolvedFile)) {
+          return { type, path: resolvedFile }
+        }
+      }
+    }
+  }
+}
+
+function getDefaultFile (config, context) {
+  if (!config.files) {
+    return null
+  }
+
+  const keys = Object.keys(config.files)
+  if (keys.length) {
+    for (const key of keys) {
+      if (key !== 'package') {
+        const file = config.files[key][0]
+        return {
+          type: key,
+          path: path.resolve(cwd.get(), file)
+        }
+      }
+    }
+  }
+}
+
+function readData (config, context) {
+  const file = findFile(config, context)
+  config.file = file
+  if (file) {
+    if (file.type === 'package') {
+      const pkg = folders.readPackage(cwd.get(), context)
+      return pkg[config.files.package]
+    } else if (file.type === 'js') {
+      return loadModule(file.path, cwd.get(), true)
+    } else {
+      const rawContent = fs.readFileSync(file.path, { encoding: 'utf8' })
+      if (file.type === 'json') {
+        return JSON.parse(rawContent)
+      } else if (file.type === 'yaml') {
+        return yaml.safeLoad(rawContent)
+      }
+    }
+  }
+  return {}
+}
+
+function writeData ({ config, data, changedFields }, context) {
+  let file = findFile(config, context)
+
+  if (!file) {
+    file = getDefaultFile(config, context)
+  }
+
+  if (file) {
+    log('Config write', config.id, data, changedFields, file.path)
+    fs.ensureFileSync(file.path)
+    let rawContent
+    if (file.type === 'package') {
+      const pkg = folders.readPackage(cwd.get(), context)
+      pkg[config.files.package] = data
+      rawContent = JSON.stringify(pkg, null, 2)
+    } else {
+      if (file.type === 'json') {
+        rawContent = JSON.stringify(data, null, 2)
+      } else if (file.type === 'yaml') {
+        rawContent = yaml.safeDump(data)
+      } else if (file.type === 'js') {
+        let source = fs.readFileSync(file.path, { encoding: 'utf8' })
+        if (!source.trim()) {
+          rawContent = `module.exports = ${stringifyJS(data, null, 2)}`
+        } else {
+          const changedData = changedFields.reduce((obj, field) => {
+            obj[field] = data[field]
+            return obj
+          }, {})
+          rawContent = extendJSConfig(changedData, source)
+        }
+      }
+    }
+    fs.writeFileSync(file.path, rawContent, { encoding: 'utf8' })
+  }
+}
+
+async function getPrompts (id, context) {
+  const config = findOne(id, context)
+  if (config) {
+    const data = readData(config, context)
+    log('Config read', config.id, data)
+    current = {
+      config,
+      data
+    }
+    const configData = await config.onRead({
+      cwd: cwd.get(),
+      data
+    })
+    await prompts.reset()
+    configData.prompts.forEach(prompts.add)
+    if (configData.answers) {
+      await prompts.setAnswers(configData.answers)
+    }
+    await prompts.start()
+    return prompts.list()
+  }
+  return []
+}
+
+async function save (id, context) {
+  const config = findOne(id, context)
+  if (config) {
+    if (current.config === config) {
+      const answers = prompts.getAnswers()
+      let data = clone(current.data)
+      const changedFields = []
+      await config.onWrite({
+        prompts: prompts.list(),
+        answers,
+        data: current.data,
+        file: config.file,
+        cwd: cwd.get(),
+        api: {
+          assignData: newData => {
+            changedFields.push(...Object.keys(newData))
+            Object.assign(data, newData)
+          },
+          setData: newData => {
+            Object.keys(newData).forEach(key => {
+              let field = key
+              const dotIndex = key.indexOf('.')
+              if (dotIndex !== -1) {
+                field = key.substr(0, dotIndex)
+              }
+              changedFields.push(field)
+
+              const value = newData[key]
+              if (typeof value === 'undefined') {
+                remove(data, key)
+              } else {
+                set(data, key, value)
+              }
+            })
+          },
+          getAnswer: async (id, mapper) => {
+            const prompt = prompts.findOne(id)
+            if (prompt) {
+              const defaultValue = await prompts.getDefaultValue(prompt)
+              if (defaultValue !== prompt.rawValue) {
+                let value = get(answers, prompt.id)
+                if (mapper) {
+                  value = mapper(value)
+                }
+                return value
+              }
+            }
+          }
+        }
+      })
+      writeData({ config, data, changedFields }, context)
+      current = {}
+    }
+  }
+  return config
+}
+
+function cancel (id, context) {
+  const config = findOne(id, context)
+  if (config) {
+    current = {}
+  }
+  return config
+}
+
+module.exports = {
+  list,
+  findOne,
+  getPrompts,
+  save,
+  cancel
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/connectors/cwd.js b/packages/@vue/cli-ui/src/graphql-api/connectors/cwd.js
new file mode 100644
index 0000000000..d3a1839e9e
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/connectors/cwd.js
@@ -0,0 +1,14 @@
+const channels = require('../channels')
+
+let cwd = process.cwd()
+
+module.exports = {
+  get: () => cwd,
+  set: (value, context) => {
+    cwd = value
+    context.pubsub.publish(channels.CWD_CHANGED, { cwdChanged: value })
+    try {
+      process.chdir(value)
+    } catch (err) {}
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/connectors/files.js b/packages/@vue/cli-ui/src/graphql-api/connectors/files.js
new file mode 100644
index 0000000000..4f438ee1ff
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/connectors/files.js
@@ -0,0 +1,33 @@
+const launch = require('launch-editor')
+const path = require('path')
+// Connectors
+const cwd = require('./cwd')
+const git = require('./git')
+const logs = require('./logs')
+
+async function openInEditor (input, context) {
+  let query
+  if (input.gitPath) {
+    query = await git.resolveFile(input.file, context)
+  } else {
+    path.resolve(cwd.get(), input.file)
+  }
+  if (input.line) {
+    query += `:${input.line}`
+    if (input.column) {
+      query += `:${input.column}`
+    }
+  }
+  logs.add({
+    message: `Opening file '${query}' in code editor...`,
+    type: 'info'
+  }, context)
+  launch(query, (fileName, errorMessage) => {
+    console.error(`Unable to open '${fileName}'`, errorMessage)
+  })
+  return true
+}
+
+module.exports = {
+  openInEditor
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/connectors/folders.js b/packages/@vue/cli-ui/src/graphql-api/connectors/folders.js
new file mode 100644
index 0000000000..a6ee309635
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/connectors/folders.js
@@ -0,0 +1,110 @@
+const path = require('path')
+const fs = require('fs-extra')
+const LRU = require('lru-cache')
+
+const pkgCache = new LRU({
+  max: 500,
+  maxAge: 1000 * 5
+})
+
+const cwd = require('./cwd')
+
+async function list (base, context) {
+  const files = await fs.readdir(base, 'utf8')
+  return files.map(
+    file => ({
+      path: path.join(base, file),
+      name: file
+    })
+  ).filter(
+    file => fs.statSync(file.path).isDirectory()
+  )
+}
+
+function generateFolder (file, context) {
+  return {
+    name: path.basename(file),
+    path: file,
+    favorite: context.db.get('foldersFavorite').find({ id: file }).size().value()
+  }
+}
+
+function getCurrent (args, context) {
+  const base = cwd.get()
+  return generateFolder(base, context)
+}
+
+function open (file, context) {
+  cwd.set(file, context)
+  return generateFolder(file, context)
+}
+
+function openParent (file, context) {
+  const newFile = path.dirname(file)
+  cwd.set(newFile, context)
+  return generateFolder(newFile, context)
+}
+
+function isPackage (file, context) {
+  return fs.existsSync(path.join(file, 'package.json'))
+}
+
+function readPackage (file, context, force = false) {
+  if (!force) {
+    const cachedValue = pkgCache.get(file)
+    if (cachedValue) {
+      return cachedValue
+    }
+  }
+  const pkg = fs.readJsonSync(path.join(file, 'package.json'))
+  pkgCache.set(file, pkg)
+  return pkg
+}
+
+function writePackage ({ file, data }, context) {
+  fs.outputJsonSync(path.join(file, 'package.json'), data, {
+    spaces: 2
+  })
+  return true
+}
+
+function isVueProject (file, context) {
+  if (!isPackage(file)) return false
+
+  const pkg = readPackage(file, context)
+  return Object.keys(pkg.devDependencies || {}).includes('@vue/cli-service')
+}
+
+function listFavorite (context) {
+  return context.db.get('foldersFavorite').value().map(
+    file => generateFolder(file.id, context)
+  )
+}
+
+function setFavorite ({ file, favorite }, context) {
+  const collection = context.db.get('foldersFavorite')
+  if (favorite) {
+    collection.push({ id: file }).write()
+  } else {
+    collection.remove({ id: file }).write()
+  }
+  return generateFolder(file, context)
+}
+
+async function deleteFolder (file) {
+  await fs.remove(file)
+}
+
+module.exports = {
+  getCurrent,
+  list,
+  open,
+  openParent,
+  isPackage,
+  readPackage,
+  writePackage,
+  isVueProject,
+  listFavorite,
+  setFavorite,
+  delete: deleteFolder
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/connectors/git.js b/packages/@vue/cli-ui/src/graphql-api/connectors/git.js
new file mode 100644
index 0000000000..9dee30be8d
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/connectors/git.js
@@ -0,0 +1,80 @@
+const execa = require('execa')
+const path = require('path')
+const parseDiff = require('../utils/parse-diff')
+// Connectors
+const cwd = require('./cwd')
+
+async function getNewFiles (context) {
+  const { stdout } = await execa('git', [
+    'ls-files',
+    '-o',
+    '--exclude-standard',
+    '--full-name'
+  ], {
+    cwd: cwd.get()
+  })
+  if (stdout.trim()) {
+    return stdout.split(/\r?\n/g)
+  }
+  return []
+}
+
+async function getDiffs (context) {
+  const newFiles = await getNewFiles(context)
+  await execa('git', ['add', '-N', '*'], {
+    cwd: cwd.get()
+  })
+  const { stdout } = await execa('git', ['diff'], {
+    cwd: cwd.get()
+  })
+  await reset(context)
+  const list = parseDiff(stdout).map(
+    fileDiff => ({
+      id: fileDiff.index.join(' '),
+      ...fileDiff,
+      new: newFiles.includes(fileDiff.to)
+    })
+  )
+
+  return list
+}
+
+async function commit (message, context) {
+  await execa('git', ['add', '*'], {
+    cwd: cwd.get()
+  })
+  await execa('git', ['commit', '-m', message.replace(/"/, '\\"')], {
+    cwd: cwd.get()
+  })
+  return true
+}
+
+async function reset (context) {
+  await execa('git', ['reset'], {
+    cwd: cwd.get()
+  })
+  return true
+}
+
+async function getRoot (context) {
+  const { stdout } = await execa('git', [
+    'rev-parse',
+    '--show-toplevel'
+  ], {
+    cwd: cwd.get()
+  })
+  return stdout
+}
+
+async function resolveFile (file, context) {
+  const root = await getRoot(context)
+  return path.resolve(root, file)
+}
+
+module.exports = {
+  getDiffs,
+  commit,
+  reset,
+  getRoot,
+  resolveFile
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/connectors/locales.js b/packages/@vue/cli-ui/src/graphql-api/connectors/locales.js
new file mode 100644
index 0000000000..6a30559789
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/connectors/locales.js
@@ -0,0 +1,69 @@
+const path = require('path')
+const fs = require('fs-extra')
+const globby = require('globby')
+const deepmerge = require('deepmerge')
+// Subs
+const channels = require('../channels')
+// Context
+const getContext = require('../context')
+// Utils
+const { log } = require('../utils/logger')
+
+let locales
+const watchedTrees = new Map()
+
+function list (context) {
+  return locales
+}
+
+function add (locale, context) {
+  const existing = locales.find(l => l.lang === locale.lang)
+  if (existing) {
+    existing.strings = deepmerge(existing.strings, locale.strings)
+  } else {
+    locales.push(locale)
+  }
+  context.pubsub.publish(channels.LOCALE_ADDED, {
+    localeAdded: locale
+  })
+}
+
+function reset (context) {
+  locales = []
+  // Load builtin locales
+  const folder = path.resolve(__dirname, '../../../')
+  loadFolder(folder, context)
+}
+
+function _loadFolder (root, context) {
+  const paths = globby.sync([path.join(root, './locales/*.json')])
+  paths.forEach(file => {
+    const basename = path.basename(file)
+    const lang = basename.substr(0, basename.indexOf('.'))
+    const strings = fs.readJsonSync(file)
+    add({ lang, strings }, context)
+  })
+}
+
+function loadFolder (root, context) {
+  const folder = path.join(root, './locales')
+  if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test' && !watchedTrees.get(root) && fs.existsSync(folder)) {
+    watchedTrees.set(root, true)
+    const watch = require('watch')
+    watch.watchTree(folder, () => {
+      _loadFolder(root, context)
+      log('Locales reloaded', root)
+    })
+  } else {
+    _loadFolder(root, context)
+  }
+}
+
+reset(getContext())
+
+module.exports = {
+  list,
+  add,
+  reset,
+  loadFolder
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/connectors/logs.js b/packages/@vue/cli-ui/src/graphql-api/connectors/logs.js
new file mode 100644
index 0000000000..5e51977a85
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/connectors/logs.js
@@ -0,0 +1,53 @@
+const shortId = require('shortid')
+const { events } = require('@vue/cli-shared-utils/lib/logger')
+const { generateTitle } = require('@vue/cli/lib/util/clearConsole')
+// Subs
+const channels = require('../channels')
+// Context
+const getContext = require('../context')
+
+let logs = []
+
+exports.add = function (log, context) {
+  const item = {
+    id: shortId.generate(),
+    date: new Date().toISOString(),
+    tag: null,
+    ...log
+  }
+  logs.push(item)
+  context.pubsub.publish(channels.CONSOLE_LOG_ADDED, {
+    consoleLogAdded: item
+  })
+  return item
+}
+
+exports.list = function (context) {
+  return logs
+}
+
+exports.last = function (context) {
+  if (logs.length) {
+    return logs[logs.length - 1]
+  }
+  return null
+}
+
+exports.clear = function (context) {
+  logs = []
+  return logs
+}
+
+// Init
+{
+  const context = getContext(null)
+  events.on('log', log => {
+    exports.add(log, context)
+  })
+
+  exports.add({
+    type: 'info',
+    tag: null,
+    message: generateTitle(true)
+  }, context)
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/connectors/plugins.js b/packages/@vue/cli-ui/src/graphql-api/connectors/plugins.js
new file mode 100644
index 0000000000..05c5f99c4f
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/connectors/plugins.js
@@ -0,0 +1,433 @@
+const path = require('path')
+const fs = require('fs')
+const LRU = require('lru-cache')
+const semver = require('semver')
+const {
+  isPlugin,
+  isOfficialPlugin,
+  getPluginLink
+} = require('@vue/cli-shared-utils')
+const getPackageVersion = require('@vue/cli/lib/util/getPackageVersion')
+const { resolveModule, loadModule } = require('@vue/cli/lib/util/module')
+const {
+  progress: installProgress,
+  installPackage,
+  uninstallPackage,
+  updatePackage
+} = require('@vue/cli/lib/util/installDeps')
+const invoke = require('@vue/cli/lib/invoke')
+const notifier = require('node-notifier')
+// Subs
+const channels = require('../channels')
+// Connectors
+const cwd = require('./cwd')
+const folders = require('./folders')
+const prompts = require('./prompts')
+const progress = require('./progress')
+const logs = require('./logs')
+const clientAddons = require('./client-addons')
+const views = require('./views')
+const locales = require('./locales')
+const sharedData = require('./shared-data')
+// Api
+const PluginApi = require('../api/PluginApi')
+// Utils
+const { getCommand } = require('../utils/command')
+const { resolveModuleRoot } = require('../utils/resolve-path')
+const ipc = require('../utils/ipc')
+const { log } = require('../utils/logger')
+
+const PROGRESS_ID = 'plugin-installation'
+
+// Caches
+const metadataCache = new LRU({
+  max: 200,
+  maxAge: 1000 * 60 * 30
+})
+const logoCache = new LRU({
+  max: 50
+})
+
+// Local
+let currentPluginId
+let eventsInstalled = false
+let plugins = []
+let pluginApi
+let installationStep
+let projectId
+
+function getPath (id) {
+  return resolveModuleRoot(resolveModule(id, cwd.get()), id)
+}
+
+function findPlugins (deps) {
+  return Object.keys(deps).filter(
+    key => isPlugin(key)
+  ).map(
+    id => ({
+      id,
+      versionRange: deps[id],
+      official: isOfficialPlugin(id),
+      installed: fs.existsSync(getPath(id)),
+      website: getPluginLink(id)
+    })
+  )
+}
+
+function list (file, context) {
+  const pkg = folders.readPackage(file, context)
+  plugins = []
+  plugins = plugins.concat(findPlugins(pkg.dependencies || {}))
+  plugins = plugins.concat(findPlugins(pkg.devDependencies || {}))
+  resetPluginApi(context)
+  return plugins
+}
+
+function resetPluginApi (context) {
+  // Clean up
+  if (pluginApi) {
+    pluginApi.views.forEach(r => views.remove(r.id, context))
+    pluginApi.ipcHandlers.forEach(fn => ipc.off(fn))
+  }
+  sharedData.unWatchAll()
+
+  pluginApi = new PluginApi(context)
+  // Run Plugin API
+  runPluginApi('@vue/cli-service', context)
+  plugins.forEach(plugin => runPluginApi(plugin.id, context))
+  runPluginApi(cwd.get(), context, 'vue-cli-ui')
+  // Add client addons
+  pluginApi.clientAddons.forEach(options => clientAddons.add(options, context))
+  // Add views
+  pluginApi.views.forEach(view => views.add(view, context))
+
+  setTimeout(() => {
+    const projects = require('./projects')
+    const project = projects.getCurrent(context)
+    if (!project) return
+    if (projectId !== project.id) {
+      projectId = project.id
+      log('Hook onProjectOpen', pluginApi.projectOpenHooks.length, 'handlers')
+      pluginApi.projectOpenHooks.forEach(fn => fn(project, projects.getLast(context)))
+      pluginApi.project = project
+    } else {
+      log('Hook onPluginReload', pluginApi.pluginReloadHooks.length, 'handlers')
+      pluginApi.pluginReloadHooks.forEach(fn => fn(project))
+    }
+  })
+}
+
+function runPluginApi (id, context, fileName = 'ui') {
+  let module
+  try {
+    module = loadModule(`${id}/${fileName}`, cwd.get(), true)
+  } catch (e) {}
+  if (module) {
+    pluginApi.pluginId = id
+    module(pluginApi)
+    log('Plugin API loaded for', id)
+    pluginApi.pluginId = null
+  }
+
+  // Locales
+  try {
+    const folder = fs.existsSync(id) ? id : getPath(id)
+    locales.loadFolder(folder, context)
+  } catch (e) {}
+}
+
+function findOne (id, context) {
+  return plugins.find(
+    p => p.id === id
+  )
+}
+
+function readPackage (id, context) {
+  return folders.readPackage(getPath(id), context)
+}
+
+async function getMetadata (id, context) {
+  let metadata = metadataCache.get(id)
+  if (metadata) {
+    return metadata
+  }
+
+  const res = await getPackageVersion(id)
+  if (res.statusCode === 200) {
+    metadata = res.body
+  }
+
+  if (metadata) {
+    metadataCache.set(id, metadata)
+    return metadata
+  }
+}
+
+async function getVersion ({ id, installed, versionRange }, context) {
+  let current
+  if (installed) {
+    const pkg = readPackage(id, context)
+    current = pkg.version
+  } else {
+    current = null
+  }
+  let latest, wanted
+  const metadata = await getMetadata(id, context)
+  if (metadata) {
+    latest = metadata['dist-tags'].latest
+
+    const versions = Object.keys(metadata.versions)
+    wanted = semver.maxSatisfying(versions, versionRange)
+  }
+
+  if (!latest) latest = current
+  if (!wanted) wanted = current
+
+  return {
+    current,
+    latest,
+    wanted,
+    range: versionRange
+  }
+}
+
+async function getDescription ({ id }, context) {
+  const metadata = await getMetadata(id, context)
+  if (metadata) {
+    return metadata.description
+  }
+  return null
+}
+
+async function getLogo ({ id }, context) {
+  const cached = logoCache.get(id)
+  if (cached) {
+    return `data:image/png;base64,${cached}`
+  }
+  const folder = getPath(id)
+  const file = path.join(folder, 'logo.png')
+  if (fs.existsSync(file)) {
+    const data = fs.readFileSync(file, { encoding: 'base64' })
+    logoCache.set(id, data)
+    return `data:image/png;base64,${data}`
+  }
+  return null
+}
+
+function getInstallation (context) {
+  if (!eventsInstalled) {
+    eventsInstalled = true
+
+    // Package installation progress events
+    installProgress.on('progress', value => {
+      if (progress.get(PROGRESS_ID)) {
+        progress.set({ id: PROGRESS_ID, progress: value }, context)
+      }
+    })
+    installProgress.on('log', message => {
+      if (progress.get(PROGRESS_ID)) {
+        progress.set({ id: PROGRESS_ID, info: message }, context)
+      }
+    })
+  }
+
+  return {
+    id: 'plugin-install',
+    pluginId: currentPluginId,
+    step: installationStep,
+    prompts: prompts.list()
+  }
+}
+
+function install (id, context) {
+  return progress.wrap(PROGRESS_ID, context, async setProgress => {
+    setProgress({
+      status: 'plugin-install',
+      args: [id]
+    })
+    currentPluginId = id
+    installationStep = 'install'
+    if (process.env.VUE_CLI_DEBUG && isOfficialPlugin(id)) {
+      mockInstall(id, context)
+    } else {
+      await installPackage(cwd.get(), getCommand(), null, id)
+    }
+    await initPrompts(id, context)
+    installationStep = 'config'
+
+    notifier.notify({
+      title: `Plugin installed`,
+      message: `Plugin ${id} installed, next step is configuration`,
+      icon: path.resolve(__dirname, '../../assets/done.png')
+    })
+
+    return getInstallation(context)
+  })
+}
+
+function mockInstall (id, context) {
+  const pkg = folders.readPackage(cwd.get(), context, true)
+  pkg.devDependencies[id] = '*'
+  folders.writePackage({ file: cwd.get(), data: pkg }, context)
+  return true
+}
+
+function uninstall (id, context) {
+  return progress.wrap(PROGRESS_ID, context, async setProgress => {
+    setProgress({
+      status: 'plugin-uninstall',
+      args: [id]
+    })
+    installationStep = 'uninstall'
+    currentPluginId = id
+    if (process.env.VUE_CLI_DEBUG && isOfficialPlugin(id)) {
+      mockUninstall(id, context)
+    } else {
+      await uninstallPackage(cwd.get(), getCommand(), null, id)
+    }
+    currentPluginId = null
+    installationStep = null
+
+    notifier.notify({
+      title: `Plugin uninstalled`,
+      message: `Plugin ${id} uninstalled`,
+      icon: path.resolve(__dirname, '../../assets/done.png')
+    })
+
+    return getInstallation(context)
+  })
+}
+
+function mockUninstall (id, context) {
+  const pkg = folders.readPackage(cwd.get(), context, true)
+  delete pkg.devDependencies[id]
+  folders.writePackage({ file: cwd.get(), data: pkg }, context)
+  return true
+}
+
+function runInvoke (id, context) {
+  return progress.wrap(PROGRESS_ID, context, async setProgress => {
+    setProgress({
+      status: 'plugin-invoke',
+      args: [id]
+    })
+    currentPluginId = id
+    // Allow plugins that don't have a generator
+    if (resolveModule(`${id}/generator`, cwd.get())) {
+      await invoke(id, prompts.getAnswers(), cwd.get())
+    }
+    // Run plugin api
+    runPluginApi(id, context)
+    installationStep = 'diff'
+
+    notifier.notify({
+      title: `Plugin invoke sucess`,
+      message: `Plugin ${id} invoked successfully`,
+      icon: path.resolve(__dirname, '../../assets/done.png')
+    })
+
+    return getInstallation(context)
+  })
+}
+
+function finishInstall (context) {
+  installationStep = null
+  currentPluginId = null
+  return getInstallation(context)
+}
+
+async function initPrompts (id, context) {
+  await prompts.reset()
+  try {
+    let data = require(path.join(getPath(id), 'prompts.js'))
+    if (typeof data === 'function') {
+      data = await data()
+    }
+    data.forEach(prompts.add)
+  } catch (e) {
+    console.warn(`No prompts found for ${id}`)
+  }
+  await prompts.start()
+}
+
+function update (id, context) {
+  return progress.wrap('plugin-update', context, async setProgress => {
+    setProgress({
+      status: 'plugin-update',
+      args: [id]
+    })
+    currentPluginId = id
+    const plugin = findOne(id, context)
+    const { current, wanted } = await getVersion(plugin, context)
+    await updatePackage(cwd.get(), getCommand(), null, id)
+    resetPluginApi(context)
+    logs.add({
+      message: `Plugin ${id} updated from ${current} to ${wanted}`,
+      type: 'info'
+    }, context)
+    currentPluginId = null
+    return findOne(id)
+  })
+}
+
+function getApi () {
+  return pluginApi
+}
+
+async function callAction ({ id, params }, context) {
+  context.pubsub.publish(channels.PLUGIN_ACTION_CALLED, {
+    pluginActionCalled: { id, params }
+  })
+  log('PluginAction called', id, params)
+  const results = []
+  const errors = []
+  const list = pluginApi.actions.get(id)
+  if (list) {
+    for (const cb of list) {
+      let result = null
+      let error = null
+      try {
+        result = await cb(params)
+      } catch (e) {
+        error = e
+      }
+      results.push(result)
+      errors.push(error)
+    }
+  }
+  context.pubsub.publish(channels.PLUGIN_ACTION_RESOLVED, {
+    pluginActionResolved: { id, params, results, errors }
+  })
+  log('PluginAction resolved', id, params, 'results:', results, 'errors:', errors)
+  return { id, params, results, errors }
+}
+
+function serve (req, res) {
+  const { id, 0: file } = req.params
+  const basePath = id === '.' ? cwd.get() : getPath(id)
+  if (basePath) {
+    res.sendFile(path.join(basePath, 'ui-public', file))
+    return
+  }
+
+  res.status(404)
+  res.send(`Addon ${id} not found in loaded addons. Try opening a vue-cli project first?`)
+}
+
+module.exports = {
+  list,
+  findOne,
+  getVersion,
+  getDescription,
+  getLogo,
+  getInstallation,
+  install,
+  uninstall,
+  update,
+  runInvoke,
+  resetPluginApi,
+  getApi,
+  finishInstall,
+  callAction,
+  serve
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/connectors/progress.js b/packages/@vue/cli-ui/src/graphql-api/connectors/progress.js
new file mode 100644
index 0000000000..b764f7d1ab
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/connectors/progress.js
@@ -0,0 +1,57 @@
+// Subs
+const channels = require('../channels')
+
+let map = new Map()
+
+function get (id, context) {
+  return map.get(id)
+}
+
+function set (data, context) {
+  const { id } = data
+  let progress = get(id, context)
+  if (!progress) {
+    progress = data
+    map.set(id, Object.assign({}, {
+      status: null,
+      error: null,
+      info: null,
+      args: null,
+      progress: -1
+    }, progress))
+  } else {
+    Object.assign(progress, data)
+  }
+  context.pubsub.publish(channels.PROGRESS_CHANGED, { progressChanged: progress })
+  return progress
+}
+
+function remove (id, context) {
+  context.pubsub.publish(channels.PROGRESS_REMOVED, { progressRemoved: { id } })
+  return map.delete(id)
+}
+
+async function wrap (id, context, operation) {
+  set({ id }, context)
+
+  let result
+  try {
+    result = await operation(data => {
+      set(Object.assign({ id }, data), context)
+    })
+  } catch (error) {
+    console.error(error)
+    set({ id, error: error.message }, context)
+  }
+
+  remove(id, context)
+
+  return result
+}
+
+module.exports = {
+  get,
+  set,
+  remove,
+  wrap
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/connectors/projects.js b/packages/@vue/cli-ui/src/graphql-api/connectors/projects.js
new file mode 100644
index 0000000000..e1444b8d7d
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/connectors/projects.js
@@ -0,0 +1,417 @@
+const path = require('path')
+const fs = require('fs')
+const shortId = require('shortid')
+const Creator = require('@vue/cli/lib/Creator')
+const { getPromptModules } = require('@vue/cli/lib/util/createTools')
+const { getFeatures } = require('@vue/cli/lib/util/features')
+const { defaults } = require('@vue/cli/lib/options')
+const { toShortPluginId } = require('@vue/cli-shared-utils')
+const { progress: installProgress } = require('@vue/cli/lib/util/installDeps')
+const notifier = require('node-notifier')
+// Connectors
+const progress = require('./progress')
+const cwd = require('./cwd')
+const prompts = require('./prompts')
+const folders = require('./folders')
+const plugins = require('./plugins')
+const locales = require('./locales')
+// Context
+const getContext = require('../context')
+// Utils
+const { log } = require('../utils/logger')
+
+const PROGRESS_ID = 'project-create'
+
+let lastProject = null
+let currentProject = null
+let creator = null
+let presets = []
+let features = []
+let onCreationEvent = null
+let onInstallProgress = null
+let onInstallLog = null
+
+function list (context) {
+  let projects = context.db.get('projects').value()
+  projects = autoClean(projects, context)
+  return projects
+}
+
+function autoClean (projects, context) {
+  let result = []
+  for (const project of projects) {
+    if (fs.existsSync(project.path)) {
+      result.push(project)
+    }
+  }
+  if (result.length !== projects.length) {
+    console.log(`Auto cleaned ${projects.length - result.length} projects (folder not found).`)
+    context.db.set('projects', result).write()
+  }
+  return result
+}
+
+function getCurrent (context) {
+  return currentProject
+}
+
+function getLast (context) {
+  return lastProject
+}
+
+function generatePresetDescription (preset) {
+  let description = preset.features.join(', ')
+  if (preset.raw.useConfigFiles) {
+    description += ` (Use config files)`
+  }
+  return description
+}
+
+function generateProjectCreation (creator) {
+  return {
+    presets,
+    features,
+    prompts: prompts.list()
+  }
+}
+
+async function initCreator (context) {
+  const creator = new Creator('', cwd.get(), getPromptModules())
+
+  /* Event listeners */
+  // Creator emits creation events (the project creation steps)
+  onCreationEvent = ({ event }) => {
+    progress.set({ id: PROGRESS_ID, status: event, info: null }, context)
+  }
+  creator.on('creation', onCreationEvent)
+  // Progress bar
+  onInstallProgress = value => {
+    if (progress.get(PROGRESS_ID)) {
+      progress.set({ id: PROGRESS_ID, progress: value }, context)
+    }
+  }
+  installProgress.on('progress', onInstallProgress)
+  // Package manager steps
+  onInstallLog = message => {
+    if (progress.get(PROGRESS_ID)) {
+      progress.set({ id: PROGRESS_ID, info: message }, context)
+    }
+  }
+  installProgress.on('log', onInstallLog)
+
+  // Presets
+  const manualPreset = {
+    id: '__manual__',
+    name: 'views.project-create.tabs.presets.manual.name',
+    description: 'views.project-create.tabs.presets.manual.description',
+    link: null,
+    features: []
+  }
+  const presetsData = creator.getPresets()
+  presets = [
+    ...Object.keys(presetsData).map(
+      key => {
+        const preset = presetsData[key]
+        const features = getFeatures(preset).map(
+          f => toShortPluginId(f)
+        )
+        const info = {
+          id: key,
+          name: key === 'default' ? 'views.project-create.tabs.presets.default-preset' : key,
+          features,
+          link: null,
+          raw: preset
+        }
+        info.description = generatePresetDescription(info)
+        return info
+      }
+    ),
+    manualPreset
+  ]
+
+  // Features
+  const featuresData = creator.featurePrompt.choices
+  features = [
+    ...featuresData.map(
+      data => ({
+        id: data.value,
+        name: data.name,
+        description: data.description || null,
+        link: data.link || null,
+        plugins: data.plugins || null,
+        enabled: !!data.checked
+      })
+    ),
+    {
+      id: 'use-config-files',
+      name: 'views.project-create.tabs.features.userConfigFiles.name',
+      description: 'views.project-create.tabs.features.userConfigFiles.description',
+      link: null,
+      plugins: null,
+      enabled: false
+    }
+  ]
+
+  manualPreset.features = features.filter(
+    f => f.enabled
+  ).map(
+    f => f.id
+  )
+
+  // Prompts
+  await prompts.reset()
+  creator.injectedPrompts.forEach(prompts.add)
+  await updatePromptsFeatures()
+  await prompts.start()
+
+  return creator
+}
+
+function removeCreator (context) {
+  if (creator) {
+    creator.removeListener('creation', onCreationEvent)
+    installProgress.removeListener('progress', onInstallProgress)
+    installProgress.removeListener('log', onInstallLog)
+    creator = null
+  }
+}
+
+async function getCreation (context) {
+  if (!creator) {
+    creator = await initCreator(context)
+  }
+  return generateProjectCreation(creator)
+}
+
+async function updatePromptsFeatures () {
+  await prompts.changeAnswers(answers => {
+    answers.features = features.filter(
+      f => f.enabled
+    ).map(
+      f => f.id
+    )
+  })
+}
+
+async function setFeatureEnabled ({ id, enabled, updatePrompts = true }, context) {
+  const feature = features.find(f => f.id === id)
+  if (feature) {
+    feature.enabled = enabled
+  } else {
+    console.warn(`Feature '${id}' not found`)
+  }
+  if (updatePrompts) await updatePromptsFeatures()
+  return feature
+}
+
+async function applyPreset (id, context) {
+  const preset = presets.find(p => p.id === id)
+  if (preset) {
+    for (const feature of features) {
+      feature.enabled = !!(
+        preset.features.includes(feature.id) ||
+        (feature.plugins && preset.features.some(f => feature.plugins.includes(f)))
+      )
+    }
+    if (preset.raw) {
+      if (preset.raw.router) {
+        await setFeatureEnabled({ id: 'router', enabled: true, updatePrompts: false }, context)
+      }
+      if (preset.raw.vuex) {
+        await setFeatureEnabled({ id: 'vuex', enabled: true, updatePrompts: false }, context)
+      }
+      if (preset.raw.cssPreprocessor) {
+        await setFeatureEnabled({ id: 'css-preprocessor', enabled: true, updatePrompts: false }, context)
+      }
+      if (preset.raw.useConfigFiles) {
+        await setFeatureEnabled({ id: 'use-config-files', enabled: true, updatePrompts: false }, context)
+      }
+    }
+    await updatePromptsFeatures()
+  } else {
+    console.warn(`Preset '${id}' not found`)
+  }
+
+  return generateProjectCreation(creator)
+}
+
+async function create (input, context) {
+  return progress.wrap(PROGRESS_ID, context, async setProgress => {
+    setProgress({
+      status: 'creating'
+    })
+
+    const targetDir = path.join(cwd.get(), input.folder)
+    creator.context = targetDir
+
+    const inCurrent = input.folder === '.'
+    const name = inCurrent ? path.relative('../', process.cwd()) : input.folder
+    creator.name = name
+
+    // Delete existing folder
+    if (fs.existsSync(targetDir)) {
+      if (input.force) {
+        setProgress({
+          info: 'Cleaning folder...'
+        })
+        await folders.delete(targetDir)
+        setProgress({
+          info: null
+        })
+      } else {
+        throw new Error(`Folder ${targetDir} already exists`)
+      }
+    }
+
+    // Answers
+    const answers = prompts.getAnswers()
+    await prompts.reset()
+    let index
+
+    // Package Manager
+    answers.packageManager = input.packageManager
+
+    // Config files
+    if ((index = answers.features.includes('use-config-files')) !== -1) {
+      answers.features.splice(index, 1)
+      answers.useConfigFiles = 'files'
+    }
+
+    // Preset
+    answers.preset = input.preset
+    if (input.save) {
+      answers.save = true
+      answers.saveName = input.save
+    }
+
+    setProgress({
+      info: 'Resolving preset...'
+    })
+    let preset
+    if (input.remote) {
+      // vue create foo --preset bar
+      preset = await creator.resolvePreset(input.preset, input.clone)
+    } else if (input.preset === 'default') {
+      // vue create foo --default
+      preset = defaults.presets.default
+    } else {
+      preset = await creator.promptAndResolvePreset(answers)
+    }
+    setProgress({
+      info: null
+    })
+
+    // Create
+    await creator.create({}, preset)
+    removeCreator()
+
+    notifier.notify({
+      title: `Project created`,
+      message: `Project ${cwd.get()} created`,
+      icon: path.resolve(__dirname, '../../assets/done.png')
+    })
+
+    return importProject({
+      path: targetDir
+    }, context)
+  })
+}
+
+async function importProject (input, context) {
+  const project = {
+    id: shortId.generate(),
+    path: input.path,
+    favorite: 0
+  }
+  const packageData = folders.readPackage(project.path, context)
+  project.name = packageData.name
+  context.db.get('projects').push(project).write()
+  return open(project.id, context)
+}
+
+async function open (id, context) {
+  const project = context.db.get('projects').find({
+    id
+  }).value()
+
+  if (!project) {
+    log('Project not found', id)
+    return null
+  }
+
+  if (!fs.existsSync(project.path)) {
+    log('Project folder not found', id, project.path)
+    return null
+  }
+
+  lastProject = currentProject
+  currentProject = project
+  cwd.set(project.path, context)
+  // Reset locales
+  locales.reset(context)
+  // Load plugins
+  plugins.list(project.path, context)
+
+  // Save for next time
+  context.db.set('config.lastOpenProject', id).write()
+
+  log('Project open', id, project.path)
+
+  return project
+}
+
+async function remove (id, context) {
+  if (currentProject && currentProject.id === id) {
+    currentProject = null
+  }
+  context.db.get('projects').remove({ id }).write()
+  if (context.db.get('config.lastOpenProject').value() === id) {
+    context.db.set('config.lastOpenProject', undefined).write()
+  }
+  return true
+}
+
+function resetCwd (context) {
+  if (currentProject) {
+    cwd.set(currentProject.path, context)
+  }
+}
+
+function findOne (id, context) {
+  return context.db.get('projects').find({ id }).value()
+}
+
+function setFavorite ({ id, favorite }, context) {
+  context.db.get('projects').find({ id }).assign({ favorite }).write()
+  return findOne(id, context)
+}
+
+// Open last project
+async function autoOpenLastProject () {
+  const context = getContext(null)
+  const id = context.db.get('config.lastOpenProject').value()
+  if (id) {
+    try {
+      await open(id, context)
+    } catch (e) {
+      log(`Project can't be auto-opened`, id)
+    }
+  }
+}
+
+autoOpenLastProject()
+
+module.exports = {
+  list,
+  getCurrent,
+  getLast,
+  getCreation,
+  applyPreset,
+  setFeatureEnabled,
+  create,
+  import: importProject,
+  open,
+  remove,
+  resetCwd,
+  setFavorite
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/connectors/prompts.js b/packages/@vue/cli-ui/src/graphql-api/connectors/prompts.js
new file mode 100644
index 0000000000..96fc96fb5c
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/connectors/prompts.js
@@ -0,0 +1,255 @@
+// Utils
+const ObjectUtil = require('../../util/object')
+const { log } = require('../utils/logger')
+
+let answers = {}
+let prompts = []
+
+function generatePromptError (value) {
+  let message
+  if (typeof value === 'string') {
+    message = value
+  } else {
+    message = 'Invalid input'
+  }
+  return {
+    message
+  }
+}
+
+async function getEnabled (value) {
+  const type = typeof value
+  if (type === 'function') {
+    const result = await value(answers)
+    return !!result
+  } else if (type === 'boolean') {
+    return value
+  } else {
+    return true
+  }
+}
+
+function validateInput (prompt, value) {
+  const validate = prompt.raw.validate
+  if (typeof validate === 'function') {
+    return validate(value, answers)
+  }
+  return true
+}
+
+function getFilteredValue (prompt, value) {
+  const filter = prompt.raw.filter
+  if (typeof filter === 'function') {
+    return filter(value)
+  }
+  return value
+}
+
+function getTransformedValue (prompt, value) {
+  const transformer = prompt.raw.transformer
+  if (typeof transformer === 'function') {
+    return transformer(value, answers)
+  }
+  return value
+}
+
+function generatePromptChoice (prompt, data, defaultValue) {
+  return {
+    value: JSON.stringify(getTransformedValue(prompt, data.value)),
+    name: data.name,
+    checked: data.checked,
+    disabled: data.disabled,
+    isDefault: data.value === defaultValue
+  }
+}
+
+async function getChoices (prompt) {
+  const data = prompt.raw.choices
+  if (!data) {
+    return null
+  }
+
+  let result
+  if (typeof data === 'function') {
+    result = await data(answers)
+  } else {
+    result = data
+  }
+  let defaultValue
+  if (prompt.type === 'list' || prompt.type === 'rawlist') {
+    defaultValue = await getDefaultValue(prompt)
+  }
+  return result.map(
+    item => generatePromptChoice(prompt, item, defaultValue)
+  )
+}
+
+function setAnswer (id, value) {
+  ObjectUtil.set(answers, id, value)
+}
+
+function removeAnswer (id) {
+  ObjectUtil.remove(answers, id)
+}
+
+function generatePrompt (data) {
+  return {
+    id: data.name,
+    type: data.type,
+    visible: true,
+    enabled: true,
+    name: data.short || null,
+    message: data.message,
+    group: data.group || null,
+    description: data.description || null,
+    link: data.link || null,
+    choices: null,
+    value: null,
+    valueChanged: false,
+    error: null,
+    raw: data
+  }
+}
+
+async function updatePrompts () {
+  for (const prompt of prompts) {
+    const oldVisible = prompt.visible
+    prompt.visible = await getEnabled(prompt.raw.when)
+
+    prompt.choices = await getChoices(prompt)
+
+    if (oldVisible !== prompt.visible && !prompt.visible) {
+      removeAnswer(prompt.id)
+      prompt.valueChanged = false
+    } else if (prompt.visible && !prompt.valueChanged) {
+      let value
+      let answer = getAnswer(prompt.id)
+      if (typeof answer !== 'undefined') {
+        value = await getTransformedValue(prompt, answer)
+      } else if (typeof prompt.raw.value !== 'undefined') {
+        value = prompt.raw.value
+      } else {
+        value = await getDefaultValue(prompt)
+      }
+      prompt.rawValue = value
+      prompt.value = JSON.stringify(value)
+      const finalValue = await getFilteredValue(prompt, value)
+      setAnswer(prompt.id, finalValue)
+    }
+  }
+
+  log('Prompt answers', answers)
+}
+
+// Public API
+
+async function setAnswers (newAnswers) {
+  answers = newAnswers
+  await updatePrompts()
+}
+
+async function changeAnswers (cb) {
+  cb(answers)
+  await updatePrompts()
+}
+
+function getAnswers () {
+  return answers
+}
+
+function getAnswer (id) {
+  return ObjectUtil.get(answers, id)
+}
+
+async function reset () {
+  prompts = []
+  await setAnswers({})
+}
+
+function list () {
+  return prompts
+}
+
+function add (data) {
+  prompts.push(generatePrompt(data))
+}
+
+async function start () {
+  await updatePrompts()
+}
+
+function remove (id) {
+  const index = prompts.findIndex(p => p.id === id)
+  index !== -1 && prompts.splice(index, 1)
+}
+
+async function setValue ({ id, value }) {
+  const prompt = findOne(id)
+  if (!prompt) {
+    console.warn(`Prompt '${prompt}' not found`)
+    return null
+  }
+
+  const validation = await validateInput(prompt, value)
+  if (validation !== true) {
+    prompt.error = generatePromptError(validation)
+  } else {
+    prompt.error = null
+  }
+  prompt.rawValue = value
+  const finalValue = await getFilteredValue(prompt, value)
+  prompt.value = JSON.stringify(value)
+  prompt.valueChanged = true
+  setAnswer(prompt.id, finalValue)
+  await updatePrompts()
+  return prompt
+}
+
+function findOne (id) {
+  return prompts.find(
+    p => p.id === id
+  )
+}
+
+async function getDefaultValue (prompt) {
+  let defaultValue = prompt.raw.default
+  if (typeof defaultValue === 'function') {
+    defaultValue = await defaultValue(answers)
+  }
+
+  if (prompt.type === 'checkbox') {
+    const choices = await getChoices(prompt)
+    if (choices) {
+      return choices.filter(
+        c => c.checked
+      ).map(
+        c => c.value
+      )
+    }
+  } else if (prompt.type === 'confirm') {
+    if (prompt.raw.checked) return true
+    return defaultValue || false
+  }
+  return defaultValue
+}
+
+async function answerPrompt ({ id, value }, context) {
+  await setValue({ id, value: JSON.parse(value) })
+  return list()
+}
+
+module.exports = {
+  setAnswers,
+  changeAnswers,
+  getAnswers,
+  getAnswer,
+  reset,
+  list,
+  add,
+  remove,
+  start,
+  setValue,
+  findOne,
+  getDefaultValue,
+  answerPrompt
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/connectors/shared-data.js b/packages/@vue/cli-ui/src/graphql-api/connectors/shared-data.js
new file mode 100644
index 0000000000..fdd2aa426a
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/connectors/shared-data.js
@@ -0,0 +1,75 @@
+// Subscriptions channels
+const channels = require('../channels')
+// Utils
+const { log } = require('../utils/logger')
+
+const sharedData = new Map()
+let watchers = new Map()
+
+function get (id, context) {
+  const value = sharedData.get(id)
+
+  if (typeof value === 'undefined') return null
+
+  return {
+    id,
+    value
+  }
+}
+
+function set ({ id, value }, context) {
+  sharedData.set(id, value)
+  context.pubsub.publish(channels.SHARED_DATA_UPDATED, {
+    sharedDataUpdated: { id, value }
+  })
+  const watchers = notify(id, value)
+  log('SharedData set', id, value, `(${watchers.length} watchers)`)
+  return { id, value }
+}
+
+function remove (id, context) {
+  sharedData.delete(id)
+  context.pubsub.publish(channels.SHARED_DATA_UPDATED, {
+    sharedDataUpdated: { id, value: undefined }
+  })
+  notify(id, undefined)
+  log('SharedData remove', id)
+}
+
+function watch (id, handler) {
+  let handlers = watchers.get(id)
+  if (!handlers) {
+    handlers = []
+    watchers.set(id, handlers)
+  }
+  handlers.push(handler)
+}
+
+function unwatch (id, handler) {
+  const handlers = watchers.get(id)
+  if (handlers) {
+    const index = handlers.indexOf(handler)
+    if (index !== -1) handlers.splice(index, 1)
+  }
+}
+
+function unWatchAll () {
+  watchers = new Map()
+}
+
+function notify (id, value) {
+  const handlers = watchers.get(id)
+  if (handlers) {
+    handlers.forEach(fn => fn(value, id))
+  }
+  return handlers || []
+}
+
+module.exports = {
+  get,
+  set,
+  remove,
+  watch,
+  unwatch,
+  unWatchAll
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/connectors/tasks.js b/packages/@vue/cli-ui/src/graphql-api/connectors/tasks.js
new file mode 100644
index 0000000000..5dcd69b098
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/connectors/tasks.js
@@ -0,0 +1,406 @@
+const path = require('path')
+const execa = require('execa')
+const terminate = require('terminate')
+const notifier = require('node-notifier')
+// Subs
+const channels = require('../channels')
+// Connectors
+const cwd = require('./cwd')
+const folders = require('./folders')
+const logs = require('./logs')
+const plugins = require('./plugins')
+const prompts = require('./prompts')
+const views = require('./views')
+// Utils
+const { getCommand } = require('../utils/command')
+const { log } = require('../utils/logger')
+
+const MAX_LOGS = 2000
+const VIEW_ID = 'vue-project-tasks'
+
+const tasks = new Map()
+
+function getTasks () {
+  const file = cwd.get()
+  let list = tasks.get(file)
+  if (!list) {
+    list = []
+    tasks.set(file, list)
+  }
+  return list
+}
+
+function list (context) {
+  let list = getTasks()
+  const file = cwd.get()
+  const pkg = folders.readPackage(file, context)
+  if (pkg.scripts) {
+    const existing = new Map()
+
+    // Get current valid tasks in project `package.json`
+    const currentTasks = Object.keys(pkg.scripts).map(
+      name => {
+        const id = `${file}:${name}`
+        existing.set(id, true)
+        const command = pkg.scripts[name]
+        const moreData = plugins.getApi().getDescribedTask(command)
+        return {
+          id,
+          name,
+          command,
+          index: list.findIndex(t => t.id === id),
+          prompts: [],
+          views: [],
+          ...moreData
+        }
+      }
+    ).concat(plugins.getApi().addedTasks.map(
+      task => {
+        const id = `${file}:${task.name}`
+        existing.set(id, true)
+        return {
+          id,
+          index: list.findIndex(t => t.id === id),
+          prompts: [],
+          views: [],
+          fullCommand: true,
+          ...task
+        }
+      }
+    ))
+
+    // Process existing tasks
+    const existingTasks = currentTasks.filter(
+      task => task.index !== -1
+    )
+    // Update tasks data
+    existingTasks.forEach(task => {
+      Object.assign(list[task.index], task)
+    })
+
+    // Process removed tasks
+    const removedTasks = list.filter(
+      t => currentTasks.findIndex(c => c.id === t.id) === -1
+    )
+    // Remove badges
+    removedTasks.forEach(task => {
+      updateViewBadges({ task }, context)
+    })
+
+    // Process new tasks
+    const newTasks = currentTasks.filter(
+      task => task.index === -1
+    ).map(
+      task => ({
+        ...task,
+        status: 'idle',
+        child: null,
+        logs: []
+      })
+    )
+
+    // Keep existing or ran tasks
+    list = list.filter(
+      task => existing.get(task.id) ||
+      task.status !== 'idle'
+    )
+
+    // Add the new tasks
+    list = list.concat(newTasks)
+
+    tasks.set(file, list)
+  }
+  return list
+}
+
+function findOne (id, context) {
+  return getTasks().find(
+    t => t.id === id
+  )
+}
+
+function getSavedData (id, context) {
+  return context.db.get('tasks').find({
+    id
+  }).value()
+}
+
+function updateSavedData (data, context) {
+  if (getSavedData(data.id, context)) {
+    context.db.get('tasks').find({ id: data.id }).assign(data).write()
+  } else {
+    context.db.get('tasks').push(data).write()
+  }
+}
+
+async function getPrompts (id, context) {
+  const task = findOne(id, context)
+  if (task) {
+    await prompts.reset()
+    task.prompts.forEach(prompts.add)
+    const data = getSavedData(id, context)
+    if (data) {
+      await prompts.setAnswers(data.answers)
+    }
+    await prompts.start()
+    return prompts.list()
+  }
+}
+
+function updateOne (data, context) {
+  const task = findOne(data.id)
+  if (task) {
+    if (task.status !== data.status) {
+      updateViewBadges({
+        task,
+        data
+      }, context)
+    }
+
+    Object.assign(task, data)
+    context.pubsub.publish(channels.TASK_CHANGED, {
+      taskChanged: task
+    })
+  }
+  return task
+}
+
+function updateViewBadges ({ task, data }, context) {
+  const viewId = VIEW_ID
+
+  // New badges
+  if (data) {
+    if (data.status === 'error') {
+      views.addBadge({
+        viewId,
+        badge: {
+          id: 'vue-task-error',
+          type: 'error',
+          label: 'components.view-badge.labels.tasks.error',
+          priority: 3
+        }
+      }, context)
+    } else if (data.status === 'running') {
+      views.addBadge({
+        viewId,
+        badge: {
+          id: 'vue-task-running',
+          type: 'info',
+          label: 'components.view-badge.labels.tasks.running',
+          priority: 2
+        }
+      }, context)
+    } else if (data.status === 'done') {
+      views.addBadge({
+        viewId,
+        badge: {
+          id: 'vue-task-done',
+          type: 'success',
+          label: 'components.view-badge.labels.tasks.done',
+          priority: 1,
+          hidden: true
+        }
+      }, context)
+    }
+  }
+
+  // Remove previous badges
+  if (task.status === 'error') {
+    views.removeBadge({ viewId, badgeId: 'vue-task-error' }, context)
+  } else if (task.status === 'running') {
+    views.removeBadge({ viewId, badgeId: 'vue-task-running' }, context)
+  } else if (task.status === 'done') {
+    views.removeBadge({ viewId, badgeId: 'vue-task-done' }, context)
+  }
+}
+
+async function run (id, context) {
+  const task = findOne(id, context)
+  if (task && task.status !== 'running') {
+    task._terminating = false
+
+    // Answers
+    const answers = prompts.getAnswers()
+    let args = task.fullCommand ? [] : ['run', task.name]
+    let command = task.fullCommand ? task.command : getCommand()
+
+    // Process command containing args
+    if (command.indexOf(' ')) {
+      const parts = command.split(' ')
+      command = parts.shift()
+      args = [...parts, ...args]
+    }
+
+    // Output colors
+    // See: https://www.npmjs.com/package/supports-color
+    process.env.FORCE_COLOR = 1
+
+    // Save parameters
+    updateSavedData({
+      id,
+      answers
+    }, context)
+
+    // Plugin API
+    if (task.onBeforeRun) {
+      await task.onBeforeRun({
+        answers,
+        args
+      })
+    }
+
+    if (command === 'npm') {
+      args.splice(0, 0, '--')
+    }
+
+    log('Task run', command, args)
+
+    updateOne({
+      id: task.id,
+      status: 'running'
+    }, context)
+    logs.add({
+      message: `Task ${task.id} started`,
+      type: 'info'
+    }, context)
+
+    if (task.fullCommand) {
+      addLog({
+        taskId: task.id,
+        type: 'stdout',
+        text: `$ ${command} ${args.join(' ')}`
+      }, context)
+    }
+
+    process.env.VUE_CLI_CONTEXT = cwd.get()
+
+    const child = execa(command, args, {
+      cwd: cwd.get(),
+      stdio: ['inherit', 'pipe', 'pipe']
+    })
+
+    task.child = child
+
+    child.stdout.on('data', buffer => {
+      addLog({
+        taskId: task.id,
+        type: 'stdout',
+        text: buffer.toString()
+      }, context)
+    })
+
+    child.stderr.on('data', buffer => {
+      addLog({
+        taskId: task.id,
+        type: 'stderr',
+        text: buffer.toString()
+      }, context)
+    })
+
+    const onExit = async (code, signal) => {
+      log('Task exit', command, args, 'code:', code, 'signal:', signal)
+
+      // Plugin API
+      if (task.onExit) {
+        await task.onExit({
+          args,
+          child,
+          cwd: cwd.get(),
+          code,
+          signal
+        })
+      }
+
+      if (code === null || task._terminating) {
+        updateOne({
+          id: task.id,
+          status: 'terminated'
+        }, context)
+        logs.add({
+          message: `Task ${task.id} was terminated`,
+          type: 'info'
+        }, context)
+      } else if (code !== 0) {
+        updateOne({
+          id: task.id,
+          status: 'error'
+        }, context)
+        logs.add({
+          message: `Task ${task.id} ended with error code ${code}`,
+          type: 'error'
+        }, context)
+        notifier.notify({
+          title: `Task error`,
+          message: `Task ${task.id} ended with error code ${code}`,
+          icon: path.resolve(__dirname, '../../assets/error.png')
+        })
+      } else {
+        updateOne({
+          id: task.id,
+          status: 'done'
+        }, context)
+        logs.add({
+          message: `Task ${task.id} completed`,
+          type: 'done'
+        }, context)
+        notifier.notify({
+          title: `Task completed`,
+          message: `Task ${task.id} completed`,
+          icon: path.resolve(__dirname, '../../assets/done.png')
+        })
+      }
+    }
+
+    child.on('exit', onExit)
+
+    // Plugin API
+    if (task.onRun) {
+      await task.onRun({
+        args,
+        child,
+        cwd: cwd.get()
+      })
+    }
+  }
+  return task
+}
+
+function stop (id, context) {
+  const task = findOne(id, context)
+  if (task && task.status === 'running' && task.child) {
+    task._terminating = true
+    terminate(task.child.pid)
+  }
+  return task
+}
+
+function addLog (log, context) {
+  const task = findOne(log.taskId, context)
+  if (task) {
+    if (task.logs.length === MAX_LOGS) {
+      task.logs.shift()
+    }
+    task.logs.push(log)
+    context.pubsub.publish(channels.TASK_LOG_ADDED, {
+      taskLogAdded: log
+    })
+  }
+}
+
+function clearLogs (id, context) {
+  const task = findOne(id, context)
+  if (task) {
+    task.logs = []
+  }
+  return task
+}
+
+module.exports = {
+  list,
+  findOne,
+  getPrompts,
+  run,
+  stop,
+  updateOne,
+  clearLogs
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/connectors/views.js b/packages/@vue/cli-ui/src/graphql-api/connectors/views.js
new file mode 100644
index 0000000000..6b9031bb11
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/connectors/views.js
@@ -0,0 +1,127 @@
+// Connectors
+const cwd = require('./cwd')
+// Subs
+const channels = require('../channels')
+
+function createViewsSet () {
+  // Builtin views
+  return [
+    {
+      id: 'vue-project-plugins',
+      name: 'project-plugins',
+      icon: 'widgets',
+      tooltip: 'components.project-nav.tooltips.plugins'
+    },
+    {
+      id: 'vue-project-configurations',
+      name: 'project-configurations',
+      icon: 'settings_applications',
+      tooltip: 'components.project-nav.tooltips.configuration'
+    },
+    {
+      id: 'vue-project-tasks',
+      name: 'project-tasks',
+      icon: 'assignment',
+      tooltip: 'components.project-nav.tooltips.tasks'
+    }
+  ]
+}
+
+const viewsMap = new Map()
+
+function getViews () {
+  const file = cwd.get()
+  let list = viewsMap.get(file)
+  if (!list) {
+    list = createViewsSet()
+    viewsMap.set(file, list)
+  }
+  return list
+}
+
+function list (context) {
+  return getViews()
+}
+
+function findOne (id) {
+  const views = getViews()
+  return views.find(r => r.id === id)
+}
+
+function add (view, context) {
+  remove(view.id, context)
+  const views = getViews()
+  views.push(view)
+  context.pubsub.publish(channels.VIEW_ADDED, {
+    viewAdded: view
+  })
+}
+
+function remove (id, context) {
+  const views = getViews()
+  const index = views.findIndex(r => r.id === id)
+  if (index !== -1) {
+    const view = views[index]
+    views.splice(index, 1)
+    context.pubsub.publish(channels.VIEW_REMOVED, {
+      viewRemoved: view
+    })
+  }
+}
+
+function update (view, context) {
+  const existingView = findOne(view.id)
+  if (existingView) {
+    Object.assign(existingView, view)
+    context.pubsub.publish(channels.VIEW_CHANGED, {
+      viewChanged: existingView
+    })
+  }
+}
+
+function addBadge ({ viewId, badge }, context) {
+  const view = findOne(viewId)
+  if (view) {
+    if (!view.badges) view.badges = []
+    const existingBadge = view.badges.find(b => b.id === badge.id)
+    if (existingBadge) {
+      Object.assign(existingBadge, badge, {
+        count: existingBadge.count + 1
+      })
+    } else {
+      view.badges.push({
+        type: 'dim',
+        count: 1,
+        priority: 0,
+        hidden: false,
+        ...badge
+      })
+    }
+    update(view, context)
+  }
+}
+
+function removeBadge ({ viewId, badgeId }, context) {
+  const view = findOne(viewId)
+  if (view && view.badges) {
+    const existingBadge = view.badges.find(b => b.id === badgeId)
+    if (existingBadge) {
+      existingBadge.count--
+      if (existingBadge.count <= 0) {
+        const index = view.badges.indexOf(existingBadge)
+        index !== -1 && view.badges.splice(index, 1)
+      }
+      update(view, context)
+    }
+  }
+}
+
+module.exports = {
+  list,
+  findOne,
+  add,
+  remove,
+  update,
+  addBadge,
+  removeBadge
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/context.js b/packages/@vue/cli-ui/src/graphql-api/context.js
new file mode 100644
index 0000000000..c14b35fce8
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/context.js
@@ -0,0 +1,11 @@
+const { db } = require('./utils/db')
+const pubsub = require('./pubsub')
+
+// Context passed to all resolvers (third argument)
+// eslint-disable-next-line no-unused-vars
+module.exports = req => {
+  return {
+    db,
+    pubsub
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/mocks.js b/packages/@vue/cli-ui/src/graphql-api/mocks.js
new file mode 100644
index 0000000000..550b8f5541
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/mocks.js
@@ -0,0 +1,5 @@
+// Enable mocking in vue.config.js with `"pluginOptions": { "graphqlMock": true }`
+// Customize mocking: https://www.apollographql.com/docs/graphql-tools/mocking.html#Customizing-mocks
+module.exports = {
+  // Mock resolvers here
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/pubsub.js b/packages/@vue/cli-ui/src/graphql-api/pubsub.js
new file mode 100644
index 0000000000..c6aca6e474
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/pubsub.js
@@ -0,0 +1,5 @@
+const { PubSub } = require('graphql-subscriptions')
+
+const pubsub = new PubSub()
+pubsub.ee.setMaxListeners(0)
+module.exports = pubsub
diff --git a/packages/@vue/cli-ui/src/graphql-api/resolvers.js b/packages/@vue/cli-ui/src/graphql-api/resolvers.js
new file mode 100644
index 0000000000..327ef8d627
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/resolvers.js
@@ -0,0 +1,92 @@
+const { withFilter } = require('graphql-subscriptions')
+const path = require('path')
+const globby = require('globby')
+const merge = require('lodash.merge')
+const exit = require('@vue/cli-shared-utils/lib/exit')
+const GraphQLJSON = require('graphql-type-json')
+// Channels for subscriptions
+const channels = require('./channels')
+// Connectors
+const cwd = require('./connectors/cwd')
+const progress = require('./connectors/progress')
+const files = require('./connectors/files')
+const clientAddons = require('./connectors/client-addons')
+const sharedData = require('./connectors/shared-data')
+const locales = require('./connectors/locales')
+// Start ipc server
+require('./utils/ipc')
+
+// Prevent code from exiting server process
+exit.exitProcess = false
+
+process.env.VUE_CLI_API_MODE = true
+
+const resolvers = [{
+  JSON: GraphQLJSON,
+
+  DescribedEntity: {
+    __resolveType (obj, context, info) {
+      return null
+    }
+  },
+
+  ClientAddon: {
+    url: (addon, args, context) => clientAddons.getUrl(addon, context)
+  },
+
+  Query: {
+    cwd: () => cwd.get(),
+    progress: (root, { id }, context) => progress.get(id, context),
+    clientAddons: (root, args, context) => clientAddons.list(context),
+    sharedData: (root, { id }, context) => sharedData.get(id, context),
+    locales: (root, args, context) => locales.list(context)
+  },
+
+  Mutation: {
+    fileOpenInEditor: (root, { input }, context) => files.openInEditor(input, context),
+    sharedDataUpdate: (root, args, context) => sharedData.set(args, context)
+  },
+
+  Subscription: {
+    cwdChanged: {
+      subscribe: (parent, args, { pubsub }) => pubsub.asyncIterator(channels.CWD_CHANGED)
+    },
+    progressChanged: {
+      subscribe: withFilter(
+        // Iterator
+        (parent, args, { pubsub }) => pubsub.asyncIterator(channels.PROGRESS_CHANGED),
+        // Filter
+        (payload, vars) => payload.progressChanged.id === vars.id
+      )
+    },
+    progressRemoved: {
+      subscribe: withFilter(
+        // Iterator
+        (parent, args, { pubsub }) => pubsub.asyncIterator(channels.PROGRESS_REMOVED),
+        // Filter
+        (payload, vars) => payload.progressRemoved.id === vars.id
+      )
+    },
+    clientAddonAdded: {
+      subscribe: (parent, args, { pubsub }) => pubsub.asyncIterator(channels.CLIENT_ADDON_ADDED)
+    },
+    sharedDataUpdated: {
+      subscribe: withFilter(
+        (parent, args, { pubsub }) => pubsub.asyncIterator(channels.SHARED_DATA_UPDATED),
+        (payload, vars) => payload.sharedDataUpdated.id === vars.id
+      )
+    },
+    localeAdded: {
+      subscribe: (parent, args, { pubsub }) => pubsub.asyncIterator(channels.LOCALE_ADDED)
+    }
+  }
+}]
+
+// Load resolvers in './schema'
+const paths = globby.sync([path.join(__dirname, './schema/*.js')])
+paths.forEach(file => {
+  const { resolvers: r } = require(file)
+  r && resolvers.push(r)
+})
+
+module.exports = merge.apply(null, resolvers)
diff --git a/packages/@vue/cli-ui/src/graphql-api/schema/configuration.js b/packages/@vue/cli-ui/src/graphql-api/schema/configuration.js
new file mode 100644
index 0000000000..9e9c1e67eb
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/schema/configuration.js
@@ -0,0 +1,40 @@
+const gql = require('graphql-tag')
+// Connectors
+const configurations = require('../connectors/configurations')
+
+exports.types = gql`
+extend type Query {
+  configurations: [Configuration]
+  configuration (id: ID!): Configuration
+}
+
+extend type Mutation {
+  configurationSave (id: ID!): Configuration
+  configurationCancel (id: ID!): Configuration
+}
+
+type Configuration implements DescribedEntity {
+  id: ID!
+  name: String!
+  description: String
+  link: String
+  icon: String
+  prompts: [Prompt]
+}
+`
+
+exports.resolvers = {
+  Configuration: {
+    prompts: (configuration, args, context) => configurations.getPrompts(configuration.id, context)
+  },
+
+  Query: {
+    configurations: (root, args, context) => configurations.list(context),
+    configuration: (root, { id }, context) => configurations.findOne(id, context)
+  },
+
+  Mutation: {
+    configurationSave: (root, { id }, context) => configurations.save(id, context),
+    configurationCancel: (root, { id }, context) => configurations.cancel(id, context)
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/schema/console.js b/packages/@vue/cli-ui/src/graphql-api/schema/console.js
new file mode 100644
index 0000000000..e078d31bb5
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/schema/console.js
@@ -0,0 +1,53 @@
+const gql = require('graphql-tag')
+// Subs
+const channels = require('../channels')
+// Connectors
+const logs = require('../connectors/logs')
+
+exports.types = gql`
+extend type Query {
+  consoleLogs: [ConsoleLog]
+  consoleLogLast: ConsoleLog
+}
+
+extend type Mutation {
+  consoleLogsClear: [ConsoleLog]
+}
+
+extend type Subscription {
+  consoleLogAdded: ConsoleLog!
+}
+
+type ConsoleLog {
+  id: ID!
+  message: String!
+  tag: String
+  type: ConsoleLogType!
+  date: String
+}
+
+enum ConsoleLogType {
+  log
+  warn
+  error
+  info
+  done
+}
+`
+
+exports.resolvers = {
+  Query: {
+    consoleLogs: (root, args, context) => logs.list(context),
+    consoleLogLast: (root, args, context) => logs.last(context)
+  },
+
+  Mutation: {
+    consoleLogsClear: (root, args, context) => logs.clear(context)
+  },
+
+  Subscription: {
+    consoleLogAdded: {
+      subscribe: (parent, args, context) => context.pubsub.asyncIterator(channels.CONSOLE_LOG_ADDED)
+    }
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/schema/folder.js b/packages/@vue/cli-ui/src/graphql-api/schema/folder.js
new file mode 100644
index 0000000000..7fcf67a078
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/schema/folder.js
@@ -0,0 +1,48 @@
+const gql = require('graphql-tag')
+// Connectors
+const folders = require('../connectors/folders')
+const cwd = require('../connectors/cwd')
+
+exports.types = gql`
+extend type Query {
+  folderCurrent: Folder
+  foldersFavorite: [Folder]
+}
+
+extend type Mutation {
+  folderOpen (path: String!): Folder
+  folderOpenParent: Folder
+  folderSetFavorite (path: String!, favorite: Boolean!): Folder
+}
+
+type Folder {
+  name: String!
+  path: String!
+  isPackage: Boolean
+  isVueProject: Boolean
+  favorite: Boolean
+  children: [Folder]
+}
+`
+
+exports.resolvers = {
+  Folder: {
+    children: (folder, args, context) => folders.list(folder.path, context),
+    isPackage: (folder, args, context) => folders.isPackage(folder.path, context),
+    isVueProject: (folder, args, context) => folders.isVueProject(folder.path, context)
+  },
+
+  Query: {
+    folderCurrent: (root, args, context) => folders.getCurrent(args, context),
+    foldersFavorite: (root, args, context) => folders.listFavorite(context)
+  },
+
+  Mutation: {
+    folderOpen: (root, { path }, context) => folders.open(path, context),
+    folderOpenParent: (root, args, context) => folders.openParent(cwd.get(), context),
+    folderSetFavorite: (root, args, context) => folders.setFavorite({
+      file: args.path,
+      favorite: args.favorite
+    }, context)
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/schema/git.js b/packages/@vue/cli-ui/src/graphql-api/schema/git.js
new file mode 100644
index 0000000000..dbefcdd82e
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/schema/git.js
@@ -0,0 +1,56 @@
+const gql = require('graphql-tag')
+// Connectors
+const git = require('../connectors/git')
+
+exports.types = gql`
+extend type Query {
+  fileDiffs: [FileDiff]
+}
+
+extend type Mutation {
+  gitCommit (message: String!): Boolean
+}
+
+type FileDiff {
+  id: ID!
+  from: String
+  to: String
+  new: Boolean
+  deleted: Boolean
+  binary: Boolean
+  chunks: [FileDiffChunk]
+}
+
+type FileDiffChunk {
+  changes: [FileDiffChange]
+  oldStart: Int
+  oldLines: Int
+  newStart: Int
+  newLines: Int
+}
+
+type FileDiffChange {
+  type: FileDiffChangeType
+  ln: Int
+  ln1: Int
+  ln2: Int
+  content: String
+  normal: Boolean
+}
+
+enum FileDiffChangeType {
+  normal
+  add
+  del
+}
+`
+
+exports.resolvers = {
+  Query: {
+    fileDiffs: (root, args, context) => git.getDiffs(context)
+  },
+
+  Mutation: {
+    gitCommit: (root, { message }, context) => git.commit(message, context)
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/schema/plugin.js b/packages/@vue/cli-ui/src/graphql-api/schema/plugin.js
new file mode 100644
index 0000000000..a22aab0488
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/schema/plugin.js
@@ -0,0 +1,94 @@
+const gql = require('graphql-tag')
+// Subs
+const channels = require('../channels')
+// Connectors
+const plugins = require('../connectors/plugins')
+
+exports.types = gql`
+extend type Query {
+  pluginInstallation: PluginInstallation
+  plugin (id: ID!): Plugin
+}
+
+extend type Mutation {
+  pluginInstall (id: ID!): PluginInstallation
+  pluginUninstall (id: ID!): PluginInstallation
+  pluginInvoke (id: ID!): PluginInstallation
+  pluginFinishInstall: PluginInstallation
+  pluginUpdate (id: ID!): Plugin
+  pluginActionCall (id: ID!, params: JSON): PluginActionResult
+}
+
+extend type Subscription {
+  pluginActionCalled: PluginActionCall
+  pluginActionResolved: PluginActionResult
+}
+
+type Plugin {
+  id: ID!
+  version: Version!
+  official: Boolean
+  installed: Boolean
+  website: String
+  description: String
+  githubStats: GitHubStats
+  logo: String
+}
+
+type PluginInstallation {
+  id: ID!
+  pluginId: ID
+  step: PluginInstallationStep
+  prompts: [Prompt]
+}
+
+enum PluginInstallationStep {
+  install
+  uninstall
+  config
+  diff
+}
+
+type PluginActionCall {
+  id: ID!
+  params: JSON
+}
+
+type PluginActionResult {
+  id: ID!
+  params: JSON
+  results: [JSON]
+  errors: [JSON]
+}
+`
+
+exports.resolvers = {
+  Plugin: {
+    version: (plugin, args, context) => plugins.getVersion(plugin, context),
+    description: (plugin, args, context) => plugins.getDescription(plugin, context),
+    logo: (plugin, args, context) => plugins.getLogo(plugin, context)
+  },
+
+  Query: {
+    pluginInstallation: (root, args, context) => plugins.getInstallation(context),
+    plugin: (root, { id }, context) => plugins.findOne(id, context)
+  },
+
+  Mutation: {
+    pluginInstall: (root, { id }, context) => plugins.install(id, context),
+    pluginUninstall: (root, { id }, context) => plugins.uninstall(id, context),
+    pluginInvoke: (root, { id }, context) => plugins.runInvoke(id, context),
+    pluginFinishInstall: (root, args, context) => plugins.finishInstall(context),
+    pluginUpdate: (root, { id }, context) => plugins.update(id, context),
+    pluginActionCall: (root, args, context) => plugins.callAction(args, context)
+  },
+
+  Subscription: {
+    pluginActionCalled: {
+      subscribe: (parent, args, { pubsub }) => pubsub.asyncIterator(channels.PLUGIN_ACTION_CALLED)
+    },
+    pluginActionResolved: {
+      subscribe: (parent, args, { pubsub }) => pubsub.asyncIterator(channels.PLUGIN_ACTION_RESOLVED)
+    }
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/schema/project.js b/packages/@vue/cli-ui/src/graphql-api/schema/project.js
new file mode 100644
index 0000000000..a335d6c876
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/schema/project.js
@@ -0,0 +1,90 @@
+const gql = require('graphql-tag')
+// Connectors
+const projects = require('../connectors/projects')
+const plugins = require('../connectors/plugins')
+
+exports.types = gql`
+extend type Query {
+  projects: [Project]
+  projectCurrent: Project
+  projectCreation: ProjectCreation
+}
+
+extend type Mutation {
+  projectCreate (input: ProjectCreateInput!): Project!
+  projectImport (input: ProjectImportInput!): Project!
+  projectOpen (id: ID!): Project!
+  projectRemove (id: ID!): Boolean!
+  projectCwdReset: String
+  projectSetFavorite (id: ID!, favorite: Int!): Project!
+  presetApply (id: ID!): ProjectCreation
+  featureSetEnabled (id: ID!, enabled: Boolean): Feature
+}
+
+type Project {
+  id: ID!
+  name: String!
+  path: String!
+  favorite: Int
+  plugins: [Plugin]
+}
+
+input ProjectCreateInput {
+  folder: String!
+  force: Boolean!
+  packageManager: PackageManager
+  preset: String!
+  remote: Boolean
+  clone: Boolean
+  save: String
+}
+
+input ProjectImportInput {
+  path: String!
+}
+
+type Preset implements DescribedEntity {
+  id: ID!
+  name: String
+  description: String
+  link: String
+  features: [String]
+}
+
+type ProjectCreation {
+  presets: [Preset]
+  features: [Feature]
+  prompts: [Prompt]
+}
+
+type Feature implements DescribedEntity {
+  id: ID!
+  name: String
+  description: String
+  link: String
+  enabled: Boolean!
+}
+`
+
+exports.resolvers = {
+  Project: {
+    plugins: (project, args, context) => plugins.list(project.path, context)
+  },
+
+  Query: {
+    projects: (root, args, context) => projects.list(context),
+    projectCurrent: (root, args, context) => projects.getCurrent(context),
+    projectCreation: (root, args, context) => projects.getCreation(context)
+  },
+
+  Mutation: {
+    projectCreate: (root, { input }, context) => projects.create(input, context),
+    projectImport: (root, { input }, context) => projects.import(input, context),
+    projectOpen: (root, { id }, context) => projects.open(id, context),
+    projectRemove: (root, { id }, context) => projects.remove(id, context),
+    projectCwdReset: (root, args, context) => projects.resetCwd(context),
+    projectSetFavorite: (root, args, context) => projects.setFavorite(args, context),
+    presetApply: (root, { id }, context) => projects.applyPreset(id, context),
+    featureSetEnabled: (root, args, context) => projects.setFeatureEnabled(args, context)
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/schema/prompt.js b/packages/@vue/cli-ui/src/graphql-api/schema/prompt.js
new file mode 100644
index 0000000000..abb0ab9bbf
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/schema/prompt.js
@@ -0,0 +1,61 @@
+const gql = require('graphql-tag')
+// Connectors
+const prompts = require('../connectors/prompts')
+
+exports.types = gql`
+extend type Mutation {
+  promptAnswer (input: PromptInput!): [Prompt]
+}
+
+type Prompt implements DescribedEntity {
+  id: ID!
+  type: PromptType!
+  visible: Boolean!
+  enabled: Boolean
+  name: String
+  message: String
+  group: String
+  description: String
+  link: String
+  choices: [PromptChoice]
+  value: String
+  valueChanged: Boolean
+  error: PromptError
+}
+
+input PromptInput {
+  id: ID!
+  value: String!
+}
+
+type PromptChoice {
+  value: String!
+  name: String
+  checked: Boolean
+  disabled: Boolean
+  isDefault: Boolean
+}
+
+type PromptError {
+  message: String!
+  link: String
+}
+
+enum PromptType {
+  input
+  confirm
+  list
+  rawlist
+  expand
+  checkbox
+  password
+  editor
+  color
+}
+`
+
+exports.resolvers = {
+  Mutation: {
+    promptAnswer: (root, { input }, context) => prompts.answerPrompt(input, context)
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/schema/task.js b/packages/@vue/cli-ui/src/graphql-api/schema/task.js
new file mode 100644
index 0000000000..9c86ef403d
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/schema/task.js
@@ -0,0 +1,92 @@
+const gql = require('graphql-tag')
+// Subs
+const { withFilter } = require('graphql-subscriptions')
+const channels = require('../channels')
+// Connectors
+const tasks = require('../connectors/tasks')
+
+exports.types = gql`
+extend type Query {
+  tasks: [Task]
+  task (id: ID!): Task
+}
+
+extend type Mutation {
+  taskRun (id: ID!): Task
+  taskStop (id: ID!): Task
+  taskLogsClear (id: ID!): Task
+}
+
+extend type Subscription {
+  taskChanged: Task
+  taskLogAdded (id: ID!): TaskLog
+}
+
+type Task implements DescribedEntity {
+  id: ID!
+  status: TaskStatus!
+  command: String!
+  name: String
+  description: String
+  link: String
+  logs: [TaskLog]
+  prompts: [Prompt]
+  views: [TaskView]
+  defaultView: String
+}
+
+enum TaskStatus {
+  idle
+  running
+  done
+  error
+  terminated
+}
+
+type TaskLog {
+  taskId: ID!
+  type: TaskLogType!
+  text: String
+}
+
+enum TaskLogType {
+  stdout
+  stderr
+}
+
+type TaskView {
+  id: ID!
+  label: String!
+  component: String!
+  icon: String
+}
+`
+
+exports.resolvers = {
+  Task: {
+    prompts: (task, args, context) => tasks.getPrompts(task.id, context)
+  },
+
+  Query: {
+    tasks: (root, args, context) => tasks.list(context),
+    task: (root, { id }, context) => tasks.findOne(id, context)
+  },
+
+  Mutation: {
+    taskRun: (root, { id }, context) => tasks.run(id, context),
+    taskStop: (root, { id }, context) => tasks.stop(id, context),
+    taskLogsClear: (root, { id }, context) => tasks.clearLogs(id, context)
+  },
+
+  Subscription: {
+    taskChanged: {
+      subscribe: (parent, args, { pubsub }) => pubsub.asyncIterator(channels.TASK_CHANGED)
+    },
+    taskLogAdded: {
+      subscribe: withFilter(
+        (parent, args, { pubsub }) => pubsub.asyncIterator(channels.TASK_LOG_ADDED),
+        (payload, vars) => payload.taskLogAdded.taskId === vars.id
+      )
+    }
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/schema/view.js b/packages/@vue/cli-ui/src/graphql-api/schema/view.js
new file mode 100644
index 0000000000..2ed633d686
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/schema/view.js
@@ -0,0 +1,61 @@
+const gql = require('graphql-tag')
+// Sub
+const channels = require('../channels')
+// Connectors
+const views = require('../connectors/views')
+
+exports.types = gql`
+extend type Query {
+  views: [View]
+}
+
+extend type Subscription {
+  viewAdded: View
+  viewRemoved: View
+  viewChanged: View
+}
+
+type View {
+  id: ID!
+  name: String!
+  icon: String!
+  tooltip: String
+  badges: [ViewBadge]
+}
+
+type ViewBadge {
+  id: ID!
+  type: ViewBadgeType!
+  count: Int
+  label: String!
+  priority: Int!
+  hidden: Boolean!
+}
+
+enum ViewBadgeType {
+  info
+  success
+  warning
+  error
+  accent
+  dim
+}
+`
+
+exports.resolvers = {
+  Query: {
+    views: (root, args, context) => views.list(context)
+  },
+
+  Subscription: {
+    viewAdded: {
+      subscribe: (parent, args, { pubsub }) => pubsub.asyncIterator(channels.VIEW_ADDED)
+    },
+    viewChanged: {
+      subscribe: (parent, args, { pubsub }) => pubsub.asyncIterator(channels.VIEW_CHANGED)
+    },
+    viewRemoved: {
+      subscribe: (parent, args, { pubsub }) => pubsub.asyncIterator(channels.VIEW_REMOVED)
+    }
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/server.js b/packages/@vue/cli-ui/src/graphql-api/server.js
new file mode 100644
index 0000000000..c309c95c5b
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/server.js
@@ -0,0 +1,15 @@
+const path = require('path')
+const express = require('express')
+const fallback = require('express-history-api-fallback')
+// Connectors
+const clientAddons = require('./connectors/client-addons')
+const plugins = require('./connectors/plugins')
+
+const distPath = path.resolve(__dirname, '../../dist')
+
+module.exports = app => {
+  app.use(express.static(distPath))
+  app.use('/_plugin/:id/*', plugins.serve)
+  app.use('/_addon/:id/*', clientAddons.serve)
+  app.use(fallback(path.join(distPath, 'index.html')))
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/type-defs.js b/packages/@vue/cli-ui/src/graphql-api/type-defs.js
new file mode 100644
index 0000000000..f0d004b201
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/type-defs.js
@@ -0,0 +1,92 @@
+const gql = require('graphql-tag')
+const path = require('path')
+const globby = require('globby')
+
+const typeDefs = [gql`
+scalar JSON
+
+enum PackageManager {
+  npm
+  yarn
+}
+
+interface DescribedEntity {
+  name: String
+  description: String
+  link: String
+}
+
+type Version {
+  current: String
+  latest: String
+  wanted: String
+  range: String
+}
+
+type GitHubStats {
+  stars: Int
+}
+
+type Progress {
+  id: ID!
+  status: String
+  info: String
+  error: String
+  # Progress from 0 to 1 (-1 means disabled)
+  progress: Float
+  args: [String]
+}
+
+input OpenInEditorInput {
+  file: String!
+  line: Int
+  column: Int
+  gitPath: Boolean
+}
+
+type ClientAddon {
+  id: ID!
+  url: String!
+}
+
+type SharedData {
+  id: ID!
+  value: JSON
+}
+
+type Locale {
+  lang: String!
+  strings: JSON!
+}
+
+type Query {
+  progress (id: ID!): Progress
+  cwd: String!
+  clientAddons: [ClientAddon]
+  sharedData (id: ID!): SharedData
+  locales: [Locale]
+}
+
+type Mutation {
+  fileOpenInEditor (input: OpenInEditorInput!): Boolean
+  sharedDataUpdate (id: ID!, value: JSON!): SharedData
+}
+
+type Subscription {
+  progressChanged (id: ID!): Progress
+  progressRemoved (id: ID!): ID
+  cwdChanged: String!
+  clientAddonAdded: ClientAddon
+  sharedDataUpdated (id: ID!): SharedData
+  localeAdded: Locale
+}
+`]
+
+// Load types in './schema'
+const paths = globby.sync([path.join(__dirname, './schema/*.js')])
+paths.forEach(file => {
+  const { types } = require(file)
+  types && typeDefs.push(types)
+})
+
+module.exports = typeDefs
diff --git a/packages/@vue/cli-ui/src/graphql-api/utils/command.js b/packages/@vue/cli-ui/src/graphql-api/utils/command.js
new file mode 100644
index 0000000000..aa94cbe3cc
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/utils/command.js
@@ -0,0 +1,8 @@
+const {
+  hasYarn
+} = require('@vue/cli-shared-utils')
+const { loadOptions } = require('@vue/cli/lib/options')
+
+exports.getCommand = function () {
+  return loadOptions().packageManager || (hasYarn() ? 'yarn' : 'npm')
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/utils/db.js b/packages/@vue/cli-ui/src/graphql-api/utils/db.js
new file mode 100644
index 0000000000..9253560b83
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/utils/db.js
@@ -0,0 +1,28 @@
+const Lowdb = require('lowdb')
+const FileSync = require('lowdb/adapters/FileSync')
+const fs = require('fs-extra')
+const { resolve } = require('path')
+
+let folder = '../../../live'
+
+if (process.env.NODE_ENV === 'test') {
+  folder = '../../../live-test'
+  // Clean DB
+  fs.removeSync(resolve(__dirname, folder))
+}
+
+fs.ensureDirSync(resolve(__dirname, folder))
+
+const db = new Lowdb(new FileSync(resolve(__dirname, folder, 'db.json')))
+
+// Seed an empty DB
+db.defaults({
+  projects: [],
+  foldersFavorite: [],
+  tasks: [],
+  config: {}
+}).write()
+
+module.exports = {
+  db
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/utils/ipc.js b/packages/@vue/cli-ui/src/graphql-api/utils/ipc.js
new file mode 100644
index 0000000000..3710e592cf
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/utils/ipc.js
@@ -0,0 +1,53 @@
+const ipc = require('node-ipc')
+// Utils
+const { log, dumpObject } = require('../utils/logger')
+
+ipc.config.id = 'vue-cli'
+ipc.config.retry = 1500
+ipc.config.silent = true
+
+const listeners = []
+
+ipc.serve(() => {
+  ipc.server.on('message', (data, socket) => {
+    log('IPC message', dumpObject(data))
+    for (const listener of listeners) {
+      listener({
+        data,
+        emit: data => {
+          ipc.server.emit(socket, 'message', data)
+        }
+      })
+    }
+  })
+
+  ipc.server.on('ack', (data, socket) => {
+    log('IPC ack', dumpObject(data))
+    if (data.done) {
+      ipc.server.emit(socket, 'ack', { ok: true })
+    }
+  })
+})
+
+ipc.server.start()
+
+function on (cb) {
+  listeners.push(cb)
+  return () => off(cb)
+}
+
+function off (cb) {
+  const index = listeners.indexOf(cb)
+  if (index !== -1) listeners.splice(index, 1)
+}
+
+function send (data) {
+  log('IPC send', dumpObject(data))
+  ipc.server.broadcast('message', data)
+}
+
+module.exports = {
+  on,
+  off,
+  send
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/utils/logger.js b/packages/@vue/cli-ui/src/graphql-api/utils/logger.js
new file mode 100644
index 0000000000..995eef5a53
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/utils/logger.js
@@ -0,0 +1,30 @@
+const chalk = require('chalk')
+
+exports.log = (...args) => {
+  if (process.env.NODE_ENV === 'production') return
+  const date = new Date()
+  const timestamp = `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}.${date.getSeconds().toString().padStart(2, '0')}`
+  const first = args.shift()
+  console.log(`${chalk.blue('UI')} ${chalk.dim(timestamp)}`, chalk.bold(first), ...args)
+}
+
+const simpleTypes = [
+  'string',
+  'number',
+  'boolean'
+]
+
+exports.dumpObject = (obj) => {
+  if (process.env.NODE_ENV === 'production') return
+  const result = {}
+  Object.keys(obj).forEach(key => {
+    const value = obj[key]
+    const type = typeof value
+    if (simpleTypes.includes(type)) {
+      result[key] = value
+    } else {
+      result[key] = type
+    }
+  })
+  return result.toString()
+}
diff --git a/packages/@vue/cli-ui/src/graphql-api/utils/parse-diff.js b/packages/@vue/cli-ui/src/graphql-api/utils/parse-diff.js
new file mode 100644
index 0000000000..49b032928e
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/utils/parse-diff.js
@@ -0,0 +1,192 @@
+// From https://github.com/sergeyt/parse-diff
+module.exports = function (input) {
+  if (!input) { return [] }
+  if (input.match(/^\s+$/)) { return [] }
+
+  const lines = input.split('\n')
+  if (lines.length === 0) { return [] }
+
+  const files = []
+  let file = null
+  let lnDel = 0
+  let lnAdd = 0
+  let current = null
+
+  const start = function (line) {
+    file = {
+      chunks: [],
+      deletions: 0,
+      additions: 0
+    }
+    files.push(file)
+
+    if (!file.to && !file.from) {
+      const fileNames = parseFile(line)
+
+      if (fileNames) {
+        file.from = fileNames[0]
+        file.to = fileNames[1]
+      }
+    }
+  }
+
+  const restart = function () {
+    if (!file || file.chunks.length) { return start() }
+  }
+
+  const newFile = function () {
+    restart()
+    file.new = true
+    file.from = '/dev/null'
+  }
+
+  const deletedFile = function () {
+    restart()
+    file.deleted = true
+    file.to = '/dev/null'
+  }
+
+  const index = function (line) {
+    restart()
+    file.index = line.split(' ').slice(1)
+  }
+
+  const fromFile = function (line) {
+    restart()
+    file.from = parseFileFallback(line)
+  }
+
+  const toFile = function (line) {
+    restart()
+    file.to = parseFileFallback(line)
+  }
+
+  const binary = function (line) {
+    file.binary = true
+  }
+
+  const chunk = function (line, match) {
+    let newStart, oldStart
+    lnDel = (oldStart = +match[1])
+    const oldLines = +(match[2] || 0)
+    lnAdd = (newStart = +match[3])
+    const newLines = +(match[4] || 0)
+    current = {
+      content: line,
+      changes: [],
+      oldStart,
+      oldLines,
+      newStart,
+      newLines
+    }
+    file.chunks.push(current)
+  }
+
+  const del = function (line) {
+    if (!current) return
+    current.changes.push({type: 'del', del: true, ln: lnDel++, content: line})
+    file.deletions++
+  }
+
+  const add = function (line) {
+    if (!current) return
+    current.changes.push({type: 'add', add: true, ln: lnAdd++, content: line})
+    file.additions++
+  }
+
+  const normal = function (line) {
+    if (!current) return
+    current.changes.push({
+      type: 'normal',
+      normal: true,
+      ln1: lnDel++,
+      ln2: lnAdd++,
+      content: line
+    })
+  }
+
+  const eof = function (line) {
+    const recentChange = current.changes[current.changes.length - 1]
+
+    return current.changes.push({
+      type: recentChange.type,
+      [recentChange.type]: true,
+      ln1: recentChange.ln1,
+      ln2: recentChange.ln2,
+      ln: recentChange.ln,
+      content: line
+    })
+  }
+
+  const schema = [
+    // todo beter regexp to avoid detect normal line starting with diff
+    [/^\s+/, normal],
+    [/^diff\s/, start],
+    [/^new file mode \d+$/, newFile],
+    [/^deleted file mode \d+$/, deletedFile],
+    [/^Binary files/, binary],
+    [/^index\s[\da-zA-Z]+\.\.[\da-zA-Z]+(\s(\d+))?$/, index],
+    [/^---\s/, fromFile],
+    [/^\+\+\+\s/, toFile],
+    [/^@@\s+-(\d+),?(\d+)?\s+\+(\d+),?(\d+)?\s@@/, chunk],
+    [/^-/, del],
+    [/^\+/, add],
+    [/^\\ No newline at end of file$/, eof]
+  ]
+
+  const parse = function (line) {
+    for (let p of schema) {
+      const m = line.match(p[0])
+      if (m) {
+        p[1](line, m)
+        return true
+      }
+    }
+    return false
+  }
+
+  for (let line of lines) {
+    parse(line)
+  }
+
+  return files
+}
+
+function parseFile (s) {
+  if (!s) return
+
+  const result = /\sa\/(.*)\sb\/(.*)/.exec(s)
+
+  return [result[1], result[2]]
+}
+
+// fallback function to overwrite file.from and file.to if executed
+function parseFileFallback (s) {
+  s = ltrim(s, '-')
+  s = ltrim(s, '+')
+  s = s.trim()
+  // ignore possible time stamp
+  const t = (/\t.*|\d{4}-\d\d-\d\d\s\d\d:\d\d:\d\d(.\d+)?\s(\+|-)\d\d\d\d/).exec(s)
+  if (t) { s = s.substring(0, t.index).trim() }
+  // ignore git prefixes a/ or b/
+  if (s.match((/^(a|b)\//))) { return s.substr(2) } else { return s }
+}
+
+function ltrim (s, chars) {
+  s = makeString(s)
+  if (!chars && trimLeft) { return trimLeft.call(s) }
+  chars = defaultToWhiteSpace(chars)
+  return s.replace(new RegExp(`^${chars}+`), '')
+}
+
+const makeString = s => s === null ? '' : s + ''
+
+const { trimLeft } = String.prototype
+
+function defaultToWhiteSpace (chars) {
+  if (chars === null) { return '\\s' }
+  if (chars.source) { return chars.source }
+  return `[${escapeRegExp(chars)}]`
+}
+
+const escapeRegExp = s => makeString(s).replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1')
diff --git a/packages/@vue/cli-ui/src/graphql-api/utils/resolve-path.js b/packages/@vue/cli-ui/src/graphql-api/utils/resolve-path.js
new file mode 100644
index 0000000000..1adc719673
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql-api/utils/resolve-path.js
@@ -0,0 +1,18 @@
+const path = require('path')
+
+exports.resolveModuleRoot = function (filePath, id = null) {
+  {
+    const index = filePath.lastIndexOf(path.sep + 'index.js')
+    if (index !== -1) {
+      filePath = filePath.substr(0, index)
+    }
+  }
+  if (id) {
+    id = id.replace(/\//g, path.sep)
+    const index = filePath.lastIndexOf(id)
+    if (index !== -1) {
+      filePath = filePath.substr(0, index + id.length)
+    }
+  }
+  return filePath
+}
diff --git a/packages/@vue/cli-ui/src/graphql/clientAddonAdded.gql b/packages/@vue/cli-ui/src/graphql/clientAddonAdded.gql
new file mode 100644
index 0000000000..412a3fe594
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/clientAddonAdded.gql
@@ -0,0 +1,7 @@
+#import "./clientAddonFragment.gql"
+
+subscription clientAddonAdded {
+  clientAddonAdded {
+    ...clientAddon
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/clientAddonFragment.gql b/packages/@vue/cli-ui/src/graphql/clientAddonFragment.gql
new file mode 100644
index 0000000000..f32c069aa7
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/clientAddonFragment.gql
@@ -0,0 +1,4 @@
+fragment clientAddon on ClientAddon {
+  id
+  url
+}
diff --git a/packages/@vue/cli-ui/src/graphql/clientAddons.gql b/packages/@vue/cli-ui/src/graphql/clientAddons.gql
new file mode 100644
index 0000000000..e9a6e54857
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/clientAddons.gql
@@ -0,0 +1,7 @@
+#import "./clientAddonFragment.gql"
+
+query clientAddons {
+  clientAddons {
+    ...clientAddon
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/configuration.gql b/packages/@vue/cli-ui/src/graphql/configuration.gql
new file mode 100644
index 0000000000..a158fa7602
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/configuration.gql
@@ -0,0 +1,12 @@
+#import "./configurationFragment.gql"
+#import "./promptFragment.gql"
+
+query configuration ($id: ID!) {
+  configuration(id: $id) {
+    ...configuration
+    link
+    prompts {
+      ...prompt
+    }
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/configurationCancel.gql b/packages/@vue/cli-ui/src/graphql/configurationCancel.gql
new file mode 100644
index 0000000000..e2d6c92fb6
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/configurationCancel.gql
@@ -0,0 +1,7 @@
+#import "./configurationFragment.gql"
+
+mutation configurationCancel ($id: ID!) {
+  configurationCancel (id: $id) {
+    ...configuration
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/configurationFragment.gql b/packages/@vue/cli-ui/src/graphql/configurationFragment.gql
new file mode 100644
index 0000000000..23346504a7
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/configurationFragment.gql
@@ -0,0 +1,6 @@
+fragment configuration on Configuration {
+  id
+  name
+  description
+  icon
+}
diff --git a/packages/@vue/cli-ui/src/graphql/configurationSave.gql b/packages/@vue/cli-ui/src/graphql/configurationSave.gql
new file mode 100644
index 0000000000..0c636a865f
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/configurationSave.gql
@@ -0,0 +1,7 @@
+#import "./configurationFragment.gql"
+
+mutation configurationSave ($id: ID!) {
+  configurationSave (id: $id) {
+    ...configuration
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/configurations.gql b/packages/@vue/cli-ui/src/graphql/configurations.gql
new file mode 100644
index 0000000000..59942c79c0
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/configurations.gql
@@ -0,0 +1,7 @@
+#import "./configurationFragment.gql"
+
+query configurations {
+  configurations {
+    ...configuration
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/consoleLogAdded.gql b/packages/@vue/cli-ui/src/graphql/consoleLogAdded.gql
new file mode 100644
index 0000000000..3e5e5bb46a
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/consoleLogAdded.gql
@@ -0,0 +1,7 @@
+#import "./consoleLogFragment.gql"
+
+subscription consoleLogAdded {
+  consoleLogAdded {
+    ...consoleLog
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/consoleLogFragment.gql b/packages/@vue/cli-ui/src/graphql/consoleLogFragment.gql
new file mode 100644
index 0000000000..fcf64b1f26
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/consoleLogFragment.gql
@@ -0,0 +1,7 @@
+fragment consoleLog on ConsoleLog {
+  id
+  type
+  message
+  tag
+  date
+}
diff --git a/packages/@vue/cli-ui/src/graphql/consoleLogLast.gql b/packages/@vue/cli-ui/src/graphql/consoleLogLast.gql
new file mode 100644
index 0000000000..e7fca0d77d
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/consoleLogLast.gql
@@ -0,0 +1,7 @@
+#import "./consoleLogFragment.gql"
+
+query consoleLogLast {
+  consoleLogLast {
+    ...consoleLog
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/consoleLogs.gql b/packages/@vue/cli-ui/src/graphql/consoleLogs.gql
new file mode 100644
index 0000000000..685181b651
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/consoleLogs.gql
@@ -0,0 +1,7 @@
+#import "./consoleLogFragment.gql"
+
+query consoleLogs {
+  consoleLogs {
+    ...consoleLog
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/consoleLogsClear.gql b/packages/@vue/cli-ui/src/graphql/consoleLogsClear.gql
new file mode 100644
index 0000000000..4aea6b9140
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/consoleLogsClear.gql
@@ -0,0 +1,7 @@
+#import "./consoleLogFragment.gql"
+
+mutation consoleLogsClear {
+  consoleLogsClear {
+    ...consoleLog
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/cwd.gql b/packages/@vue/cli-ui/src/graphql/cwd.gql
new file mode 100644
index 0000000000..5411d95335
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/cwd.gql
@@ -0,0 +1,3 @@
+query cwd {
+  cwd
+}
diff --git a/packages/@vue/cli-ui/src/graphql/cwdChanged.gql b/packages/@vue/cli-ui/src/graphql/cwdChanged.gql
new file mode 100644
index 0000000000..9fa6178e96
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/cwdChanged.gql
@@ -0,0 +1,3 @@
+subscription cwdChanged {
+  cwd: cwdChanged
+}
diff --git a/packages/@vue/cli-ui/src/graphql/featureFragment.gql b/packages/@vue/cli-ui/src/graphql/featureFragment.gql
new file mode 100644
index 0000000000..fd471b48c1
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/featureFragment.gql
@@ -0,0 +1,7 @@
+fragment feature on Feature {
+  id
+  name
+  description
+  link
+  enabled
+}
diff --git a/packages/@vue/cli-ui/src/graphql/featureSetEnabled.gql b/packages/@vue/cli-ui/src/graphql/featureSetEnabled.gql
new file mode 100644
index 0000000000..3a3f502127
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/featureSetEnabled.gql
@@ -0,0 +1,7 @@
+#import "./featureFragment.gql"
+
+mutation featureSetEnabled ($id: ID!, $enabled: Boolean!) {
+  featureSetEnabled (id: $id, enabled: $enabled) {
+    ...feature
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/fileDiffs.gql b/packages/@vue/cli-ui/src/graphql/fileDiffs.gql
new file mode 100644
index 0000000000..544925b859
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/fileDiffs.gql
@@ -0,0 +1,24 @@
+query fileDiffs {
+  fileDiffs {
+    id
+    from
+    to
+    new
+    deleted
+    binary
+    chunks {
+      oldStart
+      oldLines
+      newStart
+      newLines
+      changes {
+        type
+        ln
+        ln1
+        ln2
+        content
+        normal
+      }
+    }
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/fileOpenInEditor.gql b/packages/@vue/cli-ui/src/graphql/fileOpenInEditor.gql
new file mode 100644
index 0000000000..d17474d7a1
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/fileOpenInEditor.gql
@@ -0,0 +1,3 @@
+mutation fileOpenInEditor ($input: OpenInEditorInput!) {
+  fileOpenInEditor (input: $input)
+}
diff --git a/packages/@vue/cli-ui/src/graphql/folderCurrent.gql b/packages/@vue/cli-ui/src/graphql/folderCurrent.gql
new file mode 100644
index 0000000000..e18533371f
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/folderCurrent.gql
@@ -0,0 +1,7 @@
+#import "./folderCurrentFragment.gql"
+
+query folderCurrent {
+  folderCurrent {
+    ...folderCurrent
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/folderCurrentFragment.gql b/packages/@vue/cli-ui/src/graphql/folderCurrentFragment.gql
new file mode 100644
index 0000000000..a63ddfe137
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/folderCurrentFragment.gql
@@ -0,0 +1,13 @@
+fragment folderCurrent on Folder {
+  name
+  path
+  favorite
+  isPackage
+  isVueProject
+  children {
+    name
+    path
+    isPackage
+    isVueProject
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/folderOpen.gql b/packages/@vue/cli-ui/src/graphql/folderOpen.gql
new file mode 100644
index 0000000000..cc92466c66
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/folderOpen.gql
@@ -0,0 +1,7 @@
+#import "./folderCurrentFragment.gql"
+
+mutation folderOpen ($path: String!) {
+  folderOpen(path: $path) {
+    ...folderCurrent
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/folderOpenParent.gql b/packages/@vue/cli-ui/src/graphql/folderOpenParent.gql
new file mode 100644
index 0000000000..dd2396ccf0
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/folderOpenParent.gql
@@ -0,0 +1,7 @@
+#import "./folderCurrentFragment.gql"
+
+mutation folderOpenParent {
+  folderOpenParent {
+    ...folderCurrent
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/folderSetFavorite.gql b/packages/@vue/cli-ui/src/graphql/folderSetFavorite.gql
new file mode 100644
index 0000000000..8b41025f1d
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/folderSetFavorite.gql
@@ -0,0 +1,7 @@
+#import "./folderCurrentFragment.gql"
+
+mutation folderSetFavorite ($path: String!, $favorite: Boolean!) {
+  folderSetFavorite (path: $path, favorite: $favorite) {
+    ...folderCurrent
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/foldersFavorite.gql b/packages/@vue/cli-ui/src/graphql/foldersFavorite.gql
new file mode 100644
index 0000000000..238cb28bd4
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/foldersFavorite.gql
@@ -0,0 +1,5 @@
+query foldersFavorite {
+  foldersFavorite {
+    path
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/gitCommit.gql b/packages/@vue/cli-ui/src/graphql/gitCommit.gql
new file mode 100644
index 0000000000..29cc3df7fb
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/gitCommit.gql
@@ -0,0 +1,3 @@
+mutation gitCommit ($message: String!) {
+  gitCommit (message: $message)
+}
diff --git a/packages/@vue/cli-ui/src/graphql/localeAdded.gql b/packages/@vue/cli-ui/src/graphql/localeAdded.gql
new file mode 100644
index 0000000000..988b0907d9
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/localeAdded.gql
@@ -0,0 +1,7 @@
+#import "./localeFragment.gql"
+
+subscription localeAdded {
+  localeAdded {
+    ...locale
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/localeFragment.gql b/packages/@vue/cli-ui/src/graphql/localeFragment.gql
new file mode 100644
index 0000000000..ecf506ad44
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/localeFragment.gql
@@ -0,0 +1,4 @@
+fragment locale on Locale {
+  lang
+  strings
+}
diff --git a/packages/@vue/cli-ui/src/graphql/locales.gql b/packages/@vue/cli-ui/src/graphql/locales.gql
new file mode 100644
index 0000000000..a5fed39b58
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/locales.gql
@@ -0,0 +1,7 @@
+#import "./localeFragment.gql"
+
+query locales {
+  locales {
+    ...locale
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/pluginActionCall.gql b/packages/@vue/cli-ui/src/graphql/pluginActionCall.gql
new file mode 100644
index 0000000000..f6c65c4e5f
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/pluginActionCall.gql
@@ -0,0 +1,7 @@
+#import "./pluginActionResultFragment.gql"
+
+mutation pluginActionCall ($id: ID!, $params: JSON) {
+  pluginActionCall (id: $id, params: $params) {
+    ...pluginActionResult
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/pluginActionCallFragment.gql b/packages/@vue/cli-ui/src/graphql/pluginActionCallFragment.gql
new file mode 100644
index 0000000000..63795c21bc
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/pluginActionCallFragment.gql
@@ -0,0 +1,4 @@
+fragment pluginActionCall on PluginActionCall {
+  id
+  params
+}
diff --git a/packages/@vue/cli-ui/src/graphql/pluginActionCalled.gql b/packages/@vue/cli-ui/src/graphql/pluginActionCalled.gql
new file mode 100644
index 0000000000..151e6dd50c
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/pluginActionCalled.gql
@@ -0,0 +1,7 @@
+#import "./pluginActionCallFragment.gql"
+
+subscription pluginActionCalled {
+  pluginActionCalled {
+    ...pluginActionCall
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/pluginActionResolved.gql b/packages/@vue/cli-ui/src/graphql/pluginActionResolved.gql
new file mode 100644
index 0000000000..92597b7d7e
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/pluginActionResolved.gql
@@ -0,0 +1,7 @@
+#import "./pluginActionResultFragment.gql"
+
+subscription pluginActionResolved {
+  pluginActionResolved {
+    ...pluginActionResult
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/pluginActionResultFragment.gql b/packages/@vue/cli-ui/src/graphql/pluginActionResultFragment.gql
new file mode 100644
index 0000000000..da5f4f460c
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/pluginActionResultFragment.gql
@@ -0,0 +1,6 @@
+fragment pluginActionResult on PluginActionResult {
+  id
+  params
+  results
+  errors
+}
diff --git a/packages/@vue/cli-ui/src/graphql/pluginDetails.gql b/packages/@vue/cli-ui/src/graphql/pluginDetails.gql
new file mode 100644
index 0000000000..1b99bd8cdd
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/pluginDetails.gql
@@ -0,0 +1,11 @@
+#import "./versionFragment.gql"
+
+query pluginDetails ($id: ID!) {
+  pluginDetails: plugin (id: $id) {
+    id
+    version {
+      ...version
+    }
+    description
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/pluginFinishInstall.gql b/packages/@vue/cli-ui/src/graphql/pluginFinishInstall.gql
new file mode 100644
index 0000000000..eb067ff9c6
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/pluginFinishInstall.gql
@@ -0,0 +1,7 @@
+#import "./pluginInstallationFragment.gql"
+
+mutation pluginFinishInstall {
+  pluginFinishInstall {
+    ...pluginInstallation
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/pluginFragment.gql b/packages/@vue/cli-ui/src/graphql/pluginFragment.gql
new file mode 100644
index 0000000000..69b8f6f7d2
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/pluginFragment.gql
@@ -0,0 +1,6 @@
+fragment plugin on Plugin {
+  id
+  official
+  installed
+  website
+}
diff --git a/packages/@vue/cli-ui/src/graphql/pluginInstall.gql b/packages/@vue/cli-ui/src/graphql/pluginInstall.gql
new file mode 100644
index 0000000000..bf2d6b838c
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/pluginInstall.gql
@@ -0,0 +1,7 @@
+#import "./pluginInstallationFragment.gql"
+
+mutation pluginInstall ($id: ID!) {
+  pluginInstall (id: $id) {
+    ...pluginInstallation
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/pluginInstallation.gql b/packages/@vue/cli-ui/src/graphql/pluginInstallation.gql
new file mode 100644
index 0000000000..563d016ccb
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/pluginInstallation.gql
@@ -0,0 +1,7 @@
+#import "./pluginInstallationFragment.gql"
+
+query pluginInstallation {
+  pluginInstallation {
+    ...pluginInstallation
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/pluginInstallationFragment.gql b/packages/@vue/cli-ui/src/graphql/pluginInstallationFragment.gql
new file mode 100644
index 0000000000..a757832c5d
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/pluginInstallationFragment.gql
@@ -0,0 +1,10 @@
+#import "./promptFragment.gql"
+
+fragment pluginInstallation on PluginInstallation {
+  id
+  pluginId
+  step
+  prompts {
+    ...prompt
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/pluginInvoke.gql b/packages/@vue/cli-ui/src/graphql/pluginInvoke.gql
new file mode 100644
index 0000000000..a6c35bd057
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/pluginInvoke.gql
@@ -0,0 +1,7 @@
+#import "./pluginInstallationFragment.gql"
+
+mutation pluginInvoke ($id: ID!) {
+  pluginInvoke (id: $id) {
+    ...pluginInstallation
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/pluginLogo.gql b/packages/@vue/cli-ui/src/graphql/pluginLogo.gql
new file mode 100644
index 0000000000..73accce4b6
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/pluginLogo.gql
@@ -0,0 +1,6 @@
+query pluginLogo ($id: ID!) {
+  pluginLogo: plugin (id: $id) {
+    id
+    logo
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/pluginUninstall.gql b/packages/@vue/cli-ui/src/graphql/pluginUninstall.gql
new file mode 100644
index 0000000000..f0ffdb11a5
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/pluginUninstall.gql
@@ -0,0 +1,7 @@
+#import "./pluginInstallationFragment.gql"
+
+mutation pluginUninstall ($id: ID!) {
+  pluginUninstall (id: $id) {
+    ...pluginInstallation
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/pluginUpdate.gql b/packages/@vue/cli-ui/src/graphql/pluginUpdate.gql
new file mode 100644
index 0000000000..875a970b51
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/pluginUpdate.gql
@@ -0,0 +1,10 @@
+#import "./versionFragment.gql"
+
+mutation pluginUpdate ($id: ID!) {
+  pluginUpdate (id: $id) {
+    id
+    version {
+      ...version
+    }
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/presetApply.gql b/packages/@vue/cli-ui/src/graphql/presetApply.gql
new file mode 100644
index 0000000000..66cb789014
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/presetApply.gql
@@ -0,0 +1,7 @@
+#import "./projectCreationFragment.gql"
+
+mutation presetApply ($id: ID!) {
+  presetApply(id: $id) {
+    ...projectCreation
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/presetFragment.gql b/packages/@vue/cli-ui/src/graphql/presetFragment.gql
new file mode 100644
index 0000000000..719c263037
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/presetFragment.gql
@@ -0,0 +1,6 @@
+fragment preset on Preset {
+  id
+  name
+  description
+  link
+}
diff --git a/packages/@vue/cli-ui/src/graphql/progress.gql b/packages/@vue/cli-ui/src/graphql/progress.gql
new file mode 100644
index 0000000000..697ced8324
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/progress.gql
@@ -0,0 +1,7 @@
+#import "./progressFragment.gql"
+
+query progress ($id: ID!) {
+  progress (id: $id) {
+    ...progress
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/progressChanged.gql b/packages/@vue/cli-ui/src/graphql/progressChanged.gql
new file mode 100644
index 0000000000..fa2b5a803c
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/progressChanged.gql
@@ -0,0 +1,7 @@
+#import "./progressFragment.gql"
+
+subscription progressChanged ($id: ID!) {
+  progressChanged (id: $id) {
+    ...progress
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/progressFragment.gql b/packages/@vue/cli-ui/src/graphql/progressFragment.gql
new file mode 100644
index 0000000000..ad8870f68a
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/progressFragment.gql
@@ -0,0 +1,8 @@
+fragment progress on Progress {
+  id
+  status
+  info
+  error
+  progress
+  args
+}
diff --git a/packages/@vue/cli-ui/src/graphql/progressRemoved.gql b/packages/@vue/cli-ui/src/graphql/progressRemoved.gql
new file mode 100644
index 0000000000..c2ffbf2fd0
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/progressRemoved.gql
@@ -0,0 +1,3 @@
+subscription progressRemoved ($id: ID!) {
+  progressRemoved (id: $id)
+}
diff --git a/packages/@vue/cli-ui/src/graphql/projectCreate.gql b/packages/@vue/cli-ui/src/graphql/projectCreate.gql
new file mode 100644
index 0000000000..4c8b4fdf18
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/projectCreate.gql
@@ -0,0 +1,7 @@
+#import "./projectFragment.gql"
+
+mutation projectCreate ($input: ProjectCreateInput!) {
+  projectCreate(input: $input) {
+    ...project
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/projectCreation.gql b/packages/@vue/cli-ui/src/graphql/projectCreation.gql
new file mode 100644
index 0000000000..96e4f5b632
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/projectCreation.gql
@@ -0,0 +1,7 @@
+#import "./projectCreationFragment.gql"
+
+query projectCreation {
+  projectCreation {
+    ...projectCreation
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/projectCreationFragment.gql b/packages/@vue/cli-ui/src/graphql/projectCreationFragment.gql
new file mode 100644
index 0000000000..f38cf2029a
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/projectCreationFragment.gql
@@ -0,0 +1,15 @@
+#import "./presetFragment.gql"
+#import "./featureFragment.gql"
+#import "./promptFragment.gql"
+
+fragment projectCreation on ProjectCreation {
+  presets {
+    ...preset
+  }
+  features {
+    ...feature
+  }
+  prompts {
+    ...prompt
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/projectCurrent.gql b/packages/@vue/cli-ui/src/graphql/projectCurrent.gql
new file mode 100644
index 0000000000..2dcf33dee7
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/projectCurrent.gql
@@ -0,0 +1,7 @@
+#import "./projectFragment.gql"
+
+query projectCurrent {
+  projectCurrent {
+    ...project
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/projectCwdReset.gql b/packages/@vue/cli-ui/src/graphql/projectCwdReset.gql
new file mode 100644
index 0000000000..2ce5238f04
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/projectCwdReset.gql
@@ -0,0 +1,3 @@
+mutation projectCwdReset {
+  projectCwdReset
+}
diff --git a/packages/@vue/cli-ui/src/graphql/projectFragment.gql b/packages/@vue/cli-ui/src/graphql/projectFragment.gql
new file mode 100644
index 0000000000..97930761da
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/projectFragment.gql
@@ -0,0 +1,6 @@
+fragment project on Project {
+  id
+  name
+  path
+  favorite
+}
diff --git a/packages/@vue/cli-ui/src/graphql/projectImport.gql b/packages/@vue/cli-ui/src/graphql/projectImport.gql
new file mode 100644
index 0000000000..5afaf1902f
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/projectImport.gql
@@ -0,0 +1,7 @@
+#import "./projectFragment.gql"
+
+mutation projectImport ($input: ProjectImportInput!) {
+  projectImport(input: $input) {
+    ...project
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/projectOpen.gql b/packages/@vue/cli-ui/src/graphql/projectOpen.gql
new file mode 100644
index 0000000000..f4d4e006f1
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/projectOpen.gql
@@ -0,0 +1,7 @@
+#import "./projectFragment.gql"
+
+mutation projectOpen ($id: ID!) {
+  projectOpen(id: $id) {
+    ...project
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/projectPlugins.gql b/packages/@vue/cli-ui/src/graphql/projectPlugins.gql
new file mode 100644
index 0000000000..e55547ce26
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/projectPlugins.gql
@@ -0,0 +1,10 @@
+#import "./pluginFragment.gql"
+
+query projectPlugins {
+  projectCurrent {
+    id
+    plugins {
+      ...plugin
+    }
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/projectRemove.gql b/packages/@vue/cli-ui/src/graphql/projectRemove.gql
new file mode 100644
index 0000000000..bbcb8d7066
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/projectRemove.gql
@@ -0,0 +1,3 @@
+mutation projectRemove ($id: ID!) {
+  projectRemove (id: $id)
+}
diff --git a/packages/@vue/cli-ui/src/graphql/projectSetFavorite.gql b/packages/@vue/cli-ui/src/graphql/projectSetFavorite.gql
new file mode 100644
index 0000000000..0cae64d8c5
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/projectSetFavorite.gql
@@ -0,0 +1,7 @@
+#import "./projectFragment.gql"
+
+mutation projectSetFavorite ($id: ID!, $favorite: Int!) {
+  projectSetFavorite (id: $id, favorite: $favorite) {
+    ...project
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/projects.gql b/packages/@vue/cli-ui/src/graphql/projects.gql
new file mode 100644
index 0000000000..f679579a51
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/projects.gql
@@ -0,0 +1,7 @@
+#import "./projectFragment.gql"
+
+query projects {
+  projects {
+    ...project
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/promptAnswer.gql b/packages/@vue/cli-ui/src/graphql/promptAnswer.gql
new file mode 100644
index 0000000000..bb28bbb27e
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/promptAnswer.gql
@@ -0,0 +1,7 @@
+#import "./promptFragment.gql"
+
+mutation promptAnswer ($input: PromptInput!) {
+  promptAnswer(input: $input) {
+    ...prompt
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/promptChoiceFragment.gql b/packages/@vue/cli-ui/src/graphql/promptChoiceFragment.gql
new file mode 100644
index 0000000000..f1748d6678
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/promptChoiceFragment.gql
@@ -0,0 +1,7 @@
+fragment promptChoice on PromptChoice {
+  value
+  name
+  checked
+  disabled
+  isDefault
+}
diff --git a/packages/@vue/cli-ui/src/graphql/promptErrorFragment.gql b/packages/@vue/cli-ui/src/graphql/promptErrorFragment.gql
new file mode 100644
index 0000000000..719d472cc7
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/promptErrorFragment.gql
@@ -0,0 +1,4 @@
+fragment promptError on PromptError {
+  message
+  link
+}
diff --git a/packages/@vue/cli-ui/src/graphql/promptFragment.gql b/packages/@vue/cli-ui/src/graphql/promptFragment.gql
new file mode 100644
index 0000000000..9ebf51dda5
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/promptFragment.gql
@@ -0,0 +1,22 @@
+#import "./promptChoiceFragment.gql"
+#import "./promptErrorFragment.gql"
+
+fragment prompt on Prompt {
+  id
+  type
+  visible
+  enabled
+  name
+  message
+  group
+  description
+  link
+  choices {
+    ...promptChoice
+  }
+  value
+  valueChanged
+  error {
+    ...promptError
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/sharedData.gql b/packages/@vue/cli-ui/src/graphql/sharedData.gql
new file mode 100644
index 0000000000..afcad6e3bc
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/sharedData.gql
@@ -0,0 +1,7 @@
+#import "./sharedDataFragment.gql"
+
+query sharedData ($id: ID!) {
+  sharedData (id: $id) {
+    ...sharedData
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/sharedDataFragment.gql b/packages/@vue/cli-ui/src/graphql/sharedDataFragment.gql
new file mode 100644
index 0000000000..fd434a03a5
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/sharedDataFragment.gql
@@ -0,0 +1,4 @@
+fragment sharedData on SharedData {
+  id
+  value
+}
diff --git a/packages/@vue/cli-ui/src/graphql/sharedDataUpdate.gql b/packages/@vue/cli-ui/src/graphql/sharedDataUpdate.gql
new file mode 100644
index 0000000000..5bdac7f9a9
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/sharedDataUpdate.gql
@@ -0,0 +1,7 @@
+#import "./sharedDataFragment.gql"
+
+mutation sharedDataUpdate ($id: ID!, $value: JSON!) {
+  sharedDataUpdate (id: $id, value: $value) {
+    ...sharedData
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/sharedDataUpdated.gql b/packages/@vue/cli-ui/src/graphql/sharedDataUpdated.gql
new file mode 100644
index 0000000000..c6683fcc37
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/sharedDataUpdated.gql
@@ -0,0 +1,7 @@
+#import "./sharedDataFragment.gql"
+
+subscription sharedDataUpdated ($id: ID!) {
+  sharedDataUpdated (id: $id) {
+    ...sharedData
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/task.gql b/packages/@vue/cli-ui/src/graphql/task.gql
new file mode 100644
index 0000000000..0b9fae37ee
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/task.gql
@@ -0,0 +1,19 @@
+#import "./taskFragment.gql"
+#import "./promptFragment.gql"
+
+query task ($id: ID!) {
+  task (id: $id) {
+    ...task
+    link
+    prompts {
+      ...prompt
+    }
+    views {
+      id
+      label
+      icon
+      component
+    }
+    defaultView
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/taskChanged.gql b/packages/@vue/cli-ui/src/graphql/taskChanged.gql
new file mode 100644
index 0000000000..d330e9283a
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/taskChanged.gql
@@ -0,0 +1,7 @@
+#import "./taskFragment.gql"
+
+subscription taskChanged {
+  taskChanged {
+    ...task
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/taskFragment.gql b/packages/@vue/cli-ui/src/graphql/taskFragment.gql
new file mode 100644
index 0000000000..43bb3416bd
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/taskFragment.gql
@@ -0,0 +1,7 @@
+fragment task on Task {
+  id
+  status
+  name
+  command
+  description
+}
diff --git a/packages/@vue/cli-ui/src/graphql/taskLogAdded.gql b/packages/@vue/cli-ui/src/graphql/taskLogAdded.gql
new file mode 100644
index 0000000000..181c8d0da4
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/taskLogAdded.gql
@@ -0,0 +1,7 @@
+#import "./taskLogFragment.gql"
+
+subscription taskLogAdded ($id: ID!) {
+  taskLogAdded (id: $id) {
+    ...taskLog
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/taskLogFragment.gql b/packages/@vue/cli-ui/src/graphql/taskLogFragment.gql
new file mode 100644
index 0000000000..0c3b251053
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/taskLogFragment.gql
@@ -0,0 +1,5 @@
+fragment taskLog on TaskLog {
+  taskId
+  type
+  text
+}
diff --git a/packages/@vue/cli-ui/src/graphql/taskLogs.gql b/packages/@vue/cli-ui/src/graphql/taskLogs.gql
new file mode 100644
index 0000000000..a2f6aa44e9
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/taskLogs.gql
@@ -0,0 +1,10 @@
+#import "./taskLogFragment.gql"
+
+query taskLogs ($id: ID!) {
+  taskLogs: task(id: $id) {
+    id
+    logs {
+      ...taskLog
+    }
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/taskLogsClear.gql b/packages/@vue/cli-ui/src/graphql/taskLogsClear.gql
new file mode 100644
index 0000000000..4531ea8fef
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/taskLogsClear.gql
@@ -0,0 +1,7 @@
+#import "./taskFragment.gql"
+
+mutation taskLogsClear ($id: ID!) {
+  taskLogsClear (id: $id) {
+    ...task
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/taskRun.gql b/packages/@vue/cli-ui/src/graphql/taskRun.gql
new file mode 100644
index 0000000000..18688b0c36
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/taskRun.gql
@@ -0,0 +1,7 @@
+#import "./taskFragment.gql"
+
+mutation taskRun ($id: ID!) {
+  taskRun (id: $id) {
+    ...task
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/taskStop.gql b/packages/@vue/cli-ui/src/graphql/taskStop.gql
new file mode 100644
index 0000000000..3cc2e7ae85
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/taskStop.gql
@@ -0,0 +1,7 @@
+#import "./taskFragment.gql"
+
+mutation taskStop ($id: ID!) {
+  taskStop (id: $id) {
+    ...task
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/tasks.gql b/packages/@vue/cli-ui/src/graphql/tasks.gql
new file mode 100644
index 0000000000..a503157836
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/tasks.gql
@@ -0,0 +1,7 @@
+#import "./taskFragment.gql"
+
+query tasks {
+  tasks {
+    ...task
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/versionFragment.gql b/packages/@vue/cli-ui/src/graphql/versionFragment.gql
new file mode 100644
index 0000000000..2ef072d187
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/versionFragment.gql
@@ -0,0 +1,6 @@
+fragment version on Version {
+  current
+  latest
+  wanted
+  range
+}
diff --git a/packages/@vue/cli-ui/src/graphql/viewAdded.gql b/packages/@vue/cli-ui/src/graphql/viewAdded.gql
new file mode 100644
index 0000000000..07dd445a71
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/viewAdded.gql
@@ -0,0 +1,7 @@
+#import "./viewFragment.gql"
+
+subscription viewAdded {
+  viewAdded {
+    ...view
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/viewChanged.gql b/packages/@vue/cli-ui/src/graphql/viewChanged.gql
new file mode 100644
index 0000000000..74718653bc
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/viewChanged.gql
@@ -0,0 +1,7 @@
+#import "./viewFragment.gql"
+
+subscription viewChanged {
+  viewChanged {
+    ...view
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/viewFragment.gql b/packages/@vue/cli-ui/src/graphql/viewFragment.gql
new file mode 100644
index 0000000000..5e536d45bd
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/viewFragment.gql
@@ -0,0 +1,14 @@
+fragment view on View {
+  id
+  name
+  icon
+  tooltip
+  badges {
+    id
+    type
+    count
+    label
+    priority
+    hidden
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/viewRemoved.gql b/packages/@vue/cli-ui/src/graphql/viewRemoved.gql
new file mode 100644
index 0000000000..eda1d0ec76
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/viewRemoved.gql
@@ -0,0 +1,7 @@
+#import "./viewFragment.gql"
+
+subscription viewRemoved {
+  viewRemoved {
+    ...view
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/views.gql b/packages/@vue/cli-ui/src/graphql/views.gql
new file mode 100644
index 0000000000..0030408b3c
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/views.gql
@@ -0,0 +1,7 @@
+#import "./viewFragment.gql"
+
+query views {
+  views {
+    ...view
+  }
+}
diff --git a/packages/@vue/cli-ui/src/i18n.js b/packages/@vue/cli-ui/src/i18n.js
new file mode 100644
index 0000000000..3f6581c2b3
--- /dev/null
+++ b/packages/@vue/cli-ui/src/i18n.js
@@ -0,0 +1,59 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import deepmerge from 'deepmerge'
+
+Vue.use(VueI18n)
+
+function detectLanguage () {
+  try {
+    const lang = (window.navigator.languages && window.navigator.languages[0]) ||
+      window.navigator.language ||
+      window.navigator.userLanguage
+    return lang.substr(0, 2)
+  } catch (e) {
+    return undefined
+  }
+}
+
+async function autoInstallLocale (lang) {
+  try {
+    let response = await fetch(`https://unpkg.com/vue-cli-locale-${lang}`)
+    if (response.ok) {
+      // Redirect
+      const location = response.headers.get('location')
+      if (location) {
+        response = await fetch(`https://unpkg.com${location}`)
+      }
+      const data = await response.json()
+      mergeLocale(lang, data)
+    }
+  } catch (e) {}
+}
+
+async function autoDetect () {
+  const lang = detectLanguage()
+  if (lang !== 'en') {
+    await autoInstallLocale(lang)
+    i18n.locale = lang
+    // eslint-disable-next-line no-console
+    console.log(`[UI] Automatically loaded ${lang} locale`)
+  }
+}
+
+const i18n = new VueI18n({
+  locale: 'en',
+  fallbackLocale: 'en',
+  messages: {
+    en: {}
+  },
+  silentTranslationWarn: process.env.NODE_ENV !== 'production'
+})
+
+autoDetect()
+
+export function mergeLocale (lang, messages) {
+  const newData = deepmerge(i18n.getLocaleMessage(lang), messages)
+  i18n.setLocaleMessage(lang, newData)
+}
+
+export default i18n
diff --git a/packages/@vue/cli-ui/src/main.js b/packages/@vue/cli-ui/src/main.js
new file mode 100644
index 0000000000..80f26b8866
--- /dev/null
+++ b/packages/@vue/cli-ui/src/main.js
@@ -0,0 +1,68 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import i18n from './i18n'
+import { apolloProvider } from './vue-apollo'
+import VueUi from '@vue/ui'
+import InstantSearch from 'vue-instantsearch'
+import VueMeta from 'vue-meta'
+import * as Filters from './filters'
+import './register-components'
+import ClientAddonApi from './util/ClientAddonApi'
+import Responsive from './util/responsive'
+import SharedData from './util/shared-data'
+import PluginAction from './util/plugin-action'
+import gql from 'graphql-tag'
+
+window.gql = gql
+
+Vue.use(InstantSearch)
+Vue.use(VueMeta)
+Vue.use(Responsive, {
+  computed: {
+    mobile () {
+      return this.width <= 768
+    },
+    tablet () {
+      return this.width <= 900
+    },
+    desktop () {
+      return !this.tablet
+    },
+    wide () {
+      return this.width >= 1600
+    }
+  }
+})
+Vue.use(VueUi)
+Vue.use(SharedData)
+Vue.use(PluginAction)
+
+for (const key in Filters) {
+  Vue.filter(key, Filters[key])
+}
+
+Vue.config.productionTip = false
+
+// For client addons
+window.Vue = Vue
+window.ClientAddonApi = new ClientAddonApi()
+
+const app = new Vue({
+  provide: apolloProvider.provide(),
+  router,
+  i18n,
+  ...App
+})
+
+async function start () {
+  app.$mount('#app')
+
+  // Restore last route
+  const lastRoute = localStorage.getItem('vue-cli-ui.lastRoute')
+  if (lastRoute) {
+    router.push(lastRoute)
+  }
+}
+
+start()
diff --git a/packages/@vue/cli-ui/src/mixins/PageVisibility.js b/packages/@vue/cli-ui/src/mixins/PageVisibility.js
new file mode 100644
index 0000000000..65c8a821ef
--- /dev/null
+++ b/packages/@vue/cli-ui/src/mixins/PageVisibility.js
@@ -0,0 +1,33 @@
+import Vue from 'vue'
+
+const vm = new Vue({
+  data: {
+    documentVisible: !document.hidden,
+    documentFocus: document.hasFocus()
+  }
+})
+
+document.addEventListener('visibilitychange', () => {
+  vm.documentVisible = !document.hidden
+}, false)
+
+window.addEventListener('focus', () => {
+  vm.documentFocus = true
+})
+
+window.addEventListener('blur', () => {
+  vm.documentFocus = false
+})
+
+// @vue/component
+export default {
+  computed: {
+    documentVisible () {
+      return vm.documentVisible
+    },
+
+    documentFocus () {
+      return vm.documentFocus
+    }
+  }
+}
diff --git a/packages/@vue/cli-ui/src/mixins/Progress.js b/packages/@vue/cli-ui/src/mixins/Progress.js
new file mode 100644
index 0000000000..264dc74338
--- /dev/null
+++ b/packages/@vue/cli-ui/src/mixins/Progress.js
@@ -0,0 +1,84 @@
+import PROGRESS from '../graphql/progress.gql'
+import PROGRESS_CHANGED from '../graphql/progressChanged.gql'
+import PROGRESS_REMOVED from '../graphql/progressRemoved.gql'
+
+// @vue/component
+export default {
+  props: {
+    progressId: {
+      type: String,
+      required: true
+    }
+  },
+
+  data () {
+    return {
+      progress: null
+    }
+  },
+
+  apollo: {
+    progress: {
+      query: PROGRESS,
+      variables () {
+        return {
+          id: this.progressId
+        }
+      },
+      fetchPolicy: 'network-only',
+      subscribeToMore: [
+        {
+          document: PROGRESS_CHANGED,
+          variables () {
+            return {
+              id: this.progressId
+            }
+          },
+          updateQuery: (previousResult, { subscriptionData }) => {
+            return {
+              progress: subscriptionData.data.progressChanged
+            }
+          }
+        },
+        {
+          document: PROGRESS_REMOVED,
+          variables () {
+            return {
+              id: this.progressId
+            }
+          },
+          updateQuery: () => {
+            return {
+              progress: null
+            }
+          }
+        }
+      ]
+    }
+  },
+
+  computed: {
+    loading () {
+      return this.progress && !this.progress.error
+    },
+
+    statusMessage () {
+      if (!this.progress) return null
+
+      const { status } = this.progress
+      let message
+      if (status) {
+        const values = {}
+        if (this.progress.args) {
+          for (let i = 0, l = this.progress.args.length; i < l; i++) {
+            values[`arg${i}`] = this.progress.args[i]
+          }
+        }
+        const key = `mixins.progress.${status}`
+        message = this.$t(key, values)
+        message = (message !== key && message)
+      }
+      return message || status || ''
+    }
+  }
+}
diff --git a/packages/@vue/cli-ui/src/mixins/Prompts.js b/packages/@vue/cli-ui/src/mixins/Prompts.js
new file mode 100644
index 0000000000..248d2127c6
--- /dev/null
+++ b/packages/@vue/cli-ui/src/mixins/Prompts.js
@@ -0,0 +1,58 @@
+import PROMPT_ANSWER from '../graphql/promptAnswer.gql'
+
+export default function ({
+  field,
+  query
+}) {
+  // @vue/component
+  return {
+    computed: {
+      configurationValid () {
+        return this.visiblePrompts.filter(
+          p =>
+            p.error ||
+            p.value === null ||
+            JSON.parse(p.value) === ''
+        ).length === 0
+      },
+
+      hasPromptsChanged () {
+        return !!this.visiblePrompts.find(
+          prompt => prompt.valueChanged
+        )
+      },
+
+      visiblePrompts () {
+        if (!this[field]) {
+          return []
+        }
+        return this[field].prompts.filter(
+          p => p.visible
+        )
+      }
+    },
+
+    methods: {
+      async answerPrompt ({ prompt, value }) {
+        await this.$apollo.mutate({
+          mutation: PROMPT_ANSWER,
+          variables: {
+            input: {
+              id: prompt.id,
+              value: JSON.stringify(value)
+            }
+          },
+          update: (store, { data: { promptAnswer } }) => {
+            let variables = this.$apollo.queries[field].options.variables || undefined
+            if (typeof variables === 'function') {
+              variables = variables.call(this)
+            }
+            const data = store.readQuery({ query, variables })
+            data[field].prompts = promptAnswer
+            store.writeQuery({ query, variables, data })
+          }
+        })
+      }
+    }
+  }
+}
diff --git a/packages/@vue/cli-ui/src/mixins/RestoreRoute.js b/packages/@vue/cli-ui/src/mixins/RestoreRoute.js
new file mode 100644
index 0000000000..72ca885456
--- /dev/null
+++ b/packages/@vue/cli-ui/src/mixins/RestoreRoute.js
@@ -0,0 +1,21 @@
+export default function () {
+  let lastRoute
+
+  // @vue/component
+  return {
+    beforeRouteEnter (to, from, next) {
+      if (lastRoute) {
+        const { name, params, query } = lastRoute
+        next({ name, params, query })
+        lastRoute = null
+      } else {
+        next()
+      }
+    },
+
+    beforeRouteLeave (to, from, next) {
+      lastRoute = from
+      next()
+    }
+  }
+}
diff --git a/packages/@vue/cli-ui/src/register-components.js b/packages/@vue/cli-ui/src/register-components.js
new file mode 100644
index 0000000000..bf3ce71074
--- /dev/null
+++ b/packages/@vue/cli-ui/src/register-components.js
@@ -0,0 +1,35 @@
+/**
+ * We register all the components so future cli-ui plugins
+ * could use them directly
+ */
+
+import Vue from 'vue'
+
+// To extract the component name
+const nameReg = /([a-z0-9]+)\./i
+
+function registerGlobalComponents (components) {
+  components.keys().forEach(key => {
+    const name = key.match(nameReg)[1]
+    Vue.component(name, {
+      name,
+      ...components(key).default
+    })
+  })
+}
+
+// Require all the components that start with 'BaseXXX.vue'
+let components = require.context('./components', true, /[a-z0-9]+\.(jsx?|vue)$/i)
+registerGlobalComponents(components)
+
+// Webpack HMR
+if (module.hot) {
+  module.hot.accept(components.id, () => {
+    try {
+      const components = require.context('./components', true, /[a-z0-9]+\.(jsx?|vue)$/i)
+      registerGlobalComponents(components)
+    } catch (e) {
+      location.reload()
+    }
+  })
+}
diff --git a/packages/@vue/cli-ui/src/router.js b/packages/@vue/cli-ui/src/router.js
new file mode 100644
index 0000000000..b7f1160e30
--- /dev/null
+++ b/packages/@vue/cli-ui/src/router.js
@@ -0,0 +1,137 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import { apolloClient } from './vue-apollo'
+
+import ProjectHome from './views/ProjectHome.vue'
+import ProjectPlugins from './views/ProjectPlugins.vue'
+import ProjectPluginsAdd from './views/ProjectPluginsAdd.vue'
+import ProjectConfigurations from './views/ProjectConfigurations.vue'
+import ProjectConfigurationDetails from './views/ProjectConfigurationDetails.vue'
+import ProjectTasks from './views/ProjectTasks.vue'
+import ProjectTaskDetails from './views/ProjectTaskDetails.vue'
+import ProjectSelect from './views/ProjectSelect.vue'
+import ProjectCreate from './views/ProjectCreate.vue'
+import FileDiffView from './components/FileDiffView.vue'
+import About from './views/About.vue'
+import NotFound from './views/NotFound.vue'
+
+import PROJECT_CURRENT from './graphql/projectCurrent.gql'
+
+Vue.use(Router)
+
+const router = new Router({
+  mode: 'history',
+  routes: [
+    {
+      path: '/',
+      component: ProjectHome,
+      meta: {
+        needProject: true,
+        restore: true
+      },
+      children: [
+        {
+          path: '',
+          name: 'project-home',
+          redirect: { name: 'project-plugins' }
+        },
+        {
+          path: 'plugins',
+          name: 'project-plugins',
+          component: ProjectPlugins
+        },
+        {
+          path: 'plugins/add',
+          name: 'project-plugins-add',
+          component: ProjectPluginsAdd
+        },
+        {
+          path: 'configuration',
+          name: 'project-configurations',
+          component: ProjectConfigurations,
+          children: [
+            {
+              path: ':id',
+              name: 'project-configuration-details',
+              component: ProjectConfigurationDetails,
+              props: true
+            }
+          ]
+        },
+        {
+          path: 'tasks',
+          name: 'project-tasks',
+          component: ProjectTasks,
+          children: [
+            {
+              path: ':id',
+              name: 'project-task-details',
+              component: ProjectTaskDetails,
+              props: true
+            }
+          ]
+        }
+      ]
+    },
+    {
+      path: '/project/select',
+      name: 'project-select',
+      component: ProjectSelect,
+      meta: {
+        restore: true
+      }
+    },
+    {
+      path: '/project/create',
+      name: 'project-create',
+      component: ProjectCreate,
+      meta: {
+        restore: true
+      }
+    },
+    {
+      path: '/file-diff',
+      name: 'file-diff',
+      component: FileDiffView
+    },
+    {
+      path: '/about',
+      name: 'about',
+      component: About
+    },
+    {
+      path: '/home',
+      name: 'home',
+      redirect: { name: 'project-home' }
+    },
+    {
+      path: '*',
+      name: 'not-found',
+      component: NotFound
+    }
+  ]
+})
+
+router.beforeEach(async (to, from, next) => {
+  if (to.matched.some(m => m.meta.needProject)) {
+    const result = await apolloClient.query({
+      query: PROJECT_CURRENT,
+      fetchPolicy: 'network-only'
+    })
+    if (!result.data.projectCurrent) {
+      next({ name: 'project-select' })
+      return
+    }
+  }
+  next()
+})
+
+router.afterEach((to, from) => {
+  if (to.matched.some(m => m.meta.restore)) {
+    localStorage.setItem('vue-cli-ui.lastRoute', to.fullPath)
+  } else {
+    localStorage.removeItem('vue-cli-ui.lastRoute')
+  }
+})
+
+export default router
diff --git a/packages/@vue/cli-ui/src/style/colors.styl b/packages/@vue/cli-ui/src/style/colors.styl
new file mode 100644
index 0000000000..9625d563e2
--- /dev/null
+++ b/packages/@vue/cli-ui/src/style/colors.styl
@@ -0,0 +1,2 @@
+$color-background-light = lighten($vue-ui-color-light-neutral, 80%)
+$color-text-light = lighten($vue-ui-color-dark, 40%)
diff --git a/packages/@vue/cli-ui/src/style/imports.styl b/packages/@vue/cli-ui/src/style/imports.styl
new file mode 100644
index 0000000000..29baddd710
--- /dev/null
+++ b/packages/@vue/cli-ui/src/style/imports.styl
@@ -0,0 +1,4 @@
+@import "~@vue/ui/src/style/imports"
+@import "colors"
+@import "vars"
+@import "mixins"
diff --git a/packages/@vue/cli-ui/src/style/main.styl b/packages/@vue/cli-ui/src/style/main.styl
new file mode 100644
index 0000000000..9b7be1b228
--- /dev/null
+++ b/packages/@vue/cli-ui/src/style/main.styl
@@ -0,0 +1,135 @@
+@import "imports"
+
+html,
+body,
+#app,
+.page
+  height 100%
+
+h2
+  line-height 32px
+
+.empty-icon
+  display block
+  margin 24px auto
+  width 48px
+  height @width
+
+.actions-bar
+  padding $padding-item
+  background $md-white
+  h-box()
+  box-center()
+  position relative
+
+  > *
+    space-between-x($padding-item)
+
+  &.space-between
+    justify-content space-between
+  &.center
+    justify-content center
+  &.start
+    justify-content flex-start
+  &.end
+    justify-content flex-end
+
+.cta-text
+  margin $padding-item
+  color $color-text-light
+  font-size 18px
+
+.list-item
+  list-item()
+
+ansi-colors('black', $vue-ui-color-dark)
+ansi-colors('red', $vue-ui-color-danger)
+ansi-colors('green', $vue-ui-color-primary)
+ansi-colors('yellow', $vue-ui-color-warning)
+ansi-colors('blue', $md-blue)
+ansi-colors('magenta', $vue-ui-color-accent)
+ansi-colors('cyan', $vue-ui-color-info)
+ansi-colors('white', $vue-ui-color-light)
+
+.vue-ui-icon.separator
+  width 6px
+  height @width
+  h-box()
+  box-center()
+  margin $padding-item
+  svg
+    fill rgba($vue-ui-color-dark, .2)
+
+.ais-index
+  height 100%
+  v-box()
+  align-items stretch
+
+.ais-results
+  flex 100% 1 1
+  height 0
+  overflow-x hidden
+  overflow-y auto
+  margin $padding-item 0
+
+.ais-no-results
+  margin-top 42px
+
+.ais-highlight
+  em
+    font-style normal
+    background lighten($vue-ui-color-primary, 80%)
+    color darken($vue-ui-color-primary, 10%)
+    padding 0 2px
+    border-radius $br
+
+.ais-logo
+  max-width 150px
+
+.no-padding-x
+  padding-left 0
+  padding-right 0
+.no-padding-y
+  padding-top 0
+  padding-bottom 0
+.no-margin-x
+  margin-left 0
+  margin-right 0
+.no-margin-y
+  margin-top 0
+  margin-bottom 0
+
+.fill-height
+  height 100%
+
+.blank-icon
+  width 24px
+  height @width
+  display block
+  margin auto
+  svg
+    fill rgba($vue-ui-color-dark, .3)
+
+.pane-toolbar
+  h-box()
+  align-items center
+  padding 6px 6px 6px $padding-item
+  > :not(.separator)
+    space-between-x(6px)
+  > * + .separator
+    margin-left 6px
+  .title
+    flex 100% 1 1
+    width 0
+    ellipsis()
+
+  > .vue-ui-switch,
+  > .vue-ui-button:not(.icon-button),
+  .dropdown-trigger > .vue-ui-button:not(.icon-button)
+    padding 0 8px
+
+  > .vue-ui-switch
+    font-size 14px
+    &:not(.selected)
+      .wrapper
+        background rgba($vue-ui-color-dark, .2)
diff --git a/packages/@vue/cli-ui/src/style/mixins.styl b/packages/@vue/cli-ui/src/style/mixins.styl
new file mode 100644
index 0000000000..3e1d2e43c8
--- /dev/null
+++ b/packages/@vue/cli-ui/src/style/mixins.styl
@@ -0,0 +1,20 @@
+list-item()
+  user-select none
+  cursor pointer
+
+  &.selected
+    background rgba($vue-ui-color-primary, .05)
+
+  &:hover
+    background rgba($vue-ui-color-primary, .1)
+
+
+ansi-colors($name, $color)
+  .ansi-{$name}-fg
+    color $color
+  .ansi-{$name}-bg
+    background $color
+  .ansi-bright-{$name}-fg
+    color lighten($color, 10%)
+  .ansi-bright-{$name}-bg
+    background lighten($color, 10%)
diff --git a/packages/@vue/cli-ui/src/style/vars.styl b/packages/@vue/cli-ui/src/style/vars.styl
new file mode 100644
index 0000000000..0dc95ec2cc
--- /dev/null
+++ b/packages/@vue/cli-ui/src/style/vars.styl
@@ -0,0 +1,2 @@
+$padding-item = 12px
+$font-mono = 'Roboto Mono', monospace
diff --git a/packages/@vue/cli-ui/src/util/ClientAddonApi.js b/packages/@vue/cli-ui/src/util/ClientAddonApi.js
new file mode 100644
index 0000000000..341a7fdba8
--- /dev/null
+++ b/packages/@vue/cli-ui/src/util/ClientAddonApi.js
@@ -0,0 +1,97 @@
+import Vue from 'vue'
+import router from '../router'
+import { mergeLocale } from '../i18n'
+import ProjectHome from '../views/ProjectHome.vue'
+
+export default class ClientAddonApi {
+  constructor () {
+    this.components = new Map()
+    this.componentListeners = new Map()
+  }
+
+  /**
+   * Register a component globally.
+   *
+   * @param {string} id Component id
+   * @param {object} definition Component definition
+   */
+  component (id, definition) {
+    this.components.set(id, definition)
+    const componentId = toComponentId(id)
+    Vue.component(componentId, definition)
+    // eslint-disable-next-line no-console
+    console.log(`[ClientAddonApi] Registered ${componentId} component`)
+    // Call listeners
+    const listeners = this.componentListeners.get(id)
+    if (listeners) {
+      listeners.forEach(l => l(definition))
+      this.componentListeners.delete(id)
+    }
+  }
+
+  /**
+   * Add routes to vue-router under a /addon/<id> parent route.
+   * For example, addRoutes('foo', [ { path: '' }, { path: 'bar' } ])
+   * will add the /addon/foo/ and the /addon/foo/bar routes to vue-router.
+   *
+   * @param {string} id Routes pack id (generally the vue-cli plugin id)
+   * @param {any} routes vue-router route definitions
+   */
+  addRoutes (id, routes) {
+    router.addRoutes([
+      {
+        path: `/addon/${id}`,
+        component: ProjectHome,
+        meta: {
+          needProject: true,
+          restore: true
+        },
+        children: routes
+      }
+    ])
+    // eslint-disable-next-line no-console
+    console.log(`[ClientAddonApi] Registered new routes under the /addon/${id} route`)
+  }
+
+  /**
+   * Merge new strings into the specified lang translations (using vue-i18n).
+   *
+   * @param {string} lang Locale to merge to (ex: 'en', 'fr'...)
+   * @param {object} strings A vue-i18n strings object containing the translations
+   */
+  addLocalization (lang, strings) {
+    mergeLocale(lang, strings)
+    // eslint-disable-next-line no-console
+    console.log(`[ClientAddonApi] Registered new strings for locale ${lang}`)
+  }
+
+  /* Internal */
+
+  getComponent (id) {
+    return this.components.get(id)
+  }
+
+  listenForComponent (id, cb) {
+    let listeners = this.componentListeners.get(id)
+    if (!listeners) {
+      listeners = []
+      this.componentListeners.set(id, listeners)
+    }
+    listeners.push(cb)
+  }
+
+  awaitComponent (id) {
+    return new Promise((resolve, reject) => {
+      const result = this.getComponent(id)
+      if (result) {
+        resolve(result)
+      } else {
+        this.listenForComponent(id, resolve)
+      }
+    })
+  }
+}
+
+export function toComponentId (id) {
+  return `client-addon--${id}`
+}
diff --git a/packages/@vue/cli-ui/src/util/object.js b/packages/@vue/cli-ui/src/util/object.js
new file mode 100644
index 0000000000..2b0b71579d
--- /dev/null
+++ b/packages/@vue/cli-ui/src/util/object.js
@@ -0,0 +1,49 @@
+exports.set = function (target, path, value) {
+  const fields = path.split('.')
+  let obj = target
+  const l = fields.length
+  for (let i = 0; i < l - 1; i++) {
+    const key = fields[i]
+    if (!obj[key]) {
+      obj[key] = {}
+    }
+    obj = obj[key]
+  }
+  obj[fields[l - 1]] = value
+}
+
+exports.get = function (target, path) {
+  const fields = path.split('.')
+  let obj = target
+  const l = fields.length
+  for (let i = 0; i < l - 1; i++) {
+    const key = fields[i]
+    if (!obj[key]) {
+      return undefined
+    }
+    obj = obj[key]
+  }
+  return obj[fields[l - 1]]
+}
+
+exports.remove = function (target, path) {
+  const fields = path.split('.')
+  let obj = target
+  const l = fields.length
+  const objs = []
+  for (let i = 0; i < l - 1; i++) {
+    const key = fields[i]
+    if (!obj[key]) {
+      return
+    }
+    objs.splice(0, 0, { obj, key, value: obj[key] })
+    obj = obj[key]
+  }
+  delete obj[fields[l - 1]]
+  // Clear empty objects
+  for (const { obj, key, value } of objs) {
+    if (!Object.keys(value).length) {
+      delete obj[key]
+    }
+  }
+}
diff --git a/packages/@vue/cli-ui/src/util/plugin-action.js b/packages/@vue/cli-ui/src/util/plugin-action.js
new file mode 100644
index 0000000000..f1471ebecf
--- /dev/null
+++ b/packages/@vue/cli-ui/src/util/plugin-action.js
@@ -0,0 +1,35 @@
+import PLUGIN_ACTION_CALL from '../graphql/pluginActionCall.gql'
+import PLUGIN_ACTION_CALLED from '../graphql/pluginActionCalled.gql'
+import PLUGIN_ACTION_RESOLVED from '../graphql/pluginActionResolved.gql'
+
+let uid = 0
+
+export default {
+  install (Vue) {
+    Vue.mixin({
+      methods: {
+        $callPluginAction (id, params) {
+          return this.$apollo.mutate({
+            mutation: PLUGIN_ACTION_CALL,
+            variables: {
+              id,
+              params
+            }
+          })
+        },
+        $onPluginActionCalled (cb) {
+          return this.$apollo.addSmartSubscription(`plugin-action-called-${uid++}`, {
+            query: PLUGIN_ACTION_CALLED,
+            result: ({ data }) => cb(data.pluginActionCalled)
+          })
+        },
+        $onPluginActionResolved (cb) {
+          return this.$apollo.addSmartSubscription(`plugin-action-resolved-${uid++}`, {
+            query: PLUGIN_ACTION_RESOLVED,
+            result: ({ data }) => cb(data.pluginActionResolved)
+          })
+        }
+      }
+    })
+  }
+}
diff --git a/packages/@vue/cli-ui/src/util/responsive.js b/packages/@vue/cli-ui/src/util/responsive.js
new file mode 100644
index 0000000000..67ff6b2c29
--- /dev/null
+++ b/packages/@vue/cli-ui/src/util/responsive.js
@@ -0,0 +1,28 @@
+export let responsive
+
+export default {
+  install (Vue, options) {
+    const finalOptions = Object.assign({}, {
+      computed: {}
+    }, options)
+
+    responsive = new Vue({
+      data () {
+        return {
+          width: window.innerWidth,
+          height: window.innerHeight
+        }
+      },
+      computed: finalOptions.computed
+    })
+
+    Object.defineProperty(Vue.prototype, '$responsive', {
+      get: () => responsive
+    })
+
+    window.addEventListener('resize', () => {
+      responsive.width = window.innerWidth
+      responsive.height = window.innerHeight
+    })
+  }
+}
diff --git a/packages/@vue/cli-ui/src/util/route.js b/packages/@vue/cli-ui/src/util/route.js
new file mode 100644
index 0000000000..27b689771f
--- /dev/null
+++ b/packages/@vue/cli-ui/src/util/route.js
@@ -0,0 +1,60 @@
+const trailingSlashRE = /\/?$/
+
+export function isSameRoute (a, b) {
+  if (!b) {
+    return false
+  } else if (a.path && b.path) {
+    return (
+      a.path.replace(trailingSlashRE, '') === b.path.replace(trailingSlashRE, '') &&
+      a.hash === b.hash &&
+      isObjectEqual(a.query, b.query)
+    )
+  } else if (a.name && b.name) {
+    return (
+      a.name === b.name &&
+      a.hash === b.hash &&
+      isObjectEqual(a.query, b.query) &&
+      isObjectEqual(a.params, b.params)
+    )
+  } else {
+    return false
+  }
+}
+
+function isObjectEqual (a = {}, b = {}) {
+  // handle null value #1566
+  if (!a || !b) return a === b
+  const aKeys = Object.keys(a)
+  const bKeys = Object.keys(b)
+  if (aKeys.length !== bKeys.length) {
+    return false
+  }
+  return aKeys.every(key => {
+    const aVal = a[key]
+    const bVal = b[key]
+    // check nested equality
+    if (typeof aVal === 'object' && typeof bVal === 'object') {
+      return isObjectEqual(aVal, bVal)
+    }
+    return String(aVal) === String(bVal)
+  })
+}
+
+export function isIncludedRoute (current, target) {
+  return (
+    current.path.replace(trailingSlashRE, '/').indexOf(
+      target.path.replace(trailingSlashRE, '/')
+    ) === 0 &&
+    (!target.hash || current.hash === target.hash) &&
+    queryIncludes(current.query, target.query)
+  )
+}
+
+function queryIncludes (current, target) {
+  for (const key in target) {
+    if (!(key in current)) {
+      return false
+    }
+  }
+  return true
+}
diff --git a/packages/@vue/cli-ui/src/util/shared-data.js b/packages/@vue/cli-ui/src/util/shared-data.js
new file mode 100644
index 0000000000..cd2ac83fcb
--- /dev/null
+++ b/packages/@vue/cli-ui/src/util/shared-data.js
@@ -0,0 +1,128 @@
+import SHARED_DATA from '../graphql/sharedData.gql'
+import SHARED_DATA_UPDATE from '../graphql/sharedDataUpdate.gql'
+import SHARED_DATA_UPDATED from '../graphql/sharedDataUpdated.gql'
+
+function genQuery (id) {
+  return {
+    query: SHARED_DATA,
+    variables: {
+      id
+    },
+    fetchPolicy: 'cache-and-network',
+    update: ({ sharedData }) => (sharedData && sharedData.value) || undefined,
+    subscribeToMore: {
+      document: SHARED_DATA_UPDATED,
+      variables: {
+        id
+      },
+      updateQuery: (previousResult, { subscriptionData }) => {
+        return {
+          sharedData: subscriptionData.data.sharedDataUpdated
+        }
+      }
+    }
+  }
+}
+
+export default {
+  install (Vue) {
+    Vue.mixin({
+      data () {
+        return {
+          $sharedData: {}
+        }
+      },
+
+      created () {
+        const options = this.$options.sharedData
+        if (options) {
+          if (typeof options === 'function') {
+            let smartQueries
+            this.$watch(options.bind(this), result => {
+              if (smartQueries) {
+                smartQueries.forEach(s => s.destroy())
+              }
+              smartQueries = this.$syncSharedData(result)
+            }, {
+              immediate: true
+            })
+          } else {
+            this.$syncSharedData(options)
+          }
+        }
+      },
+
+      methods: {
+        async $getSharedData (id) {
+          const result = await this.$apollo.query({
+            query: SHARED_DATA,
+            variables: {
+              id
+            }
+          })
+          return result.sharedData.value
+        },
+
+        $watchSharedData (id, cb) {
+          return this.$apollo.addSmartQuery(id, {
+            ...genQuery(id),
+            manual: true,
+            result: ({ data }) => {
+              data && data.sharedData && cb(data.sharedData.value)
+            }
+          })
+        },
+
+        $setSharedData (id, value) {
+          return this.$apollo.mutate({
+            mutation: SHARED_DATA_UPDATE,
+            variables: {
+              id,
+              value
+            }
+          })
+        },
+
+        $syncSharedData (options) {
+          const smartQueries = []
+          for (const key in options) {
+            const id = options[key]
+            this.$set(this.$data.$sharedData, key, null)
+            // Proxy
+            Object.defineProperty(this, key, {
+              get: () => this.$data.$sharedData[key],
+              set: value => {
+                this.$set(this.$data.$sharedData, key, value)
+                this.$setSharedData(id, value)
+              },
+              enumerable: true,
+              configurable: true
+            })
+            const smartQuery = this.$apollo.addSmartQuery(key, {
+              ...genQuery(id),
+              update: undefined,
+              manual: true,
+              result: (result) => {
+                if (result && result.data) {
+                  const { data: { sharedData } } = result
+                  const value = (sharedData && sharedData.value) || undefined
+                  this.$set(this.$data.$sharedData, key, value)
+                }
+              }
+            })
+            smartQueries.push(smartQuery)
+          }
+          return smartQueries
+        }
+      }
+    })
+
+    window.mapSharedData = (namespace, options) => {
+      const result = {}
+      for (const key in options) {
+        result[key] = namespace + options[key]
+      }
+      return result
+    }
+  }
+}
diff --git a/packages/@vue/cli-ui/src/views/About.vue b/packages/@vue/cli-ui/src/views/About.vue
new file mode 100644
index 0000000000..6ce8e977c6
--- /dev/null
+++ b/packages/@vue/cli-ui/src/views/About.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="about page">
+    <h1>{{ $t('views.about.title') }}</h1>
+
+    <p class="description" v-html="$t('views.about.description')"/>
+
+    <blockquote class="quote" v-text="$t('views.about.quote')"/>
+
+    <p>- <a href="https://github.com/Akryum" target="_blank">Guillaume Chau</a></p>
+
+    <h2>{{ $t('views.about.links') }}</h2>
+
+    <div class="links vue-ui-grid default-gap">
+      <VueButton href="https://github.com/vuejs/vue-cli" target="_blank">Repository</VueButton>
+      <VueButton href="https://github.com/vuejs/vue-cli/tree/dev/docs#table-of-contents" target="_blank">Documentation</VueButton>
+      <VueButton href="https://vuejs.org/v2/guide/" target="_blank">Vue.js Guide</VueButton>
+      <VueButton href="https://vuejs.org/v2/api/" target="_blank">Vue.js API reference</VueButton>
+      <VueButton href="https://forum.vuejs.org/" target="_blank">Vue.js Forums</VueButton>
+      <VueButton href="https://chat.vuejs.org/" target="_blank">Vue.js Chat</VueButton>
+    </div>
+
+    <div class="actions">
+      <VueButton
+        :to="previousRoute"
+        class="primary big"
+        left-icon="arrow_back"
+        :label="$t('views.about.back')"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  metaInfo () {
+    return {
+      title: this.$t('views.about.title')
+    }
+  },
+
+  data () {
+    return {
+      previousRoute: { name: 'home' }
+    }
+  },
+
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      if (from) vm.previousRoute = from.fullPath
+    })
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.about
+  padding 42px
+  max-width 900px
+  margin 0 auto
+  box-sizing border-box
+
+  .quote
+    border-left solid 4px rgba($vue-ui-color-primary, .3)
+    margin-left 0
+    padding-left $padding-item
+    color lighten($vue-ui-color-dark, 30%)
+
+  .links
+    grid-template-columns repeat(auto-fill, 180px)
+
+  .actions
+    margin-top @padding
+    h-box()
+    box-center()
+</style>
diff --git a/packages/@vue/cli-ui/src/views/NotFound.vue b/packages/@vue/cli-ui/src/views/NotFound.vue
new file mode 100644
index 0000000000..e74105ab74
--- /dev/null
+++ b/packages/@vue/cli-ui/src/views/NotFound.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="not-found page">
+    <VueIcon icon="pets" class="huge"/>
+    <h1 class="title">View not found</h1>
+    <VueButton :to="{ name: 'home' }">Go home</VueButton>
+  </div>
+</template>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.not-found
+  v-box()
+  box-center()
+  height 100%
+
+  .title
+    margin $padding-item 0
+</style>
diff --git a/packages/@vue/cli-ui/src/views/ProjectConfigurationDetails.vue b/packages/@vue/cli-ui/src/views/ProjectConfigurationDetails.vue
new file mode 100644
index 0000000000..81e0d04e86
--- /dev/null
+++ b/packages/@vue/cli-ui/src/views/ProjectConfigurationDetails.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="project-configuration-details">
+    <div class="content">
+      <PromptsList
+        :prompts="visiblePrompts"
+        @answer="answerPrompt"
+      />
+    </div>
+
+    <div class="actions-bar space-between">
+      <VueButton
+        :disabled="!hasPromptsChanged"
+        icon-left="cancel"
+        class="big"
+        :label="$t('views.project-configuration-details.actions.cancel')"
+        @click="cancel()"
+      />
+
+      <VueButton
+        v-if="configuration && configuration.link"
+        icon-right="open_in_new"
+        class="big flat success"
+        :label="$t('views.project-configuration-details.actions.more-info')"
+        :href="configuration.link"
+        target="_blank"
+      />
+
+      <VueButton
+        :disabled="!hasPromptsChanged"
+        icon-left="save"
+        class="primary big"
+        :label="$t('views.project-configuration-details.actions.save')"
+        @click="save()"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import Prompts from '../mixins/Prompts'
+
+import CONFIGURATION from '../graphql/configuration.gql'
+import CONFIGURATION_SAVE from '../graphql/configurationSave.gql'
+import CONFIGURATION_CANCEL from '../graphql/configurationCancel.gql'
+
+export default {
+  mixins: [
+    Prompts({
+      field: 'configuration',
+      query: CONFIGURATION
+    })
+  ],
+
+  metaInfo () {
+    return {
+      title: this.configuration && `${this.configuration.name} - ${this.$t('views.project-configurations.title')}`
+    }
+  },
+
+  props: {
+    id: {
+      type: String,
+      required: true
+    }
+  },
+
+  data () {
+    return {
+      configuration: null
+    }
+  },
+
+  apollo: {
+    configuration: {
+      query: CONFIGURATION,
+      variables () {
+        return {
+          id: this.id
+        }
+      },
+      fetchPolicy: 'cache-and-network'
+    }
+  },
+
+  methods: {
+    async cancel () {
+      await this.$apollo.mutate({
+        mutation: CONFIGURATION_CANCEL,
+        variables: {
+          id: this.id
+        }
+      })
+
+      this.$apollo.queries.configuration.refetch()
+    },
+
+    async save () {
+      await this.$apollo.mutate({
+        mutation: CONFIGURATION_SAVE,
+        variables: {
+          id: this.id
+        }
+      })
+
+      this.$apollo.queries.configuration.refetch()
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.project-configuration-details
+  v-box()
+  align-items stretch
+  height 100%
+
+  .content
+    flex 100% 1 1
+    height 0
+    overflow-x hidden
+    overflow-y auto
+</style>
diff --git a/packages/@vue/cli-ui/src/views/ProjectConfigurations.vue b/packages/@vue/cli-ui/src/views/ProjectConfigurations.vue
new file mode 100644
index 0000000000..d238ba4d01
--- /dev/null
+++ b/packages/@vue/cli-ui/src/views/ProjectConfigurations.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="project-configurations page">
+    <ContentView
+      :title="$t('views.project-configurations.title')"
+      class="limit-width"
+    >
+      <ApolloQuery
+        :query="require('../graphql/configurations.gql')"
+        fetch-policy="cache-and-network"
+        class="fill-height"
+      >
+        <template slot-scope="{ result: { data, loading } }">
+          <VueLoadingIndicator
+            v-if="loading"
+            class="overlay"
+          />
+
+          <NavContent
+            v-else-if="data"
+            :items="generateItems(data.configurations)"
+            class="configurations"
+          >
+            <ConfigurationItem
+              slot-scope="{ item, selected }"
+              :configuration="item.configuration"
+              :selected="selected"
+            />
+          </NavContent>
+        </template>
+      </ApolloQuery>
+    </ContentView>
+  </div>
+</template>
+
+<script>
+import RestoreRoute from '../mixins/RestoreRoute'
+
+export default {
+  mixins: [
+    RestoreRoute()
+  ],
+
+  metaInfo () {
+    return {
+      title: this.$t('views.project-configurations.title')
+    }
+  },
+
+  methods: {
+    generateItems (configurations) {
+      return configurations.map(
+        configuration => ({
+          route: {
+            name: 'project-configuration-details',
+            params: {
+              id: configuration.id
+            }
+          },
+          configuration
+        })
+      )
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.project-configurations
+  .content-view /deep/ > .content
+    overflow-y hidden
+</style>
diff --git a/packages/@vue/cli-ui/src/views/ProjectCreate.vue b/packages/@vue/cli-ui/src/views/ProjectCreate.vue
new file mode 100644
index 0000000000..91c472dfe0
--- /dev/null
+++ b/packages/@vue/cli-ui/src/views/ProjectCreate.vue
@@ -0,0 +1,565 @@
+<template>
+  <div class="project-create page">
+    <div class="content">
+      <StepWizard
+        :title="$t('views.project-create.title')"
+        class="frame"
+      >
+        <template slot-scope="{ next, previous }">
+          <VueTab
+            id="details"
+            class="details"
+            :label="$t('views.project-create.tabs.details.title')"
+            icon="subject"
+          >
+            <div class="content vue-ui-disable-scroll">
+              <div class="project-details vue-ui-grid col-1 big-gap">
+                <VueFormField
+                  :title="$t('views.project-create.tabs.details.form.folder.label')"
+                >
+                  <VueInput
+                    v-model="formData.folder"
+                    :placeholder="$t('views.project-create.tabs.details.form.folder.placeholder')"
+                    icon-left="folder"
+                    class="big app-name"
+                  />
+
+                  <div slot="subtitle">
+                    <div class="project-path">
+                      <div class="path">
+                        <span
+                          class="cwd"
+                          v-tooltip="cwd"
+                        >
+                          {{ cwd | folder(42 - formData.folder.length) }}
+                        </span>
+                        <span class="folder">{{ formData.folder }}</span>
+                      </div>
+
+                      <VueButton
+                        icon-left="edit"
+                        class="icon-button change-folder"
+                        v-tooltip="$t('views.project-create.tabs.details.form.folder.tooltip')"
+                        :to="{
+                          name: 'project-select',
+                          query: {
+                            tab: 'create',
+                            hideTabs: true
+                          }
+                        }"
+                      />
+                    </div>
+                  </div>
+                </VueFormField>
+
+                <VueFormField
+                  :title="$t('views.project-create.tabs.details.form.manager.label')"
+                >
+                  <VueSelect
+                    v-model="formData.packageManager"
+                  >
+                    <VueSelectButton
+                      :value="undefined"
+                      :label="$t('views.project-create.tabs.details.form.manager.default')"
+                    />
+                    <VueSelectButton
+                      value="npm"
+                      label="npm"
+                    />
+                    <VueSelectButton
+                      value="yarn"
+                      label="yarn"
+                    />
+                  </VueSelect>
+                </VueFormField>
+
+                <VueFormField
+                  :title="$t('views.project-create.tabs.details.form.options.label')"
+                >
+                  <VueSwitch
+                    v-model="formData.force"
+                    class="extend-left force"
+                  >
+                    {{ $t('views.project-create.tabs.details.form.options.description') }}
+                  </VueSwitch>
+                </VueFormField>
+              </div>
+            </div>
+
+            <div class="actions-bar">
+              <VueButton
+                icon-left="close"
+                :label="$t('views.project-create.tabs.details.buttons.cancel')"
+                class="big close"
+                @click="showCancel = true"
+              />
+
+              <VueButton
+                icon-right="arrow_forward"
+                :label="$t('views.project-create.tabs.details.buttons.next')"
+                class="big primary next"
+                :disabled="!detailsValid"
+                @click="next()"
+              />
+            </div>
+          </VueTab>
+
+          <VueTab
+            id="presets"
+            class="presets"
+            :label="$t('views.project-create.tabs.presets.title')"
+            icon="check_circle"
+            :disabled="!detailsValid"
+            lazy
+          >
+            <div class="content vue-ui-disable-scroll">
+              <div class="vue-ui-text info banner">
+                <VueIcon icon="info" class="big"/>
+                <span>{{ $t('views.project-create.tabs.presets.description') }}</span>
+              </div>
+
+              <div class="cta-text">
+                {{ $t('views.project-create.tabs.presets.select') }}
+              </div>
+
+              <template v-if="projectCreation">
+                <ProjectPresetItem
+                  v-for="preset of projectCreation.presets"
+                  :key="preset.id"
+                  :preset="preset"
+                  :selected="formData.selectedPreset === preset.id"
+                  @click.native="selectPreset(preset.id)"
+                />
+              </template>
+
+              <ProjectPresetItem
+                :preset="remotePresetInfo"
+                :selected="formData.selectedPreset === 'remote'"
+                @click.native="selectPreset('remote')"
+              />
+            </div>
+
+            <div class="actions-bar">
+              <VueButton
+                icon-left="arrow_back"
+                :label="$t('views.project-create.tabs.presets.buttons.previous')"
+                class="big previous"
+                @click="previous()"
+              />
+
+              <VueButton
+                v-if="manual"
+                icon-right="arrow_forward"
+                :label="$t('views.project-create.tabs.presets.buttons.next')"
+                class="big primary next"
+                :disabled="!presetValid"
+                @click="next()"
+              />
+              <VueButton
+                v-else
+                icon-left="done"
+                :label="$t('views.project-create.tabs.presets.buttons.create')"
+                class="big primary next"
+                @click="createWithoutSaving()"
+              />
+            </div>
+          </VueTab>
+
+          <VueTab
+            id="features"
+            class="features"
+            :label="$t('views.project-create.tabs.features.title')"
+            icon="device_hub"
+            :disabled="!detailsValid || !presetValid || !manual"
+            lazy
+          >
+            <div class="content vue-ui-disable-scroll">
+              <div class="vue-ui-text info banner">
+                <VueIcon icon="info" class="big"/>
+                <span>{{ $t('views.project-create.tabs.features.description') }}</span>
+              </div>
+
+              <div class="cta-text">
+                {{ $t('views.project-create.tabs.features.enable') }}
+              </div>
+
+              <template v-if="projectCreation">
+                <ProjectFeatureItem
+                  v-for="feature of projectCreation.features"
+                  :key="feature.id"
+                  :feature="feature"
+                  @click.native="toggleFeature(feature)"
+                />
+              </template>
+            </div>
+
+            <div class="actions-bar">
+              <VueButton
+                icon-left="arrow_back"
+                :label="$t('views.project-create.tabs.features.buttons.previous')"
+                class="big previous"
+                @click="previous()"
+              />
+
+              <VueButton
+                v-if="visiblePrompts.length"
+                icon-right="arrow_forward"
+                :label="$t('views.project-create.tabs.features.buttons.next')"
+                class="big primary next"
+                @click="next()"
+              />
+              <VueButton
+                v-else
+                icon-left="done"
+                :label="$t('views.project-create.tabs.features.buttons.create')"
+                class="big primary next"
+                @click="showSavePreset = true"
+              />
+            </div>
+          </VueTab>
+
+          <!-- <VueTab
+            id="plugins"
+            label="Plugins"
+            icon="widgets"
+            :disabled="!detailsValid || !presetValid"
+            lazy
+          >
+            <div class="content vue-ui-disable-scroll">
+
+            </div>
+
+            <div class="actions-bar">
+              <VueButton
+                icon-left="arrow_back"
+                label="Previous"
+                class="big"
+                @click="previous()"
+              />
+
+              <VueButton
+                icon-right="arrow_forward"
+                label="Next"
+                class="big primary"
+                @click="next()"
+              />
+            </div>
+          </VueTab> -->
+
+          <VueTab
+            id="config"
+            class="config"
+            :label="$t('views.project-create.tabs.configuration.title')"
+            icon="settings_applications"
+            :disabled="!detailsValid || !presetValid || !manual || !visiblePrompts.length"
+            lazy
+          >
+            <div class="content vue-ui-disable-scroll">
+              <PromptsList
+                :prompts="visiblePrompts"
+                @answer="answerPrompt"
+              />
+            </div>
+
+            <div class="actions-bar">
+              <VueButton
+                icon-left="arrow_back"
+                :label="$t('views.project-create.tabs.configuration.buttons.previous')"
+                class="big previous"
+                @click="previous()"
+              />
+
+              <VueButton
+                icon-left="done"
+                :label="$t('views.project-create.tabs.configuration.buttons.create')"
+                class="big primary next"
+                :disabled="!configurationValid"
+                @click="showSavePreset = true"
+              />
+            </div>
+          </VueTab>
+        </template>
+      </StepWizard>
+    </div>
+
+    <VueModal
+      v-if="showRemotePreset"
+      :title="$t('views.project-create.tabs.presets.modal.title')"
+      class="medium"
+      @close="showRemotePreset = false"
+    >
+      <div class="default-body">
+        <div class="vue-ui-empty">
+          <VueIcon icon="cake" class="large"/>
+          <div>
+            {{ $t('views.project-create.tabs.presets.modal.body') }}
+          </div>
+        </div>
+      </div>
+    </VueModal>
+
+    <VueModal
+      v-if="showCancel"
+      :title="$t('views.project-create.tabs.details.modal.title')"
+      class="small"
+      @close="showCancel = false"
+    >
+      <div class="default-body">
+        {{ $t('views.project-create.tabs.details.modal.body') }}
+      </div>
+
+      <div slot="footer" class="actions space-between">
+        <VueButton
+          :label="$t('views.project-create.tabs.details.modal.buttons.back')"
+          class="flat"
+          @click="showCancel = false"
+        />
+
+        <VueButton
+          :to="{ name: 'project-select' }"
+          :label="$t('views.project-create.tabs.details.modal.buttons.clear')"
+          icon-left="delete_forever"
+          class="danger"
+          @click="reset()"
+        />
+      </div>
+    </VueModal>
+
+    <VueModal
+      v-if="showSavePreset"
+      :title="$t('views.project-create.tabs.configuration.modal.title')"
+      class="medium save-preset-modal"
+      @close="showSavePreset = false"
+    >
+      <div class="default-body">
+        <VueFormField
+          :title="$t('views.project-create.tabs.configuration.modal.body.title')"
+          :subtitle="$t('views.project-create.tabs.configuration.modal.body.subtitle')"
+        >
+          <VueInput
+            v-model="formData.save"
+            icon-left="local_offer"
+          />
+        </VueFormField>
+      </div>
+
+      <div slot="footer" class="actions end">
+        <VueButton
+          :label="$t('views.project-create.tabs.configuration.modal.buttons.cancel')"
+          class="flat close"
+          @click="showSavePreset = false"
+        />
+
+        <div class="vue-ui-spacer"/>
+
+        <VueButton
+          :label="$t('views.project-create.tabs.configuration.modal.buttons.continue')"
+          class="flat continue"
+          @click="createWithoutSaving()"
+        />
+
+        <VueButton
+          :label="$t('views.project-create.tabs.configuration.modal.buttons.create')"
+          icon-left="save"
+          class="primary save"
+          :disabled="!formData.save"
+          @click="createProject()"
+        />
+      </div>
+    </VueModal>
+
+    <ProgressScreen
+      progress-id="project-create"
+      :debug="debug"
+    />
+  </div>
+</template>
+
+<script>
+import Prompts from '../mixins/Prompts'
+
+import CWD from '../graphql/cwd.gql'
+import PROJECT_CREATION from '../graphql/projectCreation.gql'
+import FEATURE_SET_ENABLED from '../graphql/featureSetEnabled.gql'
+import PRESET_APPLY from '../graphql/presetApply.gql'
+import PROJECT_CREATE from '../graphql/projectCreate.gql'
+
+function formDataFactory () {
+  return {
+    folder: '',
+    force: false,
+    packageManager: undefined,
+    selectedPreset: null,
+    remotePreset: {
+      url: '',
+      clone: false
+    },
+    save: ''
+  }
+}
+
+let formData = formDataFactory()
+
+export default {
+  name: 'ProjectCreate',
+
+  mixins: [
+    Prompts({
+      field: 'projectCreation',
+      query: PROJECT_CREATION
+    })
+  ],
+
+  metaInfo () {
+    return {
+      title: this.$t('views.project-create.title')
+    }
+  },
+
+  data () {
+    return {
+      formData: formData,
+      cwd: '',
+      projectCreation: null,
+      showCancel: false,
+      showRemotePreset: false,
+      showSavePreset: false,
+      debug: ''
+    }
+  },
+
+  apollo: {
+    cwd: {
+      query: CWD,
+      fetchPolicy: 'network-only'
+    },
+
+    projectCreation: {
+      query: PROJECT_CREATION,
+      fetchPolicy: 'network-only'
+    }
+  },
+
+  computed: {
+    detailsValid () {
+      return !!this.formData.folder
+    },
+
+    presetValid () {
+      return !!this.formData.selectedPreset
+    },
+
+    manual () {
+      return this.formData.selectedPreset === '__manual__'
+    },
+
+    remotePresetInfo () {
+      return {
+        name: 'views.project-create.tabs.presets.remote.name',
+        description: 'views.project-create.tabs.presets.remote.description'
+      }
+    }
+  },
+
+  methods: {
+    reset () {
+      formData = formDataFactory()
+    },
+
+    async selectPreset (id) {
+      if (id === 'remote') {
+        this.showRemotePreset = true
+        return
+      }
+
+      this.formData.selectedPreset = id
+
+      await this.$apollo.mutate({
+        mutation: PRESET_APPLY,
+        variables: {
+          id
+        },
+        update: (store, { data: { presetApply } }) => {
+          store.writeQuery({ query: PROJECT_CREATION, data: { projectCreation: presetApply } })
+        }
+      })
+    },
+
+    async toggleFeature (feature) {
+      await this.$apollo.mutate({
+        mutation: FEATURE_SET_ENABLED,
+        variables: {
+          id: feature.id,
+          enabled: !feature.enabled
+        }
+      })
+
+      this.$apollo.queries.projectCreation.refetch()
+    },
+
+    createWithoutSaving () {
+      this.formData.save = ''
+      this.createProject()
+    },
+
+    async createProject () {
+      this.showSavePreset = false
+
+      try {
+        await this.$apollo.mutate({
+          mutation: PROJECT_CREATE,
+          variables: {
+            input: {
+              folder: this.formData.folder,
+              force: this.formData.force,
+              packageManager: this.formData.packageManager,
+              preset: this.formData.selectedPreset,
+              remote: this.formData.remotePreset.url,
+              clone: this.formData.remotePreset.clone,
+              save: this.formData.save
+            }
+          }
+        })
+        this.reset()
+        this.$router.push({ name: 'project-home' })
+        await this.$nextTick()
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error(e)
+        this.debug = `ERROR: ${e}`
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.project-create
+  display grid
+  grid-template-columns 1fr
+  grid-template-rows auto
+  grid-template-areas "content"
+
+.content
+  grid-area content
+
+.project-details
+  max-width 400px
+  width 100%
+  margin 42px auto
+
+.project-path
+  h-box()
+  box-center()
+
+  .path
+    flex 100% 1 1
+    margin-right 6px
+    h-box()
+    align-items baseline
+
+    .folder
+      font-weight bold
+</style>
diff --git a/packages/@vue/cli-ui/src/views/ProjectHome.vue b/packages/@vue/cli-ui/src/views/ProjectHome.vue
new file mode 100644
index 0000000000..b95e7144da
--- /dev/null
+++ b/packages/@vue/cli-ui/src/views/ProjectHome.vue
@@ -0,0 +1,57 @@
+<template>
+  <div
+    class="project-home page"
+    :class="{
+      wide: $responsive.wide
+    }"
+  >
+    <ProjectNav/>
+
+    <div v-if="ready" class="content">
+      <router-view/>
+    </div>
+  </div>
+</template>
+
+<script>
+import PROJECT_CWD_RESET from '../graphql/projectCwdReset.gql'
+
+export default {
+  name: 'ProjectHome',
+
+  data () {
+    return {
+      ready: false
+    }
+  },
+
+  async created () {
+    await this.$apollo.mutate({
+      mutation: PROJECT_CWD_RESET
+    })
+    this.ready = true
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.project-home
+  display grid
+  grid-template-columns 46px 1fr
+  grid-template-rows auto
+  grid-template-areas "side-left content"
+
+  &.wide
+    grid-template-columns 180px 1fr
+
+.project-nav
+  grid-area side-left
+
+.content
+  grid-area content
+  overflow-x hidden
+  overflow-y auto
+
+</style>
diff --git a/packages/@vue/cli-ui/src/views/ProjectPlugins.vue b/packages/@vue/cli-ui/src/views/ProjectPlugins.vue
new file mode 100644
index 0000000000..d0a1ea5572
--- /dev/null
+++ b/packages/@vue/cli-ui/src/views/ProjectPlugins.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="project-plugins page">
+    <ContentView
+      :title="$t('views.project-plugins.title')"
+      class="limit-width"
+    >
+      <template slot="header">
+        <VueButton
+          icon-left="add"
+          :label="$t('views.project-plugins.button')"
+          class="primary"
+          :to="{ name: 'project-plugins-add' }"
+          data-testid="add-plugin"
+        />
+      </template>
+
+      <ApolloQuery
+        :query="require('../graphql/projectPlugins.gql')"
+        fetch-policy="cache-and-network"
+      >
+        <template slot-scope="{ result: { data, loading } }">
+          <div class="cta-text">{{ $t('views.project-plugins.heading') }}</div>
+
+          <VueLoadingIndicator
+            v-if="loading"
+            class="overlay"
+          />
+
+          <div v-else-if="data" class="plugins">
+            <ProjectPluginItem
+              v-for="plugin of data.projectCurrent.plugins"
+              :key="plugin.id"
+              :plugin="plugin"
+            />
+          </div>
+        </template>
+      </ApolloQuery>
+    </ContentView>
+
+    <ProgressScreen
+      progress-id="plugin-update"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ProjectPlugins',
+
+  metaInfo () {
+    return {
+      title: this.$t('views.project-plugins.title')
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.project-plugins
+  .content-view /deep/ > .content
+    overflow-y auto
+</style>
diff --git a/packages/@vue/cli-ui/src/views/ProjectPluginsAdd.vue b/packages/@vue/cli-ui/src/views/ProjectPluginsAdd.vue
new file mode 100644
index 0000000000..e817bdf6eb
--- /dev/null
+++ b/packages/@vue/cli-ui/src/views/ProjectPluginsAdd.vue
@@ -0,0 +1,351 @@
+<template>
+  <div class="project-plugins-add page">
+    <div class="content">
+      <StepWizard
+        :title="$t('views.project-plugins-add.title')"
+        class="frame"
+        :tab-id.sync="tabId"
+      >
+        <template slot-scope="{ next, previous }">
+          <VueTab
+            id="search"
+            :label="$t('views.project-plugins-add.tabs.search.label')"
+            icon="search"
+            disabled
+          >
+            <div class="content vue-ui-disable-scroll">
+              <ais-index
+                app-id="OFCNCOG2CU"
+                api-key="db283631f89b5b8a10707311f911fd00"
+                index-name="npm-search"
+                :query-parameters="{
+                  hitsPerPage: 20,
+                  attributesToRetrieve: [
+                    'name',
+                    'description',
+                    'repository',
+                    'homepage',
+                    'version',
+                    'owner',
+                    'humanDownloadsLast30Days'
+                  ],
+                  attributesToHighlight: [
+                    'name',
+                    'description'
+                  ],
+                  filters: `computedKeywords:vue-cli-plugin`
+                }"
+              >
+                <InstantSearchInput
+                  ref="searchInput"
+                  :placeholder="$t('views.project-plugins-add.tabs.search.search-input')"
+                />
+                <ais-results ref="results">
+                  <PackageSearchItem
+                    slot-scope="{ result }"
+                    :pkg="result"
+                    :selected="selectedId === result.name"
+                    @click.native="selectedId = result.name"
+                  />
+                </ais-results>
+                <ais-no-results>
+                  <div class="vue-ui-empty">
+                    <VueIcon icon="search" class="huge"/>
+                    <div>{{ $t('views.project-plugins-add.tabs.search.not-found') }}</div>
+                  </div>
+                </ais-no-results>
+                <InstantSearchPagination @page-change="scrollResultsToTop()"/>
+              </ais-index>
+            </div>
+
+            <div class="actions-bar no-padding-x">
+              <VueButton
+                icon-left="close"
+                :label="$t('views.project-plugins-add.tabs.search.buttons.cancel')"
+                class="big"
+                @click="close()"
+              />
+
+              <div class="algolia">
+                <img class="ais-logo" src="~@/assets/search-by-algolia.svg">
+              </div>
+
+              <VueButton
+                icon-left="file_download"
+                :label="$t('views.project-plugins-add.tabs.search.buttons.install', { target: selectedId || $t('views.project-plugins-add.plugin') })"
+                class="big primary"
+                :disabled="!selectedId"
+                data-testid="download-plugin"
+                @click="installPlugin()"
+              />
+            </div>
+          </VueTab>
+
+          <VueTab
+            id="config"
+            :label="$t('views.project-plugins-add.tabs.configuration.label')"
+            icon="settings_applications"
+            disabled
+            lazy
+          >
+            <div class="content vue-ui-disable-scroll">
+              <div class="cta-text">{{ $t('views.project-plugins-add.tabs.configuration.heading', { target: pluginId }) }}</div>
+              <PromptsList
+                :prompts="visiblePrompts"
+                @answer="answerPrompt"
+              />
+            </div>
+
+            <div class="actions-bar no-padding-x">
+              <VueButton
+                icon-left="arrow_back"
+                :label="$t('views.project-plugins-add.tabs.configuration.buttons.cancel')"
+                class="big"
+                @click="showCancelInstall = true"
+              />
+
+              <VueButton
+                icon-left="done"
+                :label="$t('views.project-plugins-add.tabs.configuration.buttons.finish')"
+                class="big primary"
+                :disabled="!configurationValid"
+                data-testid="finish-install"
+                @click="invokePlugin()"
+              />
+            </div>
+          </VueTab>
+
+          <VueTab
+            id="diff"
+            :label="$t('views.project-plugins-add.tabs.diff.label')"
+            icon="note_add"
+            disabled
+            lazy
+          >
+            <FileDiffView
+              @continue="finishInstall()"
+            />
+          </VueTab>
+        </template>
+      </StepWizard>
+    </div>
+
+    <VueModal
+      v-if="showCancelInstall"
+      :title="$t('views.project-plugins-add.modal.title', { target: pluginId })"
+      class="medium"
+      @close="showCancelInstall = false"
+    >
+      <div class="default-body">
+        {{ $t('views.project-plugins-add.modal.body', { target: pluginId }) }}
+      </div>
+
+      <div slot="footer" class="actions space-between">
+        <VueButton
+          :label="$t('views.project-plugins-add.modal.buttons.back')"
+          class="flat"
+          @click="showCancelInstall = false"
+        />
+
+        <div class="vue-ui-spacer"/>
+
+        <VueButton
+          :label="$t('views.project-plugins-add.modal.buttons.cancel')"
+          class="flat"
+          @click="cancelInstall()"
+        />
+
+        <VueButton
+          :label="$t('views.project-plugins-add.modal.buttons.uninstall')"
+          icon-left="delete_forever"
+          class="danger"
+          @click="uninstallPlugin()"
+        />
+      </div>
+    </VueModal>
+
+    <ProgressScreen
+      progress-id="plugin-installation"
+    />
+  </div>
+</template>
+
+<script>
+import Prompts from '../mixins/Prompts'
+
+import PLUGIN_INSTALLATION from '../graphql/pluginInstallation.gql'
+import PLUGIN_INSTALL from '../graphql/pluginInstall.gql'
+import PLUGIN_UNINSTALL from '../graphql/pluginUninstall.gql'
+import PLUGIN_INVOKE from '../graphql/pluginInvoke.gql'
+import PLUGIN_FINISH_INSTALL from '../graphql/pluginFinishInstall.gql'
+
+export default {
+  name: 'ProjectPluginsAdd',
+
+  mixins: [
+    Prompts({
+      field: 'pluginInstallation',
+      query: PLUGIN_INSTALLATION
+    })
+  ],
+
+  metaInfo () {
+    return {
+      title: this.$t('views.project-plugins-add.title')
+    }
+  },
+
+  data () {
+    return {
+      tabId: 'search',
+      selectedId: null,
+      showCancelInstall: false,
+      pluginInstallation: null
+    }
+  },
+
+  apollo: {
+    pluginInstallation: {
+      query: PLUGIN_INSTALLATION,
+      fetchPolicy: 'netork-only',
+      result () {
+        this.checkTab()
+      }
+    }
+  },
+
+  computed: {
+    pluginId () {
+      return this.pluginInstallation && this.pluginInstallation.pluginId
+    }
+  },
+
+  mounted () {
+    requestAnimationFrame(() => {
+      this.$refs.searchInput.focus()
+      this.checkTab()
+    })
+  },
+
+  methods: {
+    close () {
+      this.$router.push({ name: 'project-home' })
+    },
+
+    checkTab () {
+      if (!this.pluginInstallation) return
+
+      if (this.pluginInstallation.pluginId) {
+        this.tabId = 'config'
+      } else {
+        this.tabId = 'search'
+      }
+
+      switch (this.pluginInstallation.step) {
+        case 'config':
+          this.tabId = 'config'
+          break
+        case 'diff':
+          this.tabId = 'diff'
+          break
+        default:
+          this.tabId = 'search'
+      }
+    },
+
+    async installPlugin () {
+      try {
+        await this.$apollo.mutate({
+          mutation: PLUGIN_INSTALL,
+          variables: {
+            id: this.selectedId
+          }
+        })
+        this.tabId = 'config'
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error(e)
+      }
+    },
+
+    cancelInstall () {
+      this.selectedId = null
+      this.tabId = 'search'
+      this.showCancelInstall = false
+    },
+
+    async uninstallPlugin () {
+      this.showCancelInstall = false
+      try {
+        await this.$apollo.mutate({
+          mutation: PLUGIN_UNINSTALL,
+          variables: {
+            id: this.pluginId
+          }
+        })
+        this.cancelInstall()
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error(e)
+      }
+    },
+
+    async invokePlugin () {
+      try {
+        await this.$apollo.mutate({
+          mutation: PLUGIN_INVOKE,
+          variables: {
+            id: this.pluginId
+          }
+        })
+        this.tabId = 'diff'
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error(e)
+      }
+    },
+
+    async finishInstall () {
+      try {
+        await this.$apollo.mutate({
+          mutation: PLUGIN_FINISH_INSTALL
+        })
+        this.close()
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error(e)
+      }
+    },
+
+    scrollResultsToTop () {
+      const vm = this.$refs.results
+      if (vm) vm.$el.scrollTop = 0
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.project-plugins-add
+  display grid
+  grid-template-columns 1fr
+  grid-template-rows auto
+  grid-template-areas "content"
+
+.content
+  grid-area content
+  overflow hidden
+
+.algolia
+  position absolute
+  margin 0 auto
+  top 0
+  left 0
+  width 100%
+  height 100%
+  pointer-events none
+  h-box()
+  box-center()
+</style>
diff --git a/packages/@vue/cli-ui/src/views/ProjectSelect.vue b/packages/@vue/cli-ui/src/views/ProjectSelect.vue
new file mode 100644
index 0000000000..cb09ba0c6f
--- /dev/null
+++ b/packages/@vue/cli-ui/src/views/ProjectSelect.vue
@@ -0,0 +1,122 @@
+<template>
+  <div class="project-select page">
+    <StepWizard
+      :tab-id.sync="tab"
+      :title="$route.query.hideTabs ? $t('views.project-create.title') : $t('views.project-select.title')"
+      :hide-tabs="hideTabs"
+      class="frame"
+    >
+      <VueTab
+        id="existing"
+        :label="$t('views.project-select.tabs.projects')"
+        icon="storage"
+        class="select"
+      >
+        <ProjectSelectList/>
+      </VueTab>
+
+      <VueTab
+        id="create"
+        :label="$t('views.project-select.tabs.create')"
+        icon="add_box"
+        class="create"
+      >
+        <div class="content">
+          <FolderExplorer/>
+        </div>
+
+        <div class="actions-bar center">
+          <VueButton
+            icon-left="add"
+            :label="$route.query.hideTabs ? $t('views.project-create.tabs.details.form.folder.action') : $t('views.project-select.buttons.create')"
+            class="big primary create-project"
+            :to="{ name: 'project-create' }"
+          />
+        </div>
+      </VueTab>
+
+      <VueTab
+        id="import"
+        :label="$t('views.project-select.tabs.import')"
+        icon="unarchive"
+        class="import"
+      >
+        <div class="content">
+          <FolderExplorer/>
+        </div>
+
+        <div class="actions-bar center">
+          <VueButton
+            icon-left="unarchive"
+            :label="$route.query.action || $t('views.project-select.buttons.import')"
+            class="big primary import-project"
+            :disabled="!folderCurrent.isVueProject"
+            @click="importProject()"
+          />
+        </div>
+      </VueTab>
+    </StepWizard>
+  </div>
+</template>
+
+<script>
+import FOLDER_CURRENT from '../graphql/folderCurrent.gql'
+import PROJECT_IMPORT from '../graphql/projectImport.gql'
+
+export default {
+  name: 'ProjectSelect',
+
+  metaInfo () {
+    return {
+      title: this.$t('views.project-select.title')
+    }
+  },
+
+  data () {
+    return {
+      folderCurrent: {},
+      tab: undefined,
+      hideTabs: !!this.$route.query.hideTabs
+    }
+  },
+
+  apollo: {
+    folderCurrent: FOLDER_CURRENT
+  },
+
+  mounted () {
+    // Fix issue with Firefox
+    setTimeout(() => {
+      this.tab = this.$route.query.tab || 'existing'
+    })
+  },
+
+  methods: {
+    async importProject () {
+      await this.$apollo.mutate({
+        mutation: PROJECT_IMPORT,
+        variables: {
+          input: {
+            path: this.folderCurrent.path
+          }
+        }
+      })
+
+      this.$router.push({ name: 'project-home' })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.folder-explorer
+  height 100%
+
+.folder-explorer
+  flex 100% 1 1
+
+.project-select
+  height 100%
+</style>
diff --git a/packages/@vue/cli-ui/src/views/ProjectTaskDetails.vue b/packages/@vue/cli-ui/src/views/ProjectTaskDetails.vue
new file mode 100644
index 0000000000..25559092c4
--- /dev/null
+++ b/packages/@vue/cli-ui/src/views/ProjectTaskDetails.vue
@@ -0,0 +1,356 @@
+<template>
+  <div class="project-task-details">
+    <template v-if="task">
+      <div class="header">
+        <VueIcon icon="assignment" class="task-icon big"/>
+        <div class="name">{{ task.name }}</div>
+        <div class="description">{{ $t(task.description) }}</div>
+      </div>
+
+      <div class="actions-bar">
+        <VueButton
+          v-if="task.status !== 'running'"
+          icon-left="play_arrow"
+          class="primary"
+          :label="$t('views.project-task-details.actions.play')"
+          data-testid="run-task"
+          @click="runTask()"
+        />
+        <VueButton
+          v-else
+          icon-left="stop"
+          class="primary"
+          :label="$t('views.project-task-details.actions.stop')"
+          data-testid="stop-task"
+          @click="stopTask()"
+        />
+
+        <VueButton
+          v-if="task.prompts.length"
+          icon-left="settings"
+          class="icon-button primary"
+          :disabled="task.status === 'running'"
+          v-tooltip="$t('views.project-task-details.parameters')"
+          @click="showParameters = true"
+        />
+
+        <div
+          class="command"
+          v-tooltip="$t('views.project-task-details.command')"
+        >
+          {{ task.command }}
+        </div>
+
+        <VueButton
+          v-if="task.link"
+          :href="task.link"
+          target="_blank"
+          icon-left="open_in_new"
+          class="icon-button"
+          v-tooltip="$t('views.project-task-details.more-info')"
+        />
+
+        <div class="vue-ui-spacer"/>
+
+        <VueGroup
+          v-if="task.views.length"
+          v-model="currentView"
+          class="views"
+        >
+          <VueGroupButton
+            :label="$t('views.project-task-details.output')"
+            icon-left="dvr"
+            value="_output"
+          />
+
+          <VueGroupButton
+            v-for="view of task.views"
+            :key="view.id"
+            :value="view.id"
+            :icon-left="view.icon"
+            :label="$t(view.label)"
+          />
+        </VueGroup>
+      </div>
+
+      <div class="content">
+        <TerminalView
+          ref="terminal"
+          :class="{
+            ghost: currentView !== '_output'
+          }"
+          :key="id"
+          :cols="100"
+          :rows="24"
+          auto-size
+          :options="{
+            scrollback: 1000,
+            disableStdin: true,
+            useFlowControl: true
+          }"
+          :title="$t('views.project-task-details.output')"
+          toolbar
+          open-links
+          @clear="clearLogs()"
+        />
+
+        <ClientAddonComponent
+          v-if="currentView !== '_output'"
+          :name="currentViewComponent"
+          :key="currentView"
+          class="view"
+        />
+      </div>
+    </template>
+
+    <VueModal
+      v-if="showParameters"
+      :title="$t('views.project-task-details.parameters')"
+      class="medium"
+      @close="showParameters = false"
+    >
+      <div class="default-body">
+        <PromptsList
+          :prompts="visiblePrompts"
+          @answer="answerPrompt"
+        />
+
+        <div class="vue-ui-text info banner">
+          <VueIcon icon="info" class="big"/>
+          <span>{{ $t('views.project-task-details.parameters-info') }}</span>
+        </div>
+      </div>
+
+      <div slot="footer" class="actions">
+        <VueButton
+          class="primary big"
+          :label="$t('views.project-task-details.actions.close')"
+          @click="showParameters = false"
+        />
+      </div>
+    </VueModal>
+  </div>
+</template>
+
+<script>
+import Prompts from '../mixins/Prompts'
+
+import TASK from '../graphql/task.gql'
+import TASK_LOGS from '../graphql/taskLogs.gql'
+import TASK_RUN from '../graphql/taskRun.gql'
+import TASK_STOP from '../graphql/taskStop.gql'
+import TASK_LOGS_CLEAR from '../graphql/taskLogsClear.gql'
+import TASK_LOG_ADDED from '../graphql/taskLogAdded.gql'
+
+export default {
+  name: 'ProjectTaskDetails',
+
+  provide () {
+    return {
+      TaskDetails: this
+    }
+  },
+
+  mixins: [
+    Prompts({
+      field: 'task',
+      query: TASK
+    })
+  ],
+
+  metaInfo () {
+    return {
+      title: this.task && `${this.task.name} - ${this.$t('views.project-tasks.title')}`
+    }
+  },
+
+  props: {
+    id: {
+      type: String,
+      required: true
+    }
+  },
+
+  data () {
+    return {
+      task: null,
+      showParameters: false,
+      currentView: '_output'
+    }
+  },
+
+  apollo: {
+    task: {
+      query: TASK,
+      variables () {
+        return {
+          id: this.id
+        }
+      },
+      fetchPolicy: 'cache-and-network',
+      async result ({ data, loading }) {
+        if (!this.$_init && !loading && data && data.task && data.task.defaultView) {
+          this.$_init = true
+          await this.$nextTick()
+          this.currentView = data.task.defaultView
+        }
+      }
+    },
+
+    taskLogs: {
+      query: TASK_LOGS,
+      variables () {
+        return {
+          id: this.id
+        }
+      },
+      fetchPolicy: 'network-only',
+      manual: true,
+      async result ({ data, loading }) {
+        if (!loading) {
+          await this.$nextTick()
+          const terminal = this.$refs.terminal
+          if (terminal) {
+            data.taskLogs.logs.forEach(terminal.addLog)
+          }
+        }
+      }
+    },
+
+    $subscribe: {
+      taskLogAdded: {
+        query: TASK_LOG_ADDED,
+        variables () {
+          return {
+            id: this.id
+          }
+        },
+        async result ({ data }) {
+          if (data.taskLogAdded.taskId === this.id) {
+            await this.$nextTick()
+            const terminal = this.$refs.terminal
+            terminal.addLog(data.taskLogAdded)
+          }
+        }
+      }
+    }
+  },
+
+  computed: {
+    currentViewComponent () {
+      if (this.currentView !== '_output') {
+        const id = this.task.views.find(
+          view => view.id === this.currentView
+        ).component
+        return id
+      }
+    }
+  },
+
+  watch: {
+    id () {
+      this.showParameters = false
+      this.currentView = '_output'
+      this.$_init = false
+    }
+  },
+
+  methods: {
+    runTask () {
+      this.$apollo.mutate({
+        mutation: TASK_RUN,
+        variables: {
+          id: this.id
+        }
+      })
+    },
+
+    stopTask () {
+      this.$apollo.mutate({
+        mutation: TASK_STOP,
+        variables: {
+          id: this.id
+        }
+      })
+    },
+
+    clearLogs () {
+      this.$apollo.mutate({
+        mutation: TASK_LOGS_CLEAR,
+        variables: {
+          id: this.id
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.project-task-details
+  v-box()
+  align-items stretch
+  height 100%
+
+@media (max-width: 1250px)
+  .actions-bar
+    flex-wrap wrap
+
+  .views
+    margin-top $padding-item
+
+.command
+  font-family $font-mono
+  font-size 12px
+  background $vue-ui-color-light-neutral
+  color $vue-ui-color-dark
+  padding 0 16px
+  height 32px
+  h-box()
+  box-center()
+  border-radius $br
+
+.content
+  flex auto 1 1
+  height 0
+  margin 0 $padding-item $padding-item
+  position relative
+
+.terminal-view
+  position absolute
+  top 0
+  left 0
+  width 100%
+  height 100%
+  border-radius $br
+  &.ghost
+    opacity 0
+    pointer-events none
+
+.view
+  max-height 100%
+  overflow-x hidden
+  overflow-y auto
+
+.header
+  padding $padding-item $padding-item 0
+  h-box()
+  align-items center
+
+  .task-icon
+    margin-right 4px
+    >>> svg
+      fill $vue-ui-color-dark
+
+  .name
+    font-size 22px
+    color $vue-ui-color-dark
+    position relative
+    top -1px
+
+  .description
+    color $color-text-light
+    margin-left $padding-item
+</style>
diff --git a/packages/@vue/cli-ui/src/views/ProjectTasks.vue b/packages/@vue/cli-ui/src/views/ProjectTasks.vue
new file mode 100644
index 0000000000..b3fd089b17
--- /dev/null
+++ b/packages/@vue/cli-ui/src/views/ProjectTasks.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="project-tasks page">
+    <ContentView
+      :title="$t('views.project-tasks.title')"
+    >
+      <ApolloQuery
+        :query="require('../graphql/tasks.gql')"
+        fetch-policy="cache-and-network"
+        class="fill-height"
+      >
+        <template slot-scope="{ result: { data, loading } }">
+          <VueLoadingIndicator
+            v-if="loading"
+            class="overlay"
+          />
+
+          <NavContent
+            v-else-if="data"
+            :items="generateItems(data.tasks)"
+            class="tasks"
+          >
+            <TaskItem
+              slot-scope="{ item, selected }"
+              :task="item.task"
+              :selected="selected"
+            />
+          </NavContent>
+        </template>
+      </ApolloQuery>
+    </ContentView>
+  </div>
+</template>
+
+<script>
+import RestoreRoute from '../mixins/RestoreRoute'
+
+import TASK_CHANGED from '../graphql/taskChanged.gql'
+
+export default {
+  mixins: [
+    RestoreRoute()
+  ],
+
+  metaInfo () {
+    return {
+      title: this.$t('views.project-tasks.title')
+    }
+  },
+
+  apollo: {
+    $subscribe: {
+      taskChanged: {
+        query: TASK_CHANGED
+      }
+    }
+  },
+
+  methods: {
+    generateItems (tasks) {
+      return tasks.map(
+        task => ({
+          route: {
+            name: 'project-task-details',
+            params: {
+              id: task.id
+            }
+          },
+          task
+        })
+      )
+    }
+  }
+}
+</script>
diff --git a/packages/@vue/cli-ui/src/vue-apollo.js b/packages/@vue/cli-ui/src/vue-apollo.js
new file mode 100644
index 0000000000..ede3eeaeaf
--- /dev/null
+++ b/packages/@vue/cli-ui/src/vue-apollo.js
@@ -0,0 +1,28 @@
+import Vue from 'vue'
+import VueApollo from 'vue-apollo'
+import { createApolloClient } from 'vue-cli-plugin-apollo/graphql-client'
+
+// Install the vue plugin
+Vue.use(VueApollo)
+
+let endpoint = process.env.VUE_APP_CLI_UI_URL
+if (typeof endpoint === 'undefined') {
+  endpoint = 'ws://localhost:4000/graphql'
+} else if (endpoint === '') {
+  endpoint = window.location.origin.replace('http', 'ws') + '/graphql'
+}
+
+// Config
+const options = {
+  wsEndpoint: endpoint,
+  persisting: false,
+  websocketsOnly: true
+}
+
+// Create apollo client
+export const { apolloClient } = createApolloClient(options)
+
+// Create vue apollo provider
+export const apolloProvider = new VueApollo({
+  defaultClient: apolloClient
+})
diff --git a/packages/@vue/cli-ui/tests/e2e/.eslintrc b/packages/@vue/cli-ui/tests/e2e/.eslintrc
new file mode 100644
index 0000000000..02023fbaba
--- /dev/null
+++ b/packages/@vue/cli-ui/tests/e2e/.eslintrc
@@ -0,0 +1,12 @@
+{
+  "plugins": [
+    "cypress"
+  ],
+  "env": {
+    "mocha": true,
+    "cypress/globals": true
+  },
+  "rules": {
+    "strict": "off"
+  }
+}
diff --git a/packages/@vue/cli-ui/tests/e2e/.gitignore b/packages/@vue/cli-ui/tests/e2e/.gitignore
new file mode 100644
index 0000000000..733b5fd672
--- /dev/null
+++ b/packages/@vue/cli-ui/tests/e2e/.gitignore
@@ -0,0 +1,2 @@
+/screenshots
+/videos
diff --git a/packages/@vue/cli-ui/tests/e2e/plugins/index.js b/packages/@vue/cli-ui/tests/e2e/plugins/index.js
new file mode 100644
index 0000000000..2d05ba5b36
--- /dev/null
+++ b/packages/@vue/cli-ui/tests/e2e/plugins/index.js
@@ -0,0 +1,19 @@
+// https://docs.cypress.io/guides/guides/plugins-guide.html
+const path = require('path')
+
+module.exports = (on, config) => {
+  return Object.assign({}, config, {
+    fixturesFolder: 'tests/e2e/fixtures',
+    integrationFolder: 'tests/e2e/specs',
+    screenshotsFolder: 'tests/e2e/screenshots',
+    videosFolder: 'tests/e2e/videos',
+    supportFile: 'tests/e2e/support/index.js',
+    execTimeout: 1000000,
+    pageLoadTimeout: 1000000,
+    requestTimeout: 1000000,
+    responseTimeout: 1000000,
+    env: {
+      cwd: path.resolve(__dirname, '../../../../../test')
+    }
+  })
+}
diff --git a/packages/@vue/cli-ui/tests/e2e/specs/g1-projects.js b/packages/@vue/cli-ui/tests/e2e/specs/g1-projects.js
new file mode 100644
index 0000000000..d58ab777f6
--- /dev/null
+++ b/packages/@vue/cli-ui/tests/e2e/specs/g1-projects.js
@@ -0,0 +1,80 @@
+describe('Vue project manager', () => {
+  it('Switches between tabs', () => {
+    cy.visit('/project/select')
+    cy.get('.project-select-list').should('be.visible')
+    cy.get('.tab-button').eq(1).click()
+    cy.get('.folder-explorer').should('be.visible')
+    cy.get('.tab-button').eq(2).click()
+    cy.get('.folder-explorer').should('be.visible')
+    cy.get('.tab-button').eq(0).click()
+    cy.get('.project-select-list').should('be.visible')
+  })
+
+  it('Creates a new project (manual)', () => {
+    cy.visit('/project/select')
+    cy.get('.tab-button').eq(1).click()
+    cy.get('.folder-explorer').should('be.visible')
+    cy.get('.create-project').click()
+    cy.get('.change-folder').click()
+    cy.get('.create').within(() => {
+      cy.get('.folder-explorer').should('be.visible')
+      cy.get('.current-path').click()
+      cy.get('.path-input input').clear().type(Cypress.env('cwd') + '{enter}')
+      cy.get('.create-project').click()
+    })
+    cy.get('.details').within(() => {
+      cy.get('.app-name input').type('cli-ui-test')
+      cy.get('.force').click()
+      cy.get('.next').click()
+    })
+    cy.get('.presets').within(() => {
+      cy.get('[data-testid="__manual__"]').click()
+      cy.get('.next').click()
+    })
+    cy.get('.features').within(() => {
+      cy.get('[data-testid="pwa"] .bullet').click()
+      cy.get('[data-testid="router"] .bullet').click()
+      cy.get('[data-testid="vuex"] .bullet').click()
+      cy.get('[data-testid="use-config-files"] .bullet').click()
+      cy.get('.next').click()
+    })
+    cy.get('.config').within(() => {
+      cy.get('.vue-ui-select').eq(0).click()
+    })
+    cy.get('.vue-ui-select-button').eq(2).click()
+    cy.get('.config').within(() => {
+      cy.get('.vue-ui-switch').click({ multiple: true })
+      cy.get('.next').click()
+    })
+    cy.get('.save-preset-modal').within(() => {
+      cy.get('.continue').click()
+    })
+    cy.get('.loading-screen .vue-ui-loading-indicator').should('be.visible')
+    cy.get('.project-home', { timeout: 250000 }).should('be.visible')
+    cy.get('.current-project').should('have.text', 'cli-ui-test')
+  })
+
+  it('Favorites the project', () => {
+    cy.visit('/project/select')
+    cy.get('.project-select-list-item').eq(0).get('[data-testid="favorite-button"]').click()
+    cy.get('.cta-text.favorite').should('be.visible')
+    cy.get('.project-select-list-item').eq(0).get('[data-testid="favorite-button"]').click()
+    cy.get('.cta-text.favorite').should('not.exist')
+  })
+
+  it('Imports a project', () => {
+    cy.visit('/project/select')
+    cy.get('.project-select-list-item').eq(0).get('[data-testid="delete-button"]').click()
+    cy.get('.project-select-list-item').should('not.exist')
+    cy.get('.tab-button').eq(2).click()
+    cy.get('.import').within(() => {
+      cy.get('.folder-explorer').should('be.visible')
+      cy.get('.current-path').click()
+      cy.get('.path-input input').clear().type(Cypress.env('cwd') + '{enter}')
+      cy.get(`.folder-explorer-item:contains('cli-ui-test')`).click()
+      cy.get('.import-project').should('not.have.class', 'disabled').click()
+    })
+    cy.get('.project-home').should('be.visible')
+    cy.get('.current-project').should('have.text', 'cli-ui-test')
+  })
+})
diff --git a/packages/@vue/cli-ui/tests/e2e/specs/g2-plugins.js b/packages/@vue/cli-ui/tests/e2e/specs/g2-plugins.js
new file mode 100644
index 0000000000..f701aef7b8
--- /dev/null
+++ b/packages/@vue/cli-ui/tests/e2e/specs/g2-plugins.js
@@ -0,0 +1,28 @@
+describe('Plugins', () => {
+  it('Should display the plugins', () => {
+    cy.visit('/')
+    cy.get('.project-plugin-item').should('have.length', 2)
+  })
+
+  it('Should add a plugin', () => {
+    cy.visit('/')
+    cy.get('[data-testid="add-plugin"]').click()
+    cy.get('.project-plugins-add').should('be.visible')
+    // Search
+    cy.get('.package-search-item:contains("@vue/cli-plugin-pwa")').should('be.visible')
+    cy.get('.instant-search-input input').clear().type('unit-jest')
+    cy.get('.package-search-item:contains("@vue/cli-plugin-pwa")').should('be.not.visible')
+    cy.get('.package-search-item:contains("@vue/cli-plugin-unit-jest")').should('be.visible')
+    cy.get('.instant-search-input input').clear()
+    // Install
+    cy.get('.package-search-item:contains("@vue/cli-plugin-pwa") [data-testid="name"]').should('be.visible').click()
+    cy.get('[data-testid="download-plugin"]:contains("@vue/cli-plugin-pwa")').should('not.have.class', 'disabled').click()
+    cy.get('.loading-screen .vue-ui-loading-indicator').should('be.visible')
+    cy.get('.prompts-list', { timeout: 250000 }).should('be.visible')
+    cy.get('[data-testid="finish-install"]').should('not.have.class', 'disabled').click()
+    cy.get('.loading-screen .vue-ui-loading-indicator').should('be.visible')
+    cy.get('.file-diff-view', { timeout: 250000 }).should('be.visible')
+    cy.get('[data-testid="skip-button"]').should('not.have.class', 'disabled').click()
+    cy.get('.project-plugin-item').should('have.length', 3)
+  })
+})
diff --git a/packages/@vue/cli-ui/tests/e2e/specs/g3-configurations.js b/packages/@vue/cli-ui/tests/e2e/specs/g3-configurations.js
new file mode 100644
index 0000000000..ddb4728898
--- /dev/null
+++ b/packages/@vue/cli-ui/tests/e2e/specs/g3-configurations.js
@@ -0,0 +1,6 @@
+describe('Configurations', () => {
+  it('Displays configurations', () => {
+    cy.visit('/configuration')
+    cy.get('.configuration-item').should('have.length', 3)
+  })
+})
diff --git a/packages/@vue/cli-ui/tests/e2e/specs/g4-tasks.js b/packages/@vue/cli-ui/tests/e2e/specs/g4-tasks.js
new file mode 100644
index 0000000000..5d21b36281
--- /dev/null
+++ b/packages/@vue/cli-ui/tests/e2e/specs/g4-tasks.js
@@ -0,0 +1,30 @@
+describe('Tasks', () => {
+  it('Displays tasks', () => {
+    cy.visit('/tasks')
+    cy.get('.task-item:contains("serve")').should('be.visible')
+    cy.get('.task-item:contains("build")').should('be.visible')
+    cy.get('.task-item:contains("lint")').should('be.visible')
+  })
+
+  it('Run serve task', () => {
+    cy.visit('/tasks')
+    cy.get('.task-item:contains("serve")').click()
+    cy.get('[data-testid="run-task"]').click()
+    cy.get('.task-item:contains("serve").status-running')
+    cy.wait(500)
+    cy.get('.build-progress .done', { timeout: 250000 }).should('be.visible')
+    cy.wait(200)
+    cy.get('[data-testid="stop-task"]').click()
+    cy.get('.task-item:contains("serve").status-terminated')
+  })
+
+  it('Run build task', () => {
+    cy.visit('/tasks')
+    cy.get('.task-item:contains("build")').click()
+    cy.get('[data-testid="run-task"]').click()
+    cy.get('.task-item:contains("build").status-running')
+    cy.wait(500)
+    cy.get('.build-progress .done', { timeout: 250000 }).should('be.visible')
+    cy.get('.task-item:contains("build").status-done', { timeout: 3000 })
+  })
+})
diff --git a/packages/@vue/cli-ui/tests/e2e/support/commands.js b/packages/@vue/cli-ui/tests/e2e/support/commands.js
new file mode 100644
index 0000000000..c1f5a772e2
--- /dev/null
+++ b/packages/@vue/cli-ui/tests/e2e/support/commands.js
@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
diff --git a/packages/@vue/cli-ui/tests/e2e/support/index.js b/packages/@vue/cli-ui/tests/e2e/support/index.js
new file mode 100644
index 0000000000..d68db96df2
--- /dev/null
+++ b/packages/@vue/cli-ui/tests/e2e/support/index.js
@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
diff --git a/packages/@vue/cli-ui/vue-cli-ui.js b/packages/@vue/cli-ui/vue-cli-ui.js
new file mode 100644
index 0000000000..d37ab546a8
--- /dev/null
+++ b/packages/@vue/cli-ui/vue-cli-ui.js
@@ -0,0 +1,39 @@
+// This file will be loaded when the project is opened
+module.exports = api => {
+  if (process.env.NODE_ENV === 'production') return
+
+  // Add dynamic components in dev mode (webpack dashboard & analyzer)
+  api.addClientAddon({
+    id: 'vue-webpack',
+    url: 'http://localhost:8042/index.js'
+  })
+
+  // Add a test page below 'plugins', 'configurations' and 'tasks' on the left sidebar
+  api.addView({
+    id: 'vue-webpack-test-view',
+    name: 'test-webpack-route',
+    icon: 'pets',
+    // icon: 'http://localhost:4000/_plugin/%40vue%2Fcli-service/webpack-icon.svg',
+    tooltip: 'Test view from webpack addon'
+  })
+
+  // Shared data example to store a value (for example a setting)
+  api.onProjectOpen(() => {
+    api.setSharedData('test-data', api.storageGet('vue-cli.test-data'))
+  })
+  api.watchSharedData('test-data', value => {
+    api.storageSet('vue-cli.test-data', value)
+    console.log('test-data value saved')
+  })
+
+  // Test Plugin Action
+  api.onAction('test-action', params => {
+    console.log('test-action called', params)
+
+    setTimeout(() => {
+      api.callAction('other-action', { foo: 'bar' })
+    }, 1000)
+
+    return 'meow'
+  })
+}
diff --git a/packages/@vue/cli-ui/vue.config.js b/packages/@vue/cli-ui/vue.config.js
new file mode 100644
index 0000000000..92f429da35
--- /dev/null
+++ b/packages/@vue/cli-ui/vue.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  pluginOptions: {
+    graphqlMock: false,
+    apolloEngine: false,
+    graphqlTimeout: 1000000
+  }
+}
diff --git a/packages/@vue/cli/bin/vue.js b/packages/@vue/cli/bin/vue.js
index 8911ee0994..f8d6c3fb88 100755
--- a/packages/@vue/cli/bin/vue.js
+++ b/packages/@vue/cli/bin/vue.js
@@ -96,6 +96,17 @@ program
     loadCommand('build', '@vue/cli-service-global').build(entry, cleanArgs(cmd))
   })
 
+program
+  .command('ui')
+  .option('-p, --port <port>', 'Port used for the UI server (by default search for awailable port)')
+  .option('-D, --dev', 'Run in dev mode')
+  .option('--quiet', `Don't output starting messages`)
+  .option('--headless', `Don't open browser on start and output port`)
+  .description('start and open the vue-cli ui')
+  .action((cmd) => {
+    require('../lib/ui')(cleanArgs(cmd))
+  })
+
 program
   .command('init <template> <app-name>')
   .description('generate a project from a remote template (legacy API, requires @vue/cli-init)')
diff --git a/packages/@vue/cli/lib/Creator.js b/packages/@vue/cli/lib/Creator.js
index f3478b6cb3..5a813333b6 100644
--- a/packages/@vue/cli/lib/Creator.js
+++ b/packages/@vue/cli/lib/Creator.js
@@ -1,3 +1,4 @@
+const EventEmitter = require('events')
 const fs = require('fs-extra')
 const chalk = require('chalk')
 const debug = require('debug')
@@ -9,10 +10,10 @@ const sortObject = require('./util/sortObject')
 const { loadModule } = require('./util/module')
 const getVersions = require('./util/getVersions')
 const { installDeps } = require('./util/installDeps')
-const clearConsole = require('./util/clearConsole')
+const { clearConsole } = require('./util/clearConsole')
 const PromptModuleAPI = require('./PromptModuleAPI')
 const writeFileTree = require('./util/writeFileTree')
-const formatFeatures = require('./util/formatFeatures')
+const { formatFeatures } = require('./util/features')
 const setupDevProject = require('./util/setupDevProject')
 const fetchRemotePreset = require('./util/fetchRemotePreset')
 
@@ -31,13 +32,16 @@ const {
   hasGit,
   hasYarn,
   logWithSpinner,
-  stopSpinner
+  stopSpinner,
+  exit
 } = require('@vue/cli-shared-utils')
 
 const isManualMode = answers => answers.preset === '__manual__'
 
-module.exports = class Creator {
+module.exports = class Creator extends EventEmitter {
   constructor (name, context, promptModules) {
+    super()
+
     this.name = name
     this.context = process.env.VUE_CLI_CONTEXT = context
     const { presetPrompt, featurePrompt } = this.resolveIntroPrompts()
@@ -54,27 +58,28 @@ module.exports = class Creator {
     promptModules.forEach(m => m(promptAPI))
   }
 
-  async create (cliOptions = {}) {
+  async create (cliOptions = {}, preset = null) {
     const isTestOrDebug = process.env.VUE_CLI_TEST || process.env.VUE_CLI_DEBUG
     const { run, name, context, createCompleteCbs } = this
 
-    let preset
-    if (cliOptions.preset) {
-      // vue create foo --preset bar
-      preset = await this.resolvePreset(cliOptions.preset, cliOptions.clone)
-    } else if (cliOptions.default) {
-      // vue create foo --default
-      preset = defaults.presets.default
-    } else if (cliOptions.inlinePreset) {
-      // vue create foo --inlinePreset {...}
-      try {
-        preset = JSON.parse(cliOptions.inlinePreset)
-      } catch (e) {
-        error(`CLI inline preset is not valid JSON: ${cliOptions.inlinePreset}`)
-        process.exit(1)
+    if (!preset) {
+      if (cliOptions.preset) {
+        // vue create foo --preset bar
+        preset = await this.resolvePreset(cliOptions.preset, cliOptions.clone)
+      } else if (cliOptions.default) {
+        // vue create foo --default
+        preset = defaults.presets.default
+      } else if (cliOptions.inlinePreset) {
+        // vue create foo --inlinePreset {...}
+        try {
+          preset = JSON.parse(cliOptions.inlinePreset)
+        } catch (e) {
+          error(`CLI inline preset is not valid JSON: ${cliOptions.inlinePreset}`)
+          exit(1)
+        }
+      } else {
+        preset = await this.promptAndResolvePreset()
       }
-    } else {
-      preset = await this.promptAndResolvePreset()
     }
 
     // clone before mutating
@@ -92,6 +97,7 @@ module.exports = class Creator {
 
     await clearConsole()
     logWithSpinner(`✨`, `Creating project in ${chalk.yellow(context)}.`)
+    this.emit('creation', { event: 'creating' })
 
     // get latest CLI version
     const { latest } = await getVersions()
@@ -117,6 +123,7 @@ module.exports = class Creator {
     const shouldInitGit = await this.shouldInitGit(cliOptions)
     if (shouldInitGit) {
       logWithSpinner(`🗃`, `Initializing git repository...`)
+      this.emit('creation', { event: 'git-init' })
       await run('git init')
     }
 
@@ -124,6 +131,7 @@ module.exports = class Creator {
     stopSpinner()
     log(`⚙  Installing CLI plugins. This might take a while...`)
     log()
+    this.emit('creation', { event: 'plugins-install' })
     if (isTestOrDebug) {
       // in development, avoid installation process
       await setupDevProject(context)
@@ -134,6 +142,7 @@ module.exports = class Creator {
     // run generator
     log()
     log(`🚀  Invoking generators...`)
+    this.emit('creation', { event: 'invoking-generators' })
     const plugins = await this.resolvePlugins(preset.plugins)
     const generator = new Generator(context, {
       pkg,
@@ -146,6 +155,7 @@ module.exports = class Creator {
 
     // install additional deps (injected by generators)
     log(`📦  Installing additional dependencies...`)
+    this.emit('creation', { event: 'deps-install' })
     log()
     if (!isTestOrDebug) {
       await installDeps(context, packageManager, cliOptions.registry)
@@ -154,6 +164,7 @@ module.exports = class Creator {
     // run complete cbs if any (injected by generators)
     log()
     logWithSpinner('⚓', `Running completion hooks...`)
+    this.emit('creation', { event: 'completion-hooks' })
     for (const cb of createCompleteCbs) {
       await cb()
     }
@@ -184,6 +195,7 @@ module.exports = class Creator {
       chalk.cyan(` ${chalk.gray('$')} ${packageManager === 'yarn' ? 'yarn serve' : 'npm run serve'}`)
     )
     log()
+    this.emit('creation', { event: 'done' })
 
     if (gitCommitFailed) {
       warn(
@@ -200,10 +212,12 @@ module.exports = class Creator {
     return execa(command, args, { cwd: this.context })
   }
 
-  async promptAndResolvePreset () {
+  async promptAndResolvePreset (answers = null) {
     // prompt
-    await clearConsole(true)
-    const answers = await inquirer.prompt(this.resolveFinalPrompts())
+    if (!answers) {
+      await clearConsole(true)
+      answers = await inquirer.prompt(this.resolveFinalPrompts())
+    }
     debug('vue-cli:answers')(answers)
 
     if (answers.packageManager) {
@@ -246,6 +260,7 @@ module.exports = class Creator {
       preset = await fs.readJson(name)
     } else if (name.includes('/')) {
       logWithSpinner(`Fetching remote preset ${chalk.cyan(name)}...`)
+      this.emit('creation', { event: 'fetch-remote-preset' })
       try {
         preset = await fetchRemotePreset(name, clone)
         stopSpinner()
@@ -272,7 +287,7 @@ module.exports = class Creator {
         log(`you don't seem to have any saved preset.`)
         log(`run vue-cli in manual mode to create a preset.`)
       }
-      process.exit(1)
+      exit(1)
     }
     return preset
   }
@@ -300,9 +315,13 @@ module.exports = class Creator {
     return plugins
   }
 
-  resolveIntroPrompts () {
+  getPresets () {
     const savedOptions = loadOptions()
-    const presets = Object.assign({}, savedOptions.presets, defaults.presets)
+    return Object.assign({}, savedOptions.presets, defaults.presets)
+  }
+
+  resolveIntroPrompts () {
+    const presets = this.getPresets()
     const presetChoices = Object.keys(presets).map(name => {
       return {
         name: `${name} (${formatFeatures(presets[name])})`,
diff --git a/packages/@vue/cli/lib/create.js b/packages/@vue/cli/lib/create.js
index fcc00070ec..cc78a652ab 100644
--- a/packages/@vue/cli/lib/create.js
+++ b/packages/@vue/cli/lib/create.js
@@ -3,8 +3,9 @@ const path = require('path')
 const chalk = require('chalk')
 const inquirer = require('inquirer')
 const Creator = require('./Creator')
-const clearConsole = require('./util/clearConsole')
-const { error, stopSpinner } = require('@vue/cli-shared-utils')
+const { clearConsole } = require('./util/clearConsole')
+const { getPromptModules } = require('./util/createTools')
+const { error, stopSpinner, exit } = require('@vue/cli-shared-utils')
 const validateProjectName = require('validate-npm-package-name')
 
 async function create (projectName, options) {
@@ -22,7 +23,7 @@ async function create (projectName, options) {
     result.errors && result.errors.forEach(err => {
       console.error(chalk.red(err))
     })
-    process.exit(1)
+    exit(1)
   }
 
   if (fs.existsSync(targetDir)) {
@@ -63,19 +64,7 @@ async function create (projectName, options) {
     }
   }
 
-  const promptModules = [
-    'babel',
-    'typescript',
-    'pwa',
-    'router',
-    'vuex',
-    'cssPreprocessors',
-    'linter',
-    'unit',
-    'e2e'
-  ].map(file => require(`./promptModules/${file}`))
-
-  const creator = new Creator(name, targetDir, promptModules)
+  const creator = new Creator(name, targetDir, getPromptModules())
   await creator.create(options)
 }
 
diff --git a/packages/@vue/cli/lib/invoke.js b/packages/@vue/cli/lib/invoke.js
index 7cdfe7f80b..aa55319522 100644
--- a/packages/@vue/cli/lib/invoke.js
+++ b/packages/@vue/cli/lib/invoke.js
@@ -141,7 +141,9 @@ async function runGenerator (context, plugin, pkg = getPkg(context)) {
       '--exclude-standard',
       '--modified',
       '--others'
-    ])
+    ], {
+      cwd: context
+    })
     if (stdout.trim()) {
       log(`   The following files have been updated / added:\n`)
       log(
diff --git a/packages/@vue/cli/lib/options.js b/packages/@vue/cli/lib/options.js
index 5b76632d0a..b9000cae11 100644
--- a/packages/@vue/cli/lib/options.js
+++ b/packages/@vue/cli/lib/options.js
@@ -4,6 +4,7 @@ const path = require('path')
 const cloneDeep = require('lodash.clonedeep')
 const { error } = require('@vue/cli-shared-utils/lib/logger')
 const { createSchema, validate } = require('@vue/cli-shared-utils/lib/validate')
+const { exit } = require('@vue/cli-shared-utils/lib/exit')
 
 const rcPath = exports.rcPath = (
   process.env.VUE_CLI_CONFIG_PATH ||
@@ -67,7 +68,7 @@ exports.loadOptions = () => {
         `Please fix/delete it and re-run vue-cli in manual mode.\n` +
         `(${e.message})`,
       )
-      process.exit(1)
+      exit(1)
     }
     validate(cachedOptions, schema, () => {
       error(
diff --git a/packages/@vue/cli/lib/promptModules/babel.js b/packages/@vue/cli/lib/promptModules/babel.js
index 6bc43feb9d..20c15e0fd8 100644
--- a/packages/@vue/cli/lib/promptModules/babel.js
+++ b/packages/@vue/cli/lib/promptModules/babel.js
@@ -3,6 +3,7 @@ module.exports = cli => {
     name: 'Babel',
     value: 'babel',
     short: 'Babel',
+    description: 'Transpile modern JavaScript to older versions (for compatibility)',
     checked: true
   })
 
diff --git a/packages/@vue/cli/lib/promptModules/cssPreprocessors.js b/packages/@vue/cli/lib/promptModules/cssPreprocessors.js
index c269cc9429..15b5890ea1 100644
--- a/packages/@vue/cli/lib/promptModules/cssPreprocessors.js
+++ b/packages/@vue/cli/lib/promptModules/cssPreprocessors.js
@@ -1,7 +1,9 @@
 module.exports = cli => {
   cli.injectFeature({
     name: 'CSS Pre-processors',
-    value: 'css-preprocessor'
+    value: 'css-preprocessor',
+    description: 'Add support for CSS pre-processors like SASS, Less or Stylus',
+    link: 'https://github.com/vuejs/vue-cli/blob/dev/docs/css.md'
   })
 
   cli.injectPrompt({
diff --git a/packages/@vue/cli/lib/promptModules/e2e.js b/packages/@vue/cli/lib/promptModules/e2e.js
index 72615b2395..c7a21520dd 100644
--- a/packages/@vue/cli/lib/promptModules/e2e.js
+++ b/packages/@vue/cli/lib/promptModules/e2e.js
@@ -2,7 +2,10 @@ module.exports = cli => {
   cli.injectFeature({
     name: 'E2E Testing',
     value: 'e2e',
-    short: 'E2E'
+    short: 'E2E',
+    description: 'Add an End-to-End testing solution to the app like Cypress or Nightwatch',
+    link: 'https://github.com/vuejs/vue-cli/tree/dev/docs#e2e-testing',
+    plugins: ['e2e-cypress', 'e2e-nightwatch']
   })
 
   cli.injectPrompt({
diff --git a/packages/@vue/cli/lib/promptModules/linter.js b/packages/@vue/cli/lib/promptModules/linter.js
index fa175e74b3..03b112cba3 100644
--- a/packages/@vue/cli/lib/promptModules/linter.js
+++ b/packages/@vue/cli/lib/promptModules/linter.js
@@ -6,6 +6,9 @@ module.exports = cli => {
     name: 'Linter / Formatter',
     value: 'linter',
     short: 'Linter',
+    description: 'Check and enforce code quality with ESLint or Prettier',
+    link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint',
+    plugins: ['eslint'],
     checked: true
   })
 
diff --git a/packages/@vue/cli/lib/promptModules/pwa.js b/packages/@vue/cli/lib/promptModules/pwa.js
index d64b5a52d7..24802296ec 100644
--- a/packages/@vue/cli/lib/promptModules/pwa.js
+++ b/packages/@vue/cli/lib/promptModules/pwa.js
@@ -2,7 +2,9 @@ module.exports = cli => {
   cli.injectFeature({
     name: 'Progressive Web App (PWA) Support',
     value: 'pwa',
-    short: 'PWA'
+    short: 'PWA',
+    description: 'Improve performances with features like Web manifest and Service workers',
+    link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa'
   })
 
   cli.onPromptComplete((answers, options) => {
diff --git a/packages/@vue/cli/lib/promptModules/router.js b/packages/@vue/cli/lib/promptModules/router.js
index c404b1ec09..b266e1cf15 100644
--- a/packages/@vue/cli/lib/promptModules/router.js
+++ b/packages/@vue/cli/lib/promptModules/router.js
@@ -1,7 +1,9 @@
 module.exports = cli => {
   cli.injectFeature({
     name: 'Router',
-    value: 'router'
+    value: 'router',
+    description: 'Structure the app with dynamic pages',
+    link: 'https://router.vuejs.org/'
   })
 
   cli.onPromptComplete((answers, options) => {
diff --git a/packages/@vue/cli/lib/promptModules/typescript.js b/packages/@vue/cli/lib/promptModules/typescript.js
index 46e69c3a53..db43aed564 100644
--- a/packages/@vue/cli/lib/promptModules/typescript.js
+++ b/packages/@vue/cli/lib/promptModules/typescript.js
@@ -2,7 +2,10 @@ module.exports = cli => {
   cli.injectFeature({
     name: 'TypeScript',
     value: 'ts',
-    short: 'TS'
+    short: 'TS',
+    description: 'Add support for the TypeScript language',
+    link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript',
+    plugins: ['typescript']
   })
 
   cli.injectPrompt({
diff --git a/packages/@vue/cli/lib/promptModules/unit.js b/packages/@vue/cli/lib/promptModules/unit.js
index 829cb18495..b3d61982a2 100644
--- a/packages/@vue/cli/lib/promptModules/unit.js
+++ b/packages/@vue/cli/lib/promptModules/unit.js
@@ -2,7 +2,10 @@ module.exports = cli => {
   cli.injectFeature({
     name: 'Unit Testing',
     value: 'unit',
-    short: 'Unit'
+    short: 'Unit',
+    description: 'Add a Unit Testing solution like Jest or Mocha',
+    link: 'https://github.com/vuejs/vue-cli/tree/dev/docs#unit-testing',
+    plugins: ['unit-jest', 'unit-mocha']
   })
 
   cli.injectPrompt({
diff --git a/packages/@vue/cli/lib/promptModules/vuex.js b/packages/@vue/cli/lib/promptModules/vuex.js
index 81b2ee8524..0cad42ed55 100644
--- a/packages/@vue/cli/lib/promptModules/vuex.js
+++ b/packages/@vue/cli/lib/promptModules/vuex.js
@@ -1,7 +1,9 @@
 module.exports = cli => {
   cli.injectFeature({
     name: 'Vuex',
-    value: 'vuex'
+    value: 'vuex',
+    description: 'Manage the app state with a centralized store',
+    link: 'https://vuex.vuejs.org/'
   })
 
   cli.onPromptComplete((answers, options) => {
diff --git a/packages/@vue/cli/lib/ui.js b/packages/@vue/cli/lib/ui.js
new file mode 100644
index 0000000000..aee097ceb3
--- /dev/null
+++ b/packages/@vue/cli/lib/ui.js
@@ -0,0 +1,58 @@
+const { log, error, openBrowser } = require('@vue/cli-shared-utils')
+const portfinder = require('portfinder')
+
+async function ui (options = {}, context = process.cwd()) {
+  let port = options.port
+  if (!port) {
+    port = await portfinder.getPortPromise()
+  }
+
+  // Config
+  process.env.VUE_APP_CLI_UI_URL = ''
+
+  if (!options.dev) {
+    process.env.NODE_ENV = 'production'
+  }
+
+  if (!options.quiet) log(`🚀  Starting GUI...`)
+  let server = require('vue-cli-plugin-apollo/graphql-server')
+  server = server.default || server
+
+  const opts = {
+    port,
+    graphqlPath: '/graphql',
+    graphqlSubscriptionsPath: '/graphql',
+    graphqlPlaygroundPath: '/graphql-playground',
+    graphqlCors: '*',
+    mock: false,
+    apolloEngine: false,
+    timeout: 1000000,
+    quiet: true,
+    paths: {
+      typeDefs: require.resolve('@vue/cli-ui/src/graphql-api/type-defs.js'),
+      resolvers: require.resolve('@vue/cli-ui/src/graphql-api/resolvers.js'),
+      context: require.resolve('@vue/cli-ui/src/graphql-api/context.js'),
+      pubsub: require.resolve('@vue/cli-ui/src/graphql-api/pubsub.js'),
+      server: require.resolve('@vue/cli-ui/src/graphql-api/server.js')
+    }
+  }
+
+  server(opts, () => {
+    const url = `http://localhost:${port}`
+    if (!options.quiet) log(`🌠  Ready on ${url}`)
+    if (options.headless) {
+      console.log(port)
+    } else {
+      openBrowser(url)
+    }
+  })
+}
+
+module.exports = (...args) => {
+  return ui(...args).catch(err => {
+    error(err)
+    if (!process.env.VUE_CLI_TEST) {
+      process.exit(1)
+    }
+  })
+}
diff --git a/packages/@vue/cli/lib/util/clearConsole.js b/packages/@vue/cli/lib/util/clearConsole.js
index 6c73d1716f..a9fa00a5fb 100644
--- a/packages/@vue/cli/lib/util/clearConsole.js
+++ b/packages/@vue/cli/lib/util/clearConsole.js
@@ -3,7 +3,7 @@ const semver = require('semver')
 const getVersions = require('./getVersions')
 const { clearConsole } = require('@vue/cli-shared-utils')
 
-module.exports = async function clearConsoleWithTitle (checkUpdate) {
+exports.generateTitle = async function (checkUpdate) {
   const { current, latest } = await getVersions()
 
   let title = chalk.bold.blue(`Vue CLI v${current}`)
@@ -15,11 +15,20 @@ module.exports = async function clearConsoleWithTitle (checkUpdate) {
     title += ' ' + chalk.magenta.bold('DEBUG')
   }
   if (checkUpdate && semver.gt(latest, current)) {
-    title += chalk.green(`
+    if (process.env.VUE_CLI_API_MODE) {
+      title += chalk.green(` 🌟️ Update available: ${latest}`)
+    } else {
+      title += chalk.green(`
 ┌────────────────────${`─`.repeat(latest.length)}──┐
 │  Update available: ${latest}  │
 └────────────────────${`─`.repeat(latest.length)}──┘`)
+    }
   }
 
+  return title
+}
+
+exports.clearConsole = async function clearConsoleWithTitle (checkUpdate) {
+  const title = await exports.generateTitle(checkUpdate)
   clearConsole(title)
 }
diff --git a/packages/@vue/cli/lib/util/createTools.js b/packages/@vue/cli/lib/util/createTools.js
new file mode 100644
index 0000000000..f67ea24486
--- /dev/null
+++ b/packages/@vue/cli/lib/util/createTools.js
@@ -0,0 +1,13 @@
+exports.getPromptModules = () => {
+  return [
+    'babel',
+    'typescript',
+    'pwa',
+    'router',
+    'vuex',
+    'cssPreprocessors',
+    'linter',
+    'unit',
+    'e2e'
+  ].map(file => require(`../promptModules/${file}`))
+}
diff --git a/packages/@vue/cli/lib/util/formatFeatures.js b/packages/@vue/cli/lib/util/features.js
similarity index 78%
rename from packages/@vue/cli/lib/util/formatFeatures.js
rename to packages/@vue/cli/lib/util/features.js
index df122b7bb8..e64e69df04 100644
--- a/packages/@vue/cli/lib/util/formatFeatures.js
+++ b/packages/@vue/cli/lib/util/features.js
@@ -1,7 +1,7 @@
 const chalk = require('chalk')
 const { toShortPluginId } = require('@vue/cli-shared-utils')
 
-module.exports = function formatFeatures (preset, lead, joiner) {
+exports.getFeatures = (preset) => {
   const features = []
   if (preset.router) {
     features.push('vue-router')
@@ -16,6 +16,11 @@ module.exports = function formatFeatures (preset, lead, joiner) {
     return dep !== '@vue/cli-service'
   })
   features.push.apply(features, plugins)
+  return features
+}
+
+exports.formatFeatures = (preset, lead, joiner) => {
+  const features = exports.getFeatures(preset)
   return features.map(dep => {
     dep = toShortPluginId(dep)
     return `${lead || ''}${chalk.yellow(dep)}`
diff --git a/packages/@vue/cli/lib/util/fetchRemotePreset.js b/packages/@vue/cli/lib/util/fetchRemotePreset.js
index 5c6be6866d..faeb7bcfff 100644
--- a/packages/@vue/cli/lib/util/fetchRemotePreset.js
+++ b/packages/@vue/cli/lib/util/fetchRemotePreset.js
@@ -1,8 +1,8 @@
 module.exports = function fetchRemotePreset (name, clone) {
   // github shorthand fastpath
   if (!clone && /^[\w_-]+\/[\w_-]+$/.test(name)) {
-    const { get } = require('./request')
-    return get(`https://raw.githubusercontent.com/${name}/master/preset.json`)
+    const { request } = require('@vue/cli-shared-utils')
+    return request.get(`https://raw.githubusercontent.com/${name}/master/preset.json`)
       .then(res => res.body)
   }
 
diff --git a/packages/@vue/cli/lib/util/getPackageVersion.js b/packages/@vue/cli/lib/util/getPackageVersion.js
new file mode 100644
index 0000000000..f3767b6546
--- /dev/null
+++ b/packages/@vue/cli/lib/util/getPackageVersion.js
@@ -0,0 +1,15 @@
+const { request } = require('@vue/cli-shared-utils')
+
+module.exports = async function getPackageVersion (id, range = '') {
+  const registry = (await require('./shouldUseTaobao')())
+    ? `https://registry.npm.taobao.org`
+    : `https://registry.npmjs.org`
+
+  let result
+  try {
+    result = await request.get(`${registry}/${encodeURIComponent(id).replace(/^%40/, '@')}/${range}`)
+  } catch (e) {
+    return e
+  }
+  return result
+}
diff --git a/packages/@vue/cli/lib/util/getVersions.js b/packages/@vue/cli/lib/util/getVersions.js
index 98b8fd8cdf..712721bdb2 100644
--- a/packages/@vue/cli/lib/util/getVersions.js
+++ b/packages/@vue/cli/lib/util/getVersions.js
@@ -8,12 +8,8 @@ module.exports = async function getVersions () {
     // test/debug, use local version
     latest = process.env.VUE_CLI_LATEST_VERSION = current
   } else {
-    const request = require('./request')
-    const registry = (await require('./shouldUseTaobao')())
-      ? `https://registry.npm.taobao.org`
-      : `https://registry.npmjs.org`
-
-    const res = await request.get(`${registry}/vue-cli-version-marker/latest`)
+    const getPackageVersion = require('./getPackageVersion')
+    const res = await getPackageVersion('vue-cli-version-marker', 'latest')
     if (res.statusCode === 200) {
       latest = process.env.VUE_CLI_LATEST_VERSION = res.body.version
     } else {
diff --git a/packages/@vue/cli/lib/util/installDeps.js b/packages/@vue/cli/lib/util/installDeps.js
index a3717541d9..c3fbbe1110 100644
--- a/packages/@vue/cli/lib/util/installDeps.js
+++ b/packages/@vue/cli/lib/util/installDeps.js
@@ -1,3 +1,4 @@
+const EventEmitter = require('events')
 const chalk = require('chalk')
 const execa = require('execa')
 const readline = require('readline')
@@ -8,6 +9,37 @@ const debug = require('debug')('vue-cli:install')
 
 const taobaoDistURL = 'https://npm.taobao.org/dist'
 
+class InstallProgress extends EventEmitter {
+  constructor () {
+    super()
+
+    this._progress = -1
+  }
+
+  get progress () {
+    return this._progress
+  }
+
+  set progress (value) {
+    this._progress = value
+    this.emit('progress', value)
+  }
+
+  get enabled () {
+    return this._progress !== -1
+  }
+
+  set enabled (value) {
+    this.progress = value ? 0 : -1
+  }
+
+  log (value) {
+    this.emit('log', value)
+  }
+}
+
+const progress = exports.progress = new InstallProgress()
+
 function toStartOfLine (stream) {
   if (!chalk.supportsColor) {
     stream.write('\r')
@@ -54,28 +86,78 @@ async function addRegistryToArgs (command, args, cliRegistry) {
 
 function executeCommand (command, args, targetDir) {
   return new Promise((resolve, reject) => {
+    const apiMode = process.env.VUE_CLI_API_MODE
+
+    progress.enabled = false
+
+    if (apiMode) {
+      if (command === 'npm') {
+        // TODO when this is supported
+      } else if (command === 'yarn') {
+        args.push('--json')
+      }
+    }
+
     const child = execa(command, args, {
       cwd: targetDir,
-      stdio: ['inherit', 'inherit', command === 'yarn' ? 'pipe' : 'inherit']
+      stdio: ['inherit', apiMode ? 'pipe' : 'inherit', !apiMode && command === 'yarn' ? 'pipe' : 'inherit']
     })
 
-    // filter out unwanted yarn output
-    if (command === 'yarn') {
-      child.stderr.on('data', buf => {
-        const str = buf.toString()
-        if (/warning/.test(str)) {
-          return
-        }
-        // progress bar
-        const progressBarMatch = str.match(/\[.*\] (\d+)\/(\d+)/)
-        if (progressBarMatch) {
-          // since yarn is in a child process, it's unable to get the width of
-          // the terminal. reimplement the progress bar ourselves!
-          renderProgressBar(progressBarMatch[1], progressBarMatch[2])
-          return
+    if (apiMode) {
+      let progressTotal = 0
+      let progressTime = Date.now()
+      child.stdout.on('data', buffer => {
+        let str = buffer.toString().trim()
+        if (str && command === 'yarn' && str.indexOf('"type":') !== -1) {
+          const newLineIndex = str.lastIndexOf('\n')
+          if (newLineIndex !== -1) {
+            str = str.substr(newLineIndex)
+          }
+          try {
+            const data = JSON.parse(str)
+            if (data.type === 'step') {
+              progress.enabled = false
+              progress.log(data.data.message)
+            } else if (data.type === 'progressStart') {
+              progressTotal = data.data.total
+            } else if (data.type === 'progressTick') {
+              const time = Date.now()
+              if (time - progressTime > 20) {
+                progressTime = time
+                progress.progress = data.data.current / progressTotal
+              }
+            } else {
+              progress.enabled = false
+            }
+          } catch (e) {
+            console.error(e)
+            console.log(str)
+          }
+        } else {
+          process.stdout.write(buffer)
         }
-        process.stderr.write(buf)
       })
+    } else {
+      // filter out unwanted yarn output
+      if (command === 'yarn') {
+        child.stderr.on('data', buf => {
+          const str = buf.toString()
+          if (/warning/.test(str)) {
+            return
+          }
+
+          // progress bar
+          const progressBarMatch = str.match(/\[.*\] (\d+)\/(\d+)/)
+          if (progressBarMatch) {
+            // since yarn is in a child process, it's unable to get the width of
+            // the terminal. reimplement the progress bar ourselves!
+            renderProgressBar(progressBarMatch[1], progressBarMatch[2])
+            return
+          }
+
+          process.stderr.write(buf)
+        })
+      }
     }
 
     child.on('close', code => {
@@ -127,3 +209,43 @@ exports.installPackage = async function (targetDir, command, cliRegistry, packag
 
   await executeCommand(command, args, targetDir)
 }
+
+exports.uninstallPackage = async function (targetDir, command, cliRegistry, packageName) {
+  const args = []
+  if (command === 'npm') {
+    args.push('uninstall', '--loglevel', 'error')
+  } else if (command === 'yarn') {
+    args.push('remove')
+  } else {
+    throw new Error(`Unknown package manager: ${command}`)
+  }
+
+  await addRegistryToArgs(command, args, cliRegistry)
+
+  args.push(packageName)
+
+  debug(`command: `, command)
+  debug(`args: `, args)
+
+  await executeCommand(command, args, targetDir)
+}
+
+exports.updatePackage = async function (targetDir, command, cliRegistry, packageName) {
+  const args = []
+  if (command === 'npm') {
+    args.push('update', '--loglevel', 'error')
+  } else if (command === 'yarn') {
+    args.push('upgrade')
+  } else {
+    throw new Error(`Unknown package manager: ${command}`)
+  }
+
+  await addRegistryToArgs(command, args, cliRegistry)
+
+  args.push(packageName)
+
+  debug(`command: `, command)
+  debug(`args: `, args)
+
+  await executeCommand(command, args, targetDir)
+}
diff --git a/packages/@vue/cli/lib/util/module.js b/packages/@vue/cli/lib/util/module.js
index 08d3a490b5..51e005f23f 100644
--- a/packages/@vue/cli/lib/util/module.js
+++ b/packages/@vue/cli/lib/util/module.js
@@ -1,16 +1,19 @@
-const resolve = require('resolve')
-
-exports.resolveModule = function resolveModule (request, context) {
+exports.resolveModule = function (request, context) {
   let resolvedPath
   try {
-    resolvedPath = resolve.sync(request, { basedir: context })
+    resolvedPath = require.resolve(request, {
+      paths: [context]
+    })
   } catch (e) {}
   return resolvedPath
 }
 
-exports.loadModule = function loadModule (request, context) {
+exports.loadModule = function (request, context, force = false) {
   const resolvedPath = exports.resolveModule(request, context)
   if (resolvedPath) {
+    if (force) {
+      delete require.cache[resolvedPath]
+    }
     return require(resolvedPath)
   }
 }
diff --git a/packages/@vue/cli/lib/util/shouldUseTaobao.js b/packages/@vue/cli/lib/util/shouldUseTaobao.js
index 48473a4943..9caea641b5 100644
--- a/packages/@vue/cli/lib/util/shouldUseTaobao.js
+++ b/packages/@vue/cli/lib/util/shouldUseTaobao.js
@@ -1,6 +1,6 @@
 const chalk = require('chalk')
 const execa = require('execa')
-const request = require('./request')
+const { request } = require('@vue/cli-shared-utils')
 const inquirer = require('inquirer')
 const registries = require('./registries')
 const { loadOptions, saveOptions } = require('../options')
@@ -50,6 +50,10 @@ module.exports = async function shouldUseTaobao () {
     return save(false)
   }
 
+  if (process.env.VUE_CLI_API_MODE) {
+    return save(true)
+  }
+
   // ask and save preference
   const { useTaobaoRegistry } = await inquirer.prompt([
     {
diff --git a/packages/@vue/cli/package.json b/packages/@vue/cli/package.json
index 22d925cbf9..b944e57f9d 100644
--- a/packages/@vue/cli/package.json
+++ b/packages/@vue/cli/package.json
@@ -28,13 +28,15 @@
   },
   "dependencies": {
     "@vue/cli-shared-utils": "^3.0.0-beta.11",
+    "@vue/cli-ui": "^3.0.0-beta.11",
+    "@vue/cli-ui-addon-webpack": "^3.0.0-beta.11",
     "chalk": "^2.3.0",
     "commander": "^2.12.2",
     "debug": "^3.1.0",
     "deepmerge": "^2.0.1",
     "download-git-repo": "^1.0.2",
     "ejs": "^2.5.7",
-    "execa": "^0.8.0",
+    "execa": "^0.10.0",
     "fs-extra": "^6.0.0",
     "globby": "^8.0.1",
     "import-global": "^0.1.0",
diff --git a/yarn.lock b/yarn.lock
index 0fd14ec857..0a8667ebae 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -764,7 +764,7 @@
     "@babel/helper-plugin-utils" "7.0.0-beta.46"
     "@babel/plugin-transform-typescript" "7.0.0-beta.46"
 
-"@babel/runtime@7.0.0-beta.47":
+"@babel/runtime@7.0.0-beta.47", "@babel/runtime@^7.0.0-beta.38", "@babel/runtime@^7.0.0-beta.40":
   version "7.0.0-beta.47"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.0.0-beta.47.tgz#273f5e71629e80f6cbcd7507503848615e59f7e0"
   dependencies:
@@ -896,6 +896,16 @@
     call-me-maybe "^1.0.1"
     glob-to-regexp "^0.3.0"
 
+"@types/accepts@*":
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/@types/accepts/-/accepts-1.3.5.tgz#c34bec115cfc746e04fe5a059df4ce7e7b391575"
+  dependencies:
+    "@types/node" "*"
+
+"@types/async@2.0.49":
+  version "2.0.49"
+  resolved "https://registry.yarnpkg.com/@types/async/-/async-2.0.49.tgz#92e33d13f74c895cb9a7f38ba97db8431ed14bc0"
+
 "@types/blob-util@1.3.3":
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/@types/blob-util/-/blob-util-1.3.3.tgz#adba644ae34f88e1dd9a5864c66ad651caaf628a"
@@ -904,6 +914,20 @@
   version "3.5.18"
   resolved "https://registry.yarnpkg.com/@types/bluebird/-/bluebird-3.5.18.tgz#6a60435d4663e290f3709898a4f75014f279c4d6"
 
+"@types/body-parser@*":
+  version "1.17.0"
+  resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.17.0.tgz#9f5c9d9bd04bb54be32d5eb9fc0d8c974e6cf58c"
+  dependencies:
+    "@types/connect" "*"
+    "@types/node" "*"
+
+"@types/bunyan@*":
+  version "1.8.4"
+  resolved "https://registry.yarnpkg.com/@types/bunyan/-/bunyan-1.8.4.tgz#69c11adc7b50538d45fb68d9ae39d062b9432f38"
+  dependencies:
+    "@types/events" "*"
+    "@types/node" "*"
+
 "@types/chai-jquery@1.1.35":
   version "1.1.35"
   resolved "https://registry.yarnpkg.com/@types/chai-jquery/-/chai-jquery-1.1.35.tgz#9a8f0a39ec0851b2768a8f8c764158c2a2568d04"
@@ -919,6 +943,48 @@
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.0.8.tgz#d27600e9ba2f371e08695d90a0fe0408d89c7be7"
 
+"@types/connect@*", "@types/connect@^3.4.31":
+  version "3.4.32"
+  resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.32.tgz#aa0e9616b9435ccad02bc52b5b454ffc2c70ba28"
+  dependencies:
+    "@types/node" "*"
+
+"@types/cookies@*":
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/@types/cookies/-/cookies-0.7.1.tgz#f9f204bd6767d389eea3b87609e30c090c77a540"
+  dependencies:
+    "@types/connect" "*"
+    "@types/express" "*"
+    "@types/keygrip" "*"
+    "@types/node" "*"
+
+"@types/events@*":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@types/events/-/events-1.2.0.tgz#81a6731ce4df43619e5c8c945383b3e62a89ea86"
+
+"@types/express-serve-static-core@*":
+  version "4.11.1"
+  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.11.1.tgz#f6f7212382d59b19d696677bcaa48a37280f5d45"
+  dependencies:
+    "@types/events" "*"
+    "@types/node" "*"
+
+"@types/express@*", "@types/express@^4.0.36":
+  version "4.11.1"
+  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.11.1.tgz#f99663b3ab32d04cb11db612ef5dd7933f75465b"
+  dependencies:
+    "@types/body-parser" "*"
+    "@types/express-serve-static-core" "*"
+    "@types/serve-static" "*"
+
+"@types/graphql@0.12.6":
+  version "0.12.6"
+  resolved "https://registry.yarnpkg.com/@types/graphql/-/graphql-0.12.6.tgz#3d619198585fcabe5f4e1adfb5cf5f3388c66c13"
+
+"@types/http-assert@*":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@types/http-assert/-/http-assert-1.2.2.tgz#17dfe5a82184a8898935d96fe2eaedd37d22d9a4"
+
 "@types/jest@^22.0.1":
   version "22.2.3"
   resolved "https://registry.yarnpkg.com/@types/jest/-/jest-22.2.3.tgz#0157c0316dc3722c43a7b71de3fdf3acbccef10d"
@@ -931,10 +997,46 @@
   version "3.2.16"
   resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.2.16.tgz#04419c404a3194350e7d3f339a90e72c88db3111"
 
+"@types/keygrip@*":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@types/keygrip/-/keygrip-1.0.1.tgz#ff540462d2fb4d0a88441ceaf27d287b01c3d878"
+
+"@types/koa-bodyparser@^4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@types/koa-bodyparser/-/koa-bodyparser-4.2.0.tgz#04febc567f3d3dd40e3d1a0e095cdf7b07c4d7ce"
+  dependencies:
+    "@types/koa" "*"
+
+"@types/koa-compose@*":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@types/koa-compose/-/koa-compose-3.2.2.tgz#dc106e000bbf92a3ac900f756df47344887ee847"
+
+"@types/koa-router@^7.0.27":
+  version "7.0.28"
+  resolved "https://registry.yarnpkg.com/@types/koa-router/-/koa-router-7.0.28.tgz#67487c862a831099aed8864a8996bfa7e989edc0"
+  dependencies:
+    "@types/koa" "*"
+
+"@types/koa@*", "@types/koa@^2.0.39":
+  version "2.0.45"
+  resolved "https://registry.yarnpkg.com/@types/koa/-/koa-2.0.45.tgz#133cbda6cc8d12b73434b5d9663898c833f80aa2"
+  dependencies:
+    "@types/accepts" "*"
+    "@types/cookies" "*"
+    "@types/events" "*"
+    "@types/http-assert" "*"
+    "@types/keygrip" "*"
+    "@types/koa-compose" "*"
+    "@types/node" "*"
+
 "@types/lodash@4.14.87":
   version "4.14.87"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.87.tgz#55f92183b048c2c64402afe472f8333f4e319a6b"
 
+"@types/mime@*":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-2.0.0.tgz#5a7306e367c539b9f6543499de8dd519fac37a8b"
+
 "@types/minimatch@3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.1.tgz#b683eb60be358304ef146f5775db4c0e3696a550"
@@ -955,6 +1057,25 @@
   version "9.6.15"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-9.6.15.tgz#8a5a313ea0a43a95277235841be5d3f5fb3dfeda"
 
+"@types/node@^9.4.6":
+  version "9.6.18"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-9.6.18.tgz#092e13ef64c47e986802c9c45a61c1454813b31d"
+
+"@types/restify@^5.0.7":
+  version "5.0.7"
+  resolved "https://registry.yarnpkg.com/@types/restify/-/restify-5.0.7.tgz#09b736ad96af04814f9501b7b50e84dabcd77228"
+  dependencies:
+    "@types/bunyan" "*"
+    "@types/node" "*"
+    "@types/spdy" "*"
+
+"@types/serve-static@*":
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.13.2.tgz#f5ac4d7a6420a99a6a45af4719f4dcd8cd907a48"
+  dependencies:
+    "@types/express-serve-static-core" "*"
+    "@types/mime" "*"
+
 "@types/sinon-chai@2.7.29":
   version "2.7.29"
   resolved "https://registry.yarnpkg.com/@types/sinon-chai/-/sinon-chai-2.7.29.tgz#4db01497e2dd1908b2bd30d1782f456353f5f723"
@@ -970,6 +1091,12 @@
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@types/sinon/-/sinon-4.0.0.tgz#9a93ffa4ee1329e85166278a5ed99f81dc4c8362"
 
+"@types/spdy@*":
+  version "3.4.4"
+  resolved "https://registry.yarnpkg.com/@types/spdy/-/spdy-3.4.4.tgz#3282fd4ad8c4603aa49f7017dd520a08a345b2bc"
+  dependencies:
+    "@types/node" "*"
+
 "@types/strip-bom@^3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/strip-bom/-/strip-bom-3.0.0.tgz#14a8ec3956c2e81edb7520790aecf21c290aebd2"
@@ -978,6 +1105,10 @@
   version "0.0.30"
   resolved "https://registry.yarnpkg.com/@types/strip-json-comments/-/strip-json-comments-0.0.30.tgz#9aa30c04db212a9a0649d6ae6fd50accc40748a1"
 
+"@types/zen-observable@^0.5.3":
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/@types/zen-observable/-/zen-observable-0.5.3.tgz#91b728599544efbb7386d8b6633693a3c2e7ade5"
+
 "@vue/component-compiler-utils@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-1.2.1.tgz#3d543baa75cfe5dab96e29415b78366450156ef6"
@@ -998,120 +1129,133 @@
   dependencies:
     lodash "^4.17.4"
 
+"@vue/ui@^0.2.5":
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/@vue/ui/-/ui-0.2.8.tgz#11cd83cb691e045ce0925f6562267ebc4394b4c2"
+  dependencies:
+    focus-visible "^4.1.0"
+    material-design-icons "^3.0.1"
+    v-tooltip "^2.0.0-rc.31"
+    vue-resize "^0.4.3"
+
 "@vue/web-component-wrapper@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@vue/web-component-wrapper/-/web-component-wrapper-1.2.0.tgz#bb0e46f1585a7e289b4ee6067dcc5a6ae62f1dd1"
 
-"@webassemblyjs/ast@1.4.2":
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.4.2.tgz#ab715aa1fec9dd23c025204dba39690c119418ea"
+"@webassemblyjs/ast@1.4.3":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.4.3.tgz#3b3f6fced944d8660273347533e6d4d315b5934a"
   dependencies:
-    "@webassemblyjs/helper-wasm-bytecode" "1.4.2"
-    "@webassemblyjs/wast-parser" "1.4.2"
+    "@webassemblyjs/helper-wasm-bytecode" "1.4.3"
+    "@webassemblyjs/wast-parser" "1.4.3"
     debug "^3.1.0"
-    webassemblyjs "1.4.2"
+    webassemblyjs "1.4.3"
 
-"@webassemblyjs/floating-point-hex-parser@1.4.2":
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.4.2.tgz#9296fb64caa37bf98c8064aa329680e3e2bfacc7"
+"@webassemblyjs/floating-point-hex-parser@1.4.3":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.4.3.tgz#f5aee4c376a717c74264d7bacada981e7e44faad"
 
-"@webassemblyjs/helper-buffer@1.4.2":
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.4.2.tgz#3cacecd5a6bfcb67932ed8219f81f92d8b2dafbb"
+"@webassemblyjs/helper-buffer@1.4.3":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.4.3.tgz#0434b55958519bf503697d3824857b1dea80b729"
+  dependencies:
+    debug "^3.1.0"
 
-"@webassemblyjs/helper-code-frame@1.4.2":
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.4.2.tgz#20526637c3849f12b08f8661248477eef9642329"
+"@webassemblyjs/helper-code-frame@1.4.3":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.4.3.tgz#f1349ca3e01a8e29ee2098c770773ef97af43641"
   dependencies:
-    "@webassemblyjs/wast-printer" "1.4.2"
+    "@webassemblyjs/wast-printer" "1.4.3"
 
-"@webassemblyjs/helper-fsm@1.4.2":
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-fsm/-/helper-fsm-1.4.2.tgz#e41050282994b5be077b95b65b66ecd5a92c5e88"
+"@webassemblyjs/helper-fsm@1.4.3":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-fsm/-/helper-fsm-1.4.3.tgz#65a921db48fb43e868f17b27497870bdcae22b79"
 
-"@webassemblyjs/helper-wasm-bytecode@1.4.2":
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.4.2.tgz#b48c289c7921056aa12d71e78a17070ffe90c49c"
+"@webassemblyjs/helper-wasm-bytecode@1.4.3":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.4.3.tgz#0e5b4b5418e33f8a26e940b7809862828c3721a5"
 
-"@webassemblyjs/helper-wasm-section@1.4.2":
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.4.2.tgz#520e02c0cc3e5e9b5f44f58abc04ba5eda6e5476"
+"@webassemblyjs/helper-wasm-section@1.4.3":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.4.3.tgz#9ceedd53a3f152c3412e072887ade668d0b1acbf"
   dependencies:
-    "@webassemblyjs/ast" "1.4.2"
-    "@webassemblyjs/helper-buffer" "1.4.2"
-    "@webassemblyjs/helper-wasm-bytecode" "1.4.2"
-    "@webassemblyjs/wasm-gen" "1.4.2"
+    "@webassemblyjs/ast" "1.4.3"
+    "@webassemblyjs/helper-buffer" "1.4.3"
+    "@webassemblyjs/helper-wasm-bytecode" "1.4.3"
+    "@webassemblyjs/wasm-gen" "1.4.3"
+    debug "^3.1.0"
 
-"@webassemblyjs/leb128@1.4.2":
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.4.2.tgz#d13f368abdcefc54428f55a265a993de610f8893"
+"@webassemblyjs/leb128@1.4.3":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.4.3.tgz#5a5e5949dbb5adfe3ae95664d0439927ac557fb8"
   dependencies:
     leb "^0.3.0"
 
-"@webassemblyjs/validation@1.4.2":
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/validation/-/validation-1.4.2.tgz#55cf5b219e25900c85773fc35beb9d12ae0ede53"
+"@webassemblyjs/validation@1.4.3":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/validation/-/validation-1.4.3.tgz#9e66c9b3079d7bbcf2070c1bf52a54af2a09aac9"
   dependencies:
-    "@webassemblyjs/ast" "1.4.2"
+    "@webassemblyjs/ast" "1.4.3"
 
-"@webassemblyjs/wasm-edit@1.4.2":
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.4.2.tgz#bde9a581065f63f257ed511d7d9cf04f8cd04524"
-  dependencies:
-    "@webassemblyjs/ast" "1.4.2"
-    "@webassemblyjs/helper-buffer" "1.4.2"
-    "@webassemblyjs/helper-wasm-bytecode" "1.4.2"
-    "@webassemblyjs/helper-wasm-section" "1.4.2"
-    "@webassemblyjs/wasm-gen" "1.4.2"
-    "@webassemblyjs/wasm-opt" "1.4.2"
-    "@webassemblyjs/wasm-parser" "1.4.2"
-    "@webassemblyjs/wast-printer" "1.4.2"
+"@webassemblyjs/wasm-edit@1.4.3":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.4.3.tgz#87febd565e0ffb5ae25f6495bb3958d17aa0a779"
+  dependencies:
+    "@webassemblyjs/ast" "1.4.3"
+    "@webassemblyjs/helper-buffer" "1.4.3"
+    "@webassemblyjs/helper-wasm-bytecode" "1.4.3"
+    "@webassemblyjs/helper-wasm-section" "1.4.3"
+    "@webassemblyjs/wasm-gen" "1.4.3"
+    "@webassemblyjs/wasm-opt" "1.4.3"
+    "@webassemblyjs/wasm-parser" "1.4.3"
+    "@webassemblyjs/wast-printer" "1.4.3"
     debug "^3.1.0"
 
-"@webassemblyjs/wasm-gen@1.4.2":
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.4.2.tgz#0899297f9426073736df799287845a73c597cf90"
+"@webassemblyjs/wasm-gen@1.4.3":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.4.3.tgz#8553164d0154a6be8f74d653d7ab355f73240aa4"
   dependencies:
-    "@webassemblyjs/ast" "1.4.2"
-    "@webassemblyjs/helper-wasm-bytecode" "1.4.2"
-    "@webassemblyjs/leb128" "1.4.2"
+    "@webassemblyjs/ast" "1.4.3"
+    "@webassemblyjs/helper-wasm-bytecode" "1.4.3"
+    "@webassemblyjs/leb128" "1.4.3"
 
-"@webassemblyjs/wasm-opt@1.4.2":
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.4.2.tgz#c44ad48e109aec197e3bf69875c54537d76ba2e9"
+"@webassemblyjs/wasm-opt@1.4.3":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.4.3.tgz#26c7a23bfb136aa405b1d3410e63408ec60894b8"
   dependencies:
-    "@webassemblyjs/ast" "1.4.2"
-    "@webassemblyjs/helper-buffer" "1.4.2"
-    "@webassemblyjs/wasm-gen" "1.4.2"
-    "@webassemblyjs/wasm-parser" "1.4.2"
+    "@webassemblyjs/ast" "1.4.3"
+    "@webassemblyjs/helper-buffer" "1.4.3"
+    "@webassemblyjs/wasm-gen" "1.4.3"
+    "@webassemblyjs/wasm-parser" "1.4.3"
+    debug "^3.1.0"
 
-"@webassemblyjs/wasm-parser@1.4.2":
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.4.2.tgz#3bf7e10cfe336db0ecdea0a5d7ed8a63b7a7754a"
+"@webassemblyjs/wasm-parser@1.4.3":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.4.3.tgz#7ddd3e408f8542647ed612019cfb780830993698"
   dependencies:
-    "@webassemblyjs/ast" "1.4.2"
-    "@webassemblyjs/helper-wasm-bytecode" "1.4.2"
-    "@webassemblyjs/leb128" "1.4.2"
-    "@webassemblyjs/wasm-parser" "1.4.2"
-    webassemblyjs "1.4.2"
+    "@webassemblyjs/ast" "1.4.3"
+    "@webassemblyjs/helper-wasm-bytecode" "1.4.3"
+    "@webassemblyjs/leb128" "1.4.3"
+    "@webassemblyjs/wasm-parser" "1.4.3"
+    webassemblyjs "1.4.3"
 
-"@webassemblyjs/wast-parser@1.4.2":
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-parser/-/wast-parser-1.4.2.tgz#6499c38cf8895a81394f7e40d4681a85aaa84498"
+"@webassemblyjs/wast-parser@1.4.3":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-parser/-/wast-parser-1.4.3.tgz#3250402e2c5ed53dbe2233c9de1fe1f9f0d51745"
   dependencies:
-    "@webassemblyjs/ast" "1.4.2"
-    "@webassemblyjs/floating-point-hex-parser" "1.4.2"
-    "@webassemblyjs/helper-code-frame" "1.4.2"
-    "@webassemblyjs/helper-fsm" "1.4.2"
+    "@webassemblyjs/ast" "1.4.3"
+    "@webassemblyjs/floating-point-hex-parser" "1.4.3"
+    "@webassemblyjs/helper-code-frame" "1.4.3"
+    "@webassemblyjs/helper-fsm" "1.4.3"
     long "^3.2.0"
-    webassemblyjs "1.4.2"
+    webassemblyjs "1.4.3"
 
-"@webassemblyjs/wast-printer@1.4.2":
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.4.2.tgz#ee70a828f0d9730b55b9a5c3ed694094ba68ba57"
+"@webassemblyjs/wast-printer@1.4.3":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.4.3.tgz#3d59aa8d0252d6814a3ef4e6d2a34c9ded3904e0"
   dependencies:
-    "@webassemblyjs/ast" "1.4.2"
-    "@webassemblyjs/wast-parser" "1.4.2"
+    "@webassemblyjs/ast" "1.4.3"
+    "@webassemblyjs/wast-parser" "1.4.3"
     long "^3.2.0"
 
 JSONStream@^1.0.4:
@@ -1162,7 +1306,7 @@ acorn@^3.0.4:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
 
-acorn@^5.0.0, acorn@^5.3.0, acorn@^5.5.0:
+acorn@^5.0.0, acorn@^5.3.0, acorn@^5.5.0, acorn@^5.5.3:
   version "5.5.3"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.5.3.tgz#f473dd47e0277a08e28e9bec5aeeb04751f0b8c9"
 
@@ -1187,6 +1331,10 @@ agent-base@^4.1.0:
   dependencies:
     es6-promisify "^5.0.0"
 
+agentkeepalive@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/agentkeepalive/-/agentkeepalive-2.2.0.tgz#c5d1bd4b129008f1163f236f86e5faea2026e2ef"
+
 ajv-keywords@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762"
@@ -1220,6 +1368,35 @@ ajv@^6.1.0:
     json-schema-traverse "^0.3.0"
     uri-js "^4.2.1"
 
+algoliasearch-helper@^2.26.0:
+  version "2.26.0"
+  resolved "https://registry.yarnpkg.com/algoliasearch-helper/-/algoliasearch-helper-2.26.0.tgz#cb784b692a5aacf17062493cb0b94f6d60d30d0f"
+  dependencies:
+    events "^1.1.1"
+    lodash "^4.17.5"
+    qs "^6.5.1"
+    util "^0.10.3"
+
+algoliasearch@^3.27.0:
+  version "3.27.1"
+  resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-3.27.1.tgz#e1af42b97dbf44a2dd3a8c907be99c0c34e48414"
+  dependencies:
+    agentkeepalive "^2.2.0"
+    debug "^2.6.8"
+    envify "^4.0.0"
+    es6-promise "^4.1.0"
+    events "^1.1.0"
+    foreach "^2.0.5"
+    global "^4.3.2"
+    inherits "^2.0.1"
+    isarray "^2.0.1"
+    load-script "^1.0.0"
+    object-keys "^1.0.11"
+    querystring-es3 "^0.2.1"
+    reduce "^1.0.1"
+    semver "^5.1.0"
+    tunnel-agent "^0.6.0"
+
 align-text@^0.1.1, align-text@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
@@ -1282,6 +1459,10 @@ ansi-wrap@0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf"
 
+ansi_up@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/ansi_up/-/ansi_up-2.0.3.tgz#2b5d31df72121dab78ea34f5b2daf626e01578a2"
+
 any-observable@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/any-observable/-/any-observable-0.2.0.tgz#c67870058003579009083f54ac0abafb5c33d242"
@@ -1300,6 +1481,170 @@ anymatch@^2.0.0:
     micromatch "^3.1.4"
     normalize-path "^2.1.1"
 
+apollo-cache-control@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/apollo-cache-control/-/apollo-cache-control-0.1.1.tgz#173d14ceb3eb9e7cb53de7eb8b61bee6159d4171"
+  dependencies:
+    graphql-extensions "^0.0.x"
+
+apollo-cache-inmemory@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/apollo-cache-inmemory/-/apollo-cache-inmemory-1.2.1.tgz#1f8222270aa7983eb9d2ac30057196378ab3bb01"
+  dependencies:
+    apollo-cache "^1.1.8"
+    apollo-utilities "^1.0.12"
+    graphql-anywhere "^4.1.10"
+
+apollo-cache@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/apollo-cache/-/apollo-cache-1.1.8.tgz#b078d33dec876d52b5a81a325d3c254d4e362d3c"
+  dependencies:
+    apollo-utilities "^1.0.12"
+
+apollo-client@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/apollo-client/-/apollo-client-2.3.1.tgz#64b204779b7e8b21f901529527a9a9c973eb7fd4"
+  dependencies:
+    "@types/zen-observable" "^0.5.3"
+    apollo-cache "^1.1.8"
+    apollo-link "^1.0.0"
+    apollo-link-dedup "^1.0.0"
+    apollo-utilities "^1.0.12"
+    symbol-observable "^1.0.2"
+    zen-observable "^0.8.0"
+  optionalDependencies:
+    "@types/async" "2.0.49"
+
+apollo-engine-binary-darwin@0.2018.4-86-gf35bdc892:
+  version "0.2018.4-86-gf35bdc892"
+  resolved "https://registry.yarnpkg.com/apollo-engine-binary-darwin/-/apollo-engine-binary-darwin-0.2018.4-86-gf35bdc892.tgz#f1e4ae4b72afdb298039d0230e38dab8774c8890"
+
+apollo-engine-binary-linux@0.2018.4-86-gf35bdc892:
+  version "0.2018.4-86-gf35bdc892"
+  resolved "https://registry.yarnpkg.com/apollo-engine-binary-linux/-/apollo-engine-binary-linux-0.2018.4-86-gf35bdc892.tgz#bc63eee10cb5191d7eb5e61f01d50e28983c89d7"
+
+apollo-engine-binary-windows@0.2018.4-86-gf35bdc892:
+  version "0.2018.4-86-gf35bdc892"
+  resolved "https://registry.yarnpkg.com/apollo-engine-binary-windows/-/apollo-engine-binary-windows-0.2018.4-86-gf35bdc892.tgz#1e02f8ceb9f75ab72551f584a4730260907ef199"
+
+apollo-engine@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/apollo-engine/-/apollo-engine-1.1.1.tgz#5e0ea8f1d6d23b5b931cee5404c472893045b201"
+  dependencies:
+    "@types/connect" "^3.4.31"
+    "@types/express" "^4.0.36"
+    "@types/koa" "^2.0.39"
+    "@types/koa-bodyparser" "^4.2.0"
+    "@types/koa-router" "^7.0.27"
+    "@types/restify" "^5.0.7"
+  optionalDependencies:
+    apollo-engine-binary-darwin "0.2018.4-86-gf35bdc892"
+    apollo-engine-binary-linux "0.2018.4-86-gf35bdc892"
+    apollo-engine-binary-windows "0.2018.4-86-gf35bdc892"
+
+apollo-link-context@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/apollo-link-context/-/apollo-link-context-1.0.8.tgz#c967a56ac6ed32add748937735bcb57c5cc64c95"
+  dependencies:
+    apollo-link "^1.2.2"
+
+apollo-link-dedup@^1.0.0:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/apollo-link-dedup/-/apollo-link-dedup-1.0.9.tgz#3c4e4af88ef027cbddfdb857c043fd0574051dad"
+  dependencies:
+    apollo-link "^1.2.2"
+
+apollo-link-http-common@^0.2.3, apollo-link-http-common@^0.2.4:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/apollo-link-http-common/-/apollo-link-http-common-0.2.4.tgz#877603f7904dc8f70242cac61808b1f8d034b2c3"
+  dependencies:
+    apollo-link "^1.2.2"
+
+apollo-link-http@^1.5.4:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/apollo-link-http/-/apollo-link-http-1.5.4.tgz#b80b7b4b342c655b6a5614624b076a36be368f43"
+  dependencies:
+    apollo-link "^1.2.2"
+    apollo-link-http-common "^0.2.4"
+
+apollo-link-persisted-queries@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/apollo-link-persisted-queries/-/apollo-link-persisted-queries-0.2.0.tgz#3f970f1f07caabf050b18d5acc1aa6d058993339"
+  dependencies:
+    apollo-link "^1.2.1"
+    hash.js "^1.1.3"
+
+apollo-link-ws@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/apollo-link-ws/-/apollo-link-ws-1.0.8.tgz#ac1de8f29e92418728479a9a523af9f75b9ccc8b"
+  dependencies:
+    apollo-link "^1.2.2"
+
+apollo-link@1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/apollo-link/-/apollo-link-1.2.1.tgz#c120b16059f9bd93401b9f72b94d2f80f3f305d2"
+  dependencies:
+    "@types/node" "^9.4.6"
+    apollo-utilities "^1.0.0"
+    zen-observable-ts "^0.8.6"
+
+apollo-link@^1.0.0, apollo-link@^1.2.1, apollo-link@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/apollo-link/-/apollo-link-1.2.2.tgz#54c84199b18ac1af8d63553a68ca389c05217a03"
+  dependencies:
+    "@types/graphql" "0.12.6"
+    apollo-utilities "^1.0.0"
+    zen-observable-ts "^0.8.9"
+
+apollo-server-core@^1.3.6:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/apollo-server-core/-/apollo-server-core-1.3.6.tgz#08636243c2de56fa8c267d68dd602cb1fbd323e3"
+  dependencies:
+    apollo-cache-control "^0.1.0"
+    apollo-tracing "^0.1.0"
+    graphql-extensions "^0.0.x"
+
+apollo-server-express@^1.3.6:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/apollo-server-express/-/apollo-server-express-1.3.6.tgz#2120b05021a87def44fafd846e8a0e2a32852db7"
+  dependencies:
+    apollo-server-core "^1.3.6"
+    apollo-server-module-graphiql "^1.3.4"
+
+apollo-server-module-graphiql@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/apollo-server-module-graphiql/-/apollo-server-module-graphiql-1.3.4.tgz#50399b7c51b7267d0c841529f5173e5fc7304de4"
+
+apollo-tracing@^0.1.0:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/apollo-tracing/-/apollo-tracing-0.1.4.tgz#5b8ae1b01526b160ee6e552a7f131923a9aedcc7"
+  dependencies:
+    graphql-extensions "~0.0.9"
+
+apollo-upload-client@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/apollo-upload-client/-/apollo-upload-client-8.0.0.tgz#0067f3b426b3828f971964799bc31f8073bd0607"
+  dependencies:
+    "@babel/runtime" "^7.0.0-beta.40"
+    apollo-link-http-common "^0.2.3"
+    extract-files "^3.1.0"
+
+apollo-upload-server@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/apollo-upload-server/-/apollo-upload-server-5.0.0.tgz#c953b523608313966e0c8444637f4ae8ef77d5bc"
+  dependencies:
+    "@babel/runtime" "^7.0.0-beta.40"
+    busboy "^0.2.14"
+    object-path "^0.11.4"
+
+apollo-utilities@^1.0.0, apollo-utilities@^1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/apollo-utilities/-/apollo-utilities-1.0.12.tgz#9e2b2a34cf89f3bf0d73a664effd8c1bb5d1b7f7"
+
+apollo-utilities@^1.0.1:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/apollo-utilities/-/apollo-utilities-1.0.11.tgz#cd36bfa6e5c04eea2caf0c204a0f38a0ad550802"
+
 app-root-path@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/app-root-path/-/app-root-path-2.0.1.tgz#cd62dcf8e4fd5a417efc664d2e5b10653c651b46"
@@ -1703,6 +2048,10 @@ babylon@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
 
+backo2@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947"
+
 balanced-match@^0.4.2:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"
@@ -1766,7 +2115,7 @@ bluebird@3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.0.tgz#791420d7f551eea2897453a8a77653f96606d67c"
 
-bluebird@^3.0.5, bluebird@^3.1.1, bluebird@^3.5.1:
+bluebird@3.5.1, bluebird@^3.0.5, bluebird@^3.1.1, bluebird@^3.5.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
 
@@ -2017,6 +2366,13 @@ builtins@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/builtins/-/builtins-1.0.3.tgz#cb94faeb61c8696451db36534e1422f94f0aee88"
 
+busboy@^0.2.14:
+  version "0.2.14"
+  resolved "https://registry.yarnpkg.com/busboy/-/busboy-0.2.14.tgz#6c2a622efcf47c57bbbe1e2a9c37ad36c7925453"
+  dependencies:
+    dicer "0.2.5"
+    readable-stream "1.1.x"
+
 byline@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/byline/-/byline-5.0.0.tgz#741c5216468eadc457b03410118ad77de8c1ddb1"
@@ -2371,7 +2727,7 @@ cliui@^4.0.0, cliui@^4.1.0:
     strip-ansi "^4.0.0"
     wrap-ansi "^2.0.0"
 
-clone@2.x:
+clone@2.x, clone@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.1.tgz#d217d1e961118e3ac9a4b8bba3285553bf647cdb"
 
@@ -2854,7 +3210,7 @@ copy-webpack-plugin@^4.5.1:
     p-limit "^1.0.0"
     serialize-javascript "^1.4.0"
 
-core-js@^2.4.0, core-js@^2.5.3:
+core-js@^2.4.0, core-js@^2.4.1, core-js@^2.5.3:
   version "2.5.6"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.6.tgz#0fe6d45bf3cac3ac364a9d72de7576f4eb221b9d"
 
@@ -2944,6 +3300,20 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+cross-env@^5.1.5:
+  version "5.1.5"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-5.1.5.tgz#31daf7f3a52ef337c8ddda585f08175cce5d1fa5"
+  dependencies:
+    cross-spawn "^5.1.0"
+    is-windows "^1.0.0"
+
+cross-fetch@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-2.0.0.tgz#a17475449561e0f325146cea636a8619efb9b382"
+  dependencies:
+    node-fetch "2.0.0"
+    whatwg-fetch "2.0.3"
+
 cross-spawn@^5.0.1, cross-spawn@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@@ -3017,6 +3387,10 @@ css-loader@^0.28.11:
     postcss-value-parser "^3.3.0"
     source-list-map "^2.0.0"
 
+css-parse@1.7.x:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/css-parse/-/css-parse-1.7.0.tgz#321f6cf73782a6ff751111390fc05e2c657d8c9b"
+
 css-select@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
@@ -3315,7 +3689,7 @@ deepmerge@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
 
-deepmerge@^2.0.1, deepmerge@^2.1.0:
+deepmerge@^2.0.0, deepmerge@^2.0.1, deepmerge@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.1.0.tgz#511a54fff405fc346f0240bb270a3e9533a31102"
 
@@ -3408,6 +3782,10 @@ depd@~1.1.1, depd@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
 
+deprecated-decorator@^0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/deprecated-decorator/-/deprecated-decorator-0.1.6.tgz#00966317b7a12fe92f3cc831f7583af329b86c37"
+
 des.js@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.0.tgz#c074d2e2aa6a8a9a07dbd61f9a15c2cd83ec8ecc"
@@ -3441,6 +3819,13 @@ detect-node@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.3.tgz#a2033c09cc8e158d37748fbde7507832bd6ce127"
 
+dicer@0.2.5:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/dicer/-/dicer-0.2.5.tgz#5996c086bb33218c812c090bddc09cd12facb70f"
+  dependencies:
+    readable-stream "1.1.x"
+    streamsearch "0.1.2"
+
 diff@1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-1.4.0.tgz#7f28d2eb9ee7b15a97efd89ce63dcfdaa3ccbabf"
@@ -3507,6 +3892,10 @@ dom-serializer@0:
     domelementtype "~1.1.1"
     entities "~1.1.1"
 
+dom-walk@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
+
 domain-browser@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
@@ -3593,7 +3982,7 @@ duplexer3@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
 
-duplexer@^0.1.1:
+duplexer@^0.1.1, duplexer@~0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
 
@@ -3606,6 +3995,10 @@ duplexify@^3.4.2, duplexify@^3.6.0:
     readable-stream "^2.0.0"
     stream-shift "^1.0.0"
 
+easy-stack@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/easy-stack/-/easy-stack-1.0.0.tgz#12c91b3085a37f0baa336e9486eac4bf94e3e788"
+
 ecc-jsbn@~0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
@@ -3701,6 +4094,13 @@ entities@^1.1.1, entities@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
 
+envify@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/envify/-/envify-4.1.0.tgz#f39ad3db9d6801b4e6b478b61028d3f0b6819f7e"
+  dependencies:
+    esprima "^4.0.0"
+    through "~2.3.4"
+
 errno@^0.1.3, errno@~0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
@@ -3760,7 +4160,7 @@ es6-iterator@~2.0.3:
     es5-ext "^0.10.35"
     es6-symbol "^3.1.1"
 
-es6-promise@^4.0.3:
+es6-promise@^4.0.3, es6-promise@^4.1.0:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.4.tgz#dc4221c2b16518760bd8c39a52d8f356fc00ed29"
 
@@ -3777,7 +4177,7 @@ es6-symbol@^3.1.1, es6-symbol@~3.1.1:
     d "1"
     es5-ext "~0.10.14"
 
-escape-html@~1.0.3:
+escape-html@^1.0.3, escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
 
@@ -4022,11 +4422,31 @@ etag@~1.8.1:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
 
+event-pubsub@4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/event-pubsub/-/event-pubsub-4.3.0.tgz#f68d816bc29f1ec02c539dc58c8dd40ce72cb36e"
+
+event-stream@~3.3.0:
+  version "3.3.4"
+  resolved "http://registry.npmjs.org/event-stream/-/event-stream-3.3.4.tgz#4ab4c9a0f5a54db9338b4c34d86bfce8f4b35571"
+  dependencies:
+    duplexer "~0.1.1"
+    from "~0"
+    map-stream "~0.1.0"
+    pause-stream "0.0.11"
+    split "0.3"
+    stream-combiner "~0.0.4"
+    through "~2.3.1"
+
+eventemitter3@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-2.0.3.tgz#b5e1079b59fb5e1ba2771c0a993be060a58c99ba"
+
 eventemitter3@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.0.tgz#090b4d6cdbd645ed10bf750d4b5407942d7ba163"
 
-events@^1.0.0:
+events@^1.0.0, events@^1.1.0, events@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
 
@@ -4049,7 +4469,7 @@ exec-sh@^0.2.0:
   dependencies:
     merge "^1.1.3"
 
-execa@^0.10.0:
+execa@0.10.0, execa@^0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/execa/-/execa-0.10.0.tgz#ff456a8f53f90f8eccc71a96d11bdfc7f082cb50"
   dependencies:
@@ -4085,18 +4505,6 @@ execa@^0.8.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
-execa@^0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-0.9.0.tgz#adb7ce62cf985071f60580deb4a88b9e34712d01"
-  dependencies:
-    cross-spawn "^5.0.1"
-    get-stream "^3.0.0"
-    is-stream "^1.1.0"
-    npm-run-path "^2.0.0"
-    p-finally "^1.0.0"
-    signal-exit "^3.0.0"
-    strip-eof "^1.0.0"
-
 exit-hook@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
@@ -4140,6 +4548,10 @@ expect@^22.4.3:
     jest-message-util "^22.4.3"
     jest-regex-util "^22.4.3"
 
+express-history-api-fallback@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/express-history-api-fallback/-/express-history-api-fallback-2.2.1.tgz#3a2ad27f7bebc90fc533d110d7c6d83097bcd057"
+
 express-urlrewrite@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/express-urlrewrite/-/express-urlrewrite-1.2.0.tgz#8e667b7761ff1c7ffdb0efa05d64035387c823eb"
@@ -4226,6 +4638,12 @@ extglob@^2.0.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
+extract-files@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/extract-files/-/extract-files-3.1.0.tgz#b70424c9d4a1a4208efe22069388f428e4ae00f1"
+  dependencies:
+    "@babel/runtime" "^7.0.0-beta.38"
+
 extract-from-css@^0.4.4:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/extract-from-css/-/extract-from-css-0.4.4.tgz#1ea7df2e7c7c6eb9922fa08e8adaea486f6f8f92"
@@ -4331,6 +4749,10 @@ file-entry-cache@^2.0.0:
     flat-cache "^1.2.1"
     object-assign "^4.0.1"
 
+file-icons-js@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/file-icons-js/-/file-icons-js-1.0.3.tgz#d0765dc1d86aba4b2d7664a39e4ef7af9f12c5af"
+
 file-loader@^1.1.11:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-1.1.11.tgz#6fe886449b0f2a936e43cabaac0cdbfb369506f8"
@@ -4476,6 +4898,10 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.1"
     readable-stream "^2.0.4"
 
+focus-visible@^4.1.0:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/focus-visible/-/focus-visible-4.1.4.tgz#f9963bcf5784b1d9dcde62ba53214d38a4f3f9af"
+
 follow-redirects@^1.0.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.4.1.tgz#d8120f4518190f55aac65bb6fc7b85fcd666d6aa"
@@ -4561,6 +4987,10 @@ from2@^2.1.0:
     inherits "^2.0.1"
     readable-stream "^2.0.0"
 
+from@~0:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/from/-/from-0.1.7.tgz#83c60afc58b9c56997007ed1a768b3ab303a44fe"
+
 fs-constants@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
@@ -4630,13 +5060,20 @@ fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
 
-fsevents@^1.0.0, fsevents@^1.1.2, fsevents@^1.2.3:
+fsevents@^1.0.0, fsevents@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.3.tgz#08292982e7059f6674c93d8b829c1e8604979ac0"
   dependencies:
     nan "^2.9.2"
     node-pre-gyp "^0.9.0"
 
+fsevents@^1.1.2:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.4.tgz#f41dcb1af2582af3692da36fc55cbd8e1041c426"
+  dependencies:
+    nan "^2.9.2"
+    node-pre-gyp "^0.10.0"
+
 ftp@~0.3.10:
   version "0.3.10"
   resolved "https://registry.yarnpkg.com/ftp/-/ftp-0.3.10.tgz#9197d861ad8142f3e63d5a83bfe4c59f7330885d"
@@ -4824,6 +5261,17 @@ glob@7.0.5:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@7.0.x:
+  version "7.0.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.0.6.tgz#211bafaf49e525b8cd93260d14ab136152b3f57a"
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.2"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 glob@7.1.2, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
@@ -4841,6 +5289,13 @@ global-dirs@^0.1.0:
   dependencies:
     ini "^1.3.4"
 
+global@^4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/global/-/global-4.3.2.tgz#e76989268a6c74c38908b1305b10fc0e394e9d0f"
+  dependencies:
+    min-document "^2.19.0"
+    process "~0.5.1"
+
 globals@^11.0.1, globals@^11.1.0:
   version "11.5.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.5.0.tgz#6bc840de6771173b191f13d3a9c94d441ee92642"
@@ -4917,6 +5372,83 @@ graceful-fs@^4.1.10, graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.3
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
 
+graphql-anywhere@^4.1.10:
+  version "4.1.10"
+  resolved "https://registry.yarnpkg.com/graphql-anywhere/-/graphql-anywhere-4.1.10.tgz#247ada0c8d85b9d5d6b37180973442ac68ff15de"
+  dependencies:
+    apollo-utilities "^1.0.12"
+
+graphql-config@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/graphql-config/-/graphql-config-2.0.0.tgz#daf69091055c6f675d63893a2d14c48f3fec3327"
+  dependencies:
+    graphql-import "^0.4.0"
+    graphql-request "^1.4.0"
+    js-yaml "^3.10.0"
+    lodash "^4.17.4"
+    minimatch "^3.0.4"
+
+graphql-extensions@^0.0.x, graphql-extensions@~0.0.9:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/graphql-extensions/-/graphql-extensions-0.0.10.tgz#34bdb2546d43f6a5bc89ab23c295ec0466c6843d"
+  dependencies:
+    core-js "^2.5.3"
+    source-map-support "^0.5.1"
+
+graphql-import@^0.4.0:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/graphql-import/-/graphql-import-0.4.5.tgz#e2f18c28d335733f46df8e0733d8deb1c6e2a645"
+  dependencies:
+    lodash "^4.17.4"
+
+graphql-playground-html@1.5.5:
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/graphql-playground-html/-/graphql-playground-html-1.5.5.tgz#e2aca543eb66b435ead495b45244b2604d6b2d48"
+  dependencies:
+    graphql-config "2.0.0"
+
+graphql-playground-middleware-express@^1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/graphql-playground-middleware-express/-/graphql-playground-middleware-express-1.6.2.tgz#3efe103cd222d6cf39e71f70c48be550c47b7a9b"
+  dependencies:
+    graphql-playground-html "1.5.5"
+
+graphql-request@^1.4.0:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/graphql-request/-/graphql-request-1.5.2.tgz#cf329fad59e36daf6925f41751b4ba8ad93371c3"
+  dependencies:
+    cross-fetch "2.0.0"
+
+graphql-subscriptions@^0.5.8:
+  version "0.5.8"
+  resolved "https://registry.yarnpkg.com/graphql-subscriptions/-/graphql-subscriptions-0.5.8.tgz#13a6143c546bce390404657dc73ca501def30aa7"
+  dependencies:
+    iterall "^1.2.1"
+
+graphql-tag@^2.9.2:
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.9.2.tgz#2f60a5a981375f430bf1e6e95992427dc18af686"
+
+graphql-tools@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/graphql-tools/-/graphql-tools-3.0.2.tgz#fb79821c23b0f5d11d842c4d0c15000d856c6c8c"
+  dependencies:
+    apollo-link "1.2.1"
+    apollo-utilities "^1.0.1"
+    deprecated-decorator "^0.1.6"
+    iterall "^1.1.3"
+    uuid "^3.1.0"
+
+graphql-type-json@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/graphql-type-json/-/graphql-type-json-0.2.1.tgz#d2c177e2f1b17d87f81072cd05311c0754baa420"
+
+graphql@^0.13.0, graphql@^0.13.2:
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.13.2.tgz#4c740ae3c222823e7004096f832e7b93b2108270"
+  dependencies:
+    iterall "^1.2.1"
+
 gray-matter@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/gray-matter/-/gray-matter-2.1.1.tgz#3042d9adec2a1ded6a7707a9ed2380f8a17a430e"
@@ -5059,7 +5591,7 @@ hash-sum@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-1.0.2.tgz#33b40777754c6432573c120cc3808bbd10d47f04"
 
-hash.js@^1.0.0, hash.js@^1.0.3:
+hash.js@^1.0.0, hash.js@^1.0.3, hash.js@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.3.tgz#340dedbe6290187151c1ea1d777a3448935df846"
   dependencies:
@@ -5302,6 +5834,10 @@ iferr@^0.1.5:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
 
+ignore-by-default@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09"
+
 ignore-walk@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.1.tgz#a83e62e7d272ac0e3b551aaa82831a19b69f82f8"
@@ -5764,7 +6300,7 @@ is-windows@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-0.2.0.tgz#de1aa6d63ea29dd248737b69f1ff8b8002d2108c"
 
-is-windows@^1.0.2:
+is-windows@^1.0.0, is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
 
@@ -5784,10 +6320,18 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
 
+isarray@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.4.tgz#38e7bcbb0f3ba1b7933c86ba1894ddfc3781bbb7"
+
 isbinaryfile@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-3.0.2.tgz#4a3e974ec0cba9004d3fc6cde7209ea69368a621"
 
+isemail@2.x.x:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/isemail/-/isemail-2.2.1.tgz#0353d3d9a62951080c262c2aa0a42b8ea8e9e2a6"
+
 isemail@3.x.x:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/isemail/-/isemail-3.1.2.tgz#937cf919002077999a73ea8b1951d590e84e01dd"
@@ -5893,6 +6437,14 @@ isurl@^1.0.0-alpha5:
     has-to-string-tag-x "^1.2.0"
     is-object "^1.0.1"
 
+items@2.x.x:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/items/-/items-2.1.1.tgz#8bd16d9c83b19529de5aea321acaada78364a198"
+
+iterall@^1.1.3, iterall@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.2.2.tgz#92d70deb8028e0c39ff3164fdbf4d8b088130cd7"
+
 javascript-stringify@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/javascript-stringify/-/javascript-stringify-1.6.0.tgz#142d111f3a6e3dae8f4a9afd77d45855b5a9cce3"
@@ -6203,6 +6755,16 @@ joi@^12.0.0:
     isemail "3.x.x"
     topo "2.x.x"
 
+joi@^9.2.0:
+  version "9.2.0"
+  resolved "https://registry.yarnpkg.com/joi/-/joi-9.2.0.tgz#3385ac790192130cbe230e802ec02c9215bbfeda"
+  dependencies:
+    hoek "4.x.x"
+    isemail "2.x.x"
+    items "2.x.x"
+    moment "2.x.x"
+    topo "2.x.x"
+
 js-base64@^2.1.9:
   version "2.4.3"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.3.tgz#2e545ec2b0f2957f41356510205214e98fad6582"
@@ -6216,11 +6778,21 @@ js-beautify@^1.6.12, js-beautify@^1.6.14:
     mkdirp "~0.5.0"
     nopt "~3.0.1"
 
+js-message@1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/js-message/-/js-message-1.0.5.tgz#2300d24b1af08e89dd095bc1a4c9c9cfcb892d15"
+
+js-queue@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/js-queue/-/js-queue-2.0.0.tgz#362213cf860f468f0125fc6c96abc1742531f948"
+  dependencies:
+    easy-stack "^1.0.0"
+
 js-tokens@^3.0.0, js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
 
-js-yaml@^3.10.0, js-yaml@^3.4.3, js-yaml@^3.5.2, js-yaml@^3.7.0, js-yaml@^3.8.1, js-yaml@^3.9.0, js-yaml@^3.9.1:
+js-yaml@^3.10.0, js-yaml@^3.11.0, js-yaml@^3.4.3, js-yaml@^3.5.2, js-yaml@^3.7.0, js-yaml@^3.8.1, js-yaml@^3.9.0, js-yaml@^3.9.1:
   version "3.11.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.11.0.tgz#597c1a8bd57152f26d622ce4117851a51f5ebaef"
   dependencies:
@@ -6530,7 +7102,7 @@ levn@^0.3.0, levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
-lint-staged@^6.0.1:
+lint-staged@^6.0.0, lint-staged@^6.0.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-6.1.1.tgz#cd08c4d9b8ccc2d37198d1c47ce77d22be6cf324"
   dependencies:
@@ -6665,6 +7237,10 @@ load-json-file@^4.0.0:
     pify "^3.0.0"
     strip-bom "^3.0.0"
 
+load-script@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
+
 loader-fs-cache@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/loader-fs-cache/-/loader-fs-cache-1.0.1.tgz#56e0bf08bd9708b26a765b68509840c8dec9fdbc"
@@ -6766,6 +7342,10 @@ lodash._stack@^4.0.0:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/lodash._stack/-/lodash._stack-4.1.3.tgz#751aa76c1b964b047e76d14fc72a093fcb5e2dd0"
 
+lodash.assign@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
+
 lodash.camelcase@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
@@ -6825,7 +7405,11 @@ lodash.isfunction@^3.0.8:
   version "3.0.9"
   resolved "https://registry.yarnpkg.com/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz#06de25df4db327ac931981d1bdb067e5af68d051"
 
-lodash.isplainobject@^4.0.0:
+lodash.isobject@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/lodash.isobject/-/lodash.isobject-3.0.2.tgz#3c8fb8d5b5bf4bf90ae06e14f2a530a4ed935e1d"
+
+lodash.isplainobject@^4.0.0, lodash.isplainobject@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
 
@@ -6845,10 +7429,18 @@ lodash.keysin@^4.0.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.keysin/-/lodash.keysin-4.2.0.tgz#8cc3fb35c2d94acc443a1863e02fa40799ea6f28"
 
+lodash.mapvalues@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz#1bafa5005de9dd6f4f26668c30ca37230cc9689c"
+
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
 
+lodash.merge@^4.6.0, lodash.merge@^4.6.1:
+  version "4.6.1"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.1.tgz#adc25d9cb99b9391c59624f379fbba60d7111d54"
+
 lodash.mergewith@^4.0.0:
   version "4.6.1"
   resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz#639057e726c3afbdb3e7d42741caa8d6e4335927"
@@ -6882,6 +7474,14 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "~3.0.0"
 
+lodash.throttle@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+
+lodash.transform@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.transform/-/lodash.transform-4.6.0.tgz#12306422f63324aed8483d3f38332b5f670547a0"
+
 lodash.unescape@4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/lodash.unescape/-/lodash.unescape-4.0.1.tgz#bf2249886ce514cda112fae9218cdc065211fc9c"
@@ -6959,6 +7559,16 @@ lowdb@^0.15.0:
     lodash "4"
     steno "^0.4.1"
 
+lowdb@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lowdb/-/lowdb-1.0.0.tgz#5243be6b22786ccce30e50c9a33eac36b20c8064"
+  dependencies:
+    graceful-fs "^4.1.3"
+    is-promise "^2.1.0"
+    lodash "4"
+    pify "^3.0.0"
+    steno "^0.4.1"
+
 lower-case@^1.1.1:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
@@ -7012,12 +7622,24 @@ map-obj@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-2.0.0.tgz#a65cd29087a92598b8791257a523e021222ac1f9"
 
+map-stream@~0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/map-stream/-/map-stream-0.1.0.tgz#e56aa94c4c8055a16404a0674b78f215f7c8e194"
+
 map-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
   dependencies:
     object-visit "^1.0.0"
 
+material-colors@^1.0.0:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.5.tgz#5292593e6754cb1bcc2b98030e4e0d6a3afc9ea1"
+
+material-design-icons@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/material-design-icons/-/material-design-icons-3.0.1.tgz#9a71c48747218ebca51e51a66da682038cdcb7bf"
+
 math-expression-evaluator@^1.2.14:
   version "1.2.17"
   resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac"
@@ -7217,6 +7839,12 @@ mimic-fn@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
 
+min-document@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
+  dependencies:
+    dom-walk "^0.1.0"
+
 mini-css-extract-plugin@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.0.tgz#ff3bf08bee96e618e177c16ca6131bfecef707f9"
@@ -7268,10 +7896,10 @@ minimist@~0.0.1:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
 
 minipass@^2.2.1, minipass@^2.2.4:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.3.0.tgz#2e11b1c46df7fe7f1afbe9a490280add21ffe384"
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.3.3.tgz#a7dcc8b7b833f5d368759cce544dccb55f50f233"
   dependencies:
-    safe-buffer "^5.1.1"
+    safe-buffer "^5.1.2"
     yallist "^3.0.0"
 
 minizlib@^1.1.0:
@@ -7376,7 +8004,7 @@ modify-values@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
 
-moment@^2.6.0:
+moment@2.x.x, moment@^2.6.0:
   version "2.22.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.1.tgz#529a2e9bf973f259c9643d237fda84de3a26e8ad"
 
@@ -7518,6 +8146,10 @@ node-cache@^4.1.1:
     clone "2.x"
     lodash "4.x"
 
+node-fetch@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.0.0.tgz#982bba43ecd4f2922a29cc186a6bbb0bb73fcba6"
+
 node-forge@0.7.5:
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.5.tgz#6c152c345ce11c52f465c2abd957e8639cd674df"
@@ -7526,6 +8158,14 @@ node-int64@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
 
+node-ipc@^9.1.1:
+  version "9.1.1"
+  resolved "https://registry.yarnpkg.com/node-ipc/-/node-ipc-9.1.1.tgz#4e245ed6938e65100e595ebc5dc34b16e8dd5d69"
+  dependencies:
+    event-pubsub "4.3.0"
+    js-message "1.0.5"
+    js-queue "2.0.0"
+
 "node-libs-browser@^1.0.0 || ^2.0.0", node-libs-browser@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.1.0.tgz#5f94263d404f6e44767d726901fff05478d600df"
@@ -7563,6 +8203,21 @@ node-notifier@^5.2.1:
     shellwords "^0.1.1"
     which "^1.3.0"
 
+node-pre-gyp@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.10.0.tgz#6e4ef5bb5c5203c6552448828c852c40111aac46"
+  dependencies:
+    detect-libc "^1.0.2"
+    mkdirp "^0.5.1"
+    needle "^2.2.0"
+    nopt "^4.0.1"
+    npm-packlist "^1.1.6"
+    npmlog "^4.0.2"
+    rc "^1.1.7"
+    rimraf "^2.6.1"
+    semver "^5.3.0"
+    tar "^4"
+
 node-pre-gyp@^0.9.0:
   version "0.9.1"
   resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.9.1.tgz#f11c07516dd92f87199dbc7e1838eab7cd56c9e0"
@@ -7578,6 +8233,21 @@ node-pre-gyp@^0.9.0:
     semver "^5.3.0"
     tar "^4"
 
+nodemon@^1.17.4:
+  version "1.17.5"
+  resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-1.17.5.tgz#e6a665c872fdf09d48bf2a81f3e85f8cfb39322a"
+  dependencies:
+    chokidar "^2.0.2"
+    debug "^3.1.0"
+    ignore-by-default "^1.0.1"
+    minimatch "^3.0.4"
+    pstree.remy "^1.1.0"
+    semver "^5.5.0"
+    supports-color "^5.2.0"
+    touch "^3.1.0"
+    undefsafe "^2.0.2"
+    update-notifier "^2.3.0"
+
 nodent-runtime@^3.0.3:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/nodent-runtime/-/nodent-runtime-3.2.1.tgz#9e2755d85e39f764288f0d4752ebcfe3e541e00e"
@@ -7589,6 +8259,12 @@ nopt@^4.0.1:
     abbrev "1"
     osenv "^0.1.4"
 
+nopt@~1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee"
+  dependencies:
+    abbrev "1"
+
 nopt@~3.0.1:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
@@ -7712,10 +8388,14 @@ object-hash@^1.1.4:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.3.0.tgz#76d9ba6ff113cf8efc0d996102851fe6723963e2"
 
-object-keys@^1.0.11, object-keys@^1.0.8:
+object-keys@^1.0.11, object-keys@^1.0.8, object-keys@~1.0.0:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
 
+object-path@^0.11.4:
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/object-path/-/object-path-0.11.4.tgz#370ae752fbf37de3ea70a861c23bba8915691949"
+
 object-visit@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
@@ -8075,6 +8755,12 @@ pathval@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/pathval/-/pathval-1.1.0.tgz#b942e6d4bde653005ef6b71361def8727d0645e0"
 
+pause-stream@0.0.11:
+  version "0.0.11"
+  resolved "https://registry.yarnpkg.com/pause-stream/-/pause-stream-0.0.11.tgz#fe5a34b0cbce12b5aa6a2b403ee2e73b602f1445"
+  dependencies:
+    through "~2.3"
+
 pbkdf2@^3.0.3:
   version "3.0.16"
   resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.16.tgz#7404208ec6b01b62d85bf83853a8064f8d9c2a5c"
@@ -8141,6 +8827,10 @@ pn@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
 
+popper.js@^1.12.9:
+  version "1.14.3"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.3.tgz#1438f98d046acf7b4d78cd502bf418ac64d4f095"
+
 portfinder@^1.0.13, portfinder@^1.0.9:
   version "1.0.13"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"
@@ -8506,6 +9196,10 @@ process@^0.11.10:
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
 
+process@~0.5.1:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.5.2.tgz#1638d8a8e34c2f440a91db95ab9aeb677fc185cf"
+
 progress@1.1.8:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be"
@@ -8550,10 +9244,22 @@ prr@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
 
+ps-tree@1.1.0, ps-tree@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/ps-tree/-/ps-tree-1.1.0.tgz#b421b24140d6203f1ed3c76996b4427b08e8c014"
+  dependencies:
+    event-stream "~3.3.0"
+
 pseudomap@^1.0.1, pseudomap@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
 
+pstree.remy@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/pstree.remy/-/pstree.remy-1.1.0.tgz#f2af27265bd3e5b32bbfcc10e80bac55ba78688b"
+  dependencies:
+    ps-tree "^1.1.0"
+
 public-encrypt@^4.0.0:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.2.tgz#46eb9107206bf73489f8b85b69d91334c6610994"
@@ -8572,8 +9278,8 @@ pump@^2.0.0, pump@^2.0.1:
     once "^1.3.1"
 
 pumpify@^1.3.3:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.5.0.tgz#30c905a26c88fa0074927af07256672b474b1c15"
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.5.1.tgz#36513be246ab27570b1a374a5ce278bfd74370ce"
   dependencies:
     duplexify "^3.6.0"
     inherits "^2.0.3"
@@ -8616,6 +9322,10 @@ qs@6.5.1:
   version "6.5.1"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"
 
+qs@^6.5.1, qs@~6.5.1:
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
+
 qs@~2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/qs/-/qs-2.3.3.tgz#e9e85adbe75da0bbe4c8e0476a086290f863b404"
@@ -8624,10 +9334,6 @@ qs@~6.4.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
 
-qs@~6.5.1:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
-
 query-string@^4.1.0:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
@@ -8635,7 +9341,7 @@ query-string@^4.1.0:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
-querystring-es3@^0.2.0:
+querystring-es3@^0.2.0, querystring-es3@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
 
@@ -8856,6 +9562,12 @@ reduce-function-call@^1.0.1:
   dependencies:
     balanced-match "^0.4.2"
 
+reduce@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/reduce/-/reduce-1.0.1.tgz#14fa2e5ff1fc560703a020cbb5fbaab691565804"
+  dependencies:
+    object-keys "~1.0.0"
+
 reflect-metadata@^0.1.10:
   version "0.1.12"
   resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.1.12.tgz#311bf0c6b63cd782f228a81abe146a2bfa9c56f2"
@@ -9063,7 +9775,7 @@ request@2.81.0:
     tunnel-agent "^0.6.0"
     uuid "^3.0.0"
 
-request@^2.67.0, request@^2.83.0, request@^2.85.0:
+request@^2.67.0, request@^2.78.0, request@^2.83.0, request@^2.85.0:
   version "2.85.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.85.0.tgz#5a03615a47c61420b3eb99b7dba204f83603e1fa"
   dependencies:
@@ -9212,6 +9924,10 @@ rx-lite@*, rx-lite@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-4.0.8.tgz#0b1e11af8bc44836f04a6407e92da42467b79444"
 
+rx@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782"
+
 rxjs@^5.0.0-beta.11, rxjs@^5.4.2:
   version "5.5.10"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.5.10.tgz#fde02d7a614f6c8683d0d1957827f492e09db045"
@@ -9251,6 +9967,10 @@ sane@^2.0.0:
   optionalDependencies:
     fsevents "^1.2.3"
 
+sax@0.5.x:
+  version "0.5.8"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-0.5.8.tgz#d472db228eb331c2506b0e8c15524adb939d12c1"
+
 sax@^1.2.4, sax@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
@@ -9415,6 +10135,10 @@ shellwords@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
 
+shortid@^2.2.8:
+  version "2.2.8"
+  resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.8.tgz#033b117d6a2e975804f6f0969dbe7d3d0b355131"
+
 sigmund@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"
@@ -9543,7 +10267,7 @@ source-map-resolve@^0.5.0, source-map-resolve@^0.5.1:
     source-map-url "^0.4.0"
     urix "^0.1.0"
 
-source-map-support@^0.5.0, source-map-support@^0.5.5:
+source-map-support@^0.5.0, source-map-support@^0.5.1, source-map-support@^0.5.5:
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.5.tgz#0d4af9e00493e855402e8ec36ebed2d266fceb90"
   dependencies:
@@ -9554,16 +10278,16 @@ source-map-url@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
 
-source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1:
-  version "0.5.7"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
-
-source-map@^0.1.38:
+source-map@0.1.x, source-map@^0.1.38:
   version "0.1.43"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
   dependencies:
     amdefine ">=0.0.4"
 
+source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+
 source-map@^0.4.4:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
@@ -9631,6 +10355,12 @@ split2@^2.0.0:
   dependencies:
     through2 "^2.0.2"
 
+split@0.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/split/-/split-0.3.3.tgz#cd0eea5e63a211dfff7eb0f091c4133e2d0dd28f"
+  dependencies:
+    through "2"
+
 split@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/split/-/split-1.0.1.tgz#605bd9be303aa59fb35f9229fbea0ddec9ea07d9"
@@ -9673,6 +10403,18 @@ staged-git-files@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/staged-git-files/-/staged-git-files-1.0.0.tgz#cdb847837c1fcc52c08a872d4883cc0877668a80"
 
+start-server-and-test@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/start-server-and-test/-/start-server-and-test-1.4.1.tgz#7fa7a730fe7f00990b205adb4a96a509b196dec2"
+  dependencies:
+    bluebird "3.5.1"
+    check-more-types "2.24.0"
+    debug "3.1.0"
+    execa "0.10.0"
+    lazy-ass "1.6.0"
+    ps-tree "1.1.0"
+    wait-on "2.1.0"
+
 stat-mode@^0.2.0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/stat-mode/-/stat-mode-0.2.2.tgz#e6c80b623123d7d80cf132ce538f346289072502"
@@ -9709,6 +10451,12 @@ stream-browserify@^2.0.1:
     inherits "~2.0.1"
     readable-stream "^2.0.2"
 
+stream-combiner@~0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/stream-combiner/-/stream-combiner-0.0.4.tgz#4d5e433c185261dde623ca3f44c586bcf5c4ad14"
+  dependencies:
+    duplexer "~0.1.1"
+
 stream-each@^1.1.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/stream-each/-/stream-each-1.2.2.tgz#8e8c463f91da8991778765873fe4d960d8f616bd"
@@ -9740,6 +10488,10 @@ stream-to-observable@^0.2.0:
   dependencies:
     any-observable "^0.2.0"
 
+streamsearch@0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-0.1.2.tgz#808b9d0e56fc273d809ba57338e929919a1a9f1a"
+
 strict-uri-encode@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
@@ -9866,12 +10618,44 @@ strong-log-transformer@^1.0.6:
     moment "^2.6.0"
     through "^2.3.4"
 
+stylus-loader@^3.0.1:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/stylus-loader/-/stylus-loader-3.0.2.tgz#27a706420b05a38e038e7cacb153578d450513c6"
+  dependencies:
+    loader-utils "^1.0.2"
+    lodash.clonedeep "^4.5.0"
+    when "~3.6.x"
+
+stylus@^0.54.5:
+  version "0.54.5"
+  resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.54.5.tgz#42b9560931ca7090ce8515a798ba9e6aa3d6dc79"
+  dependencies:
+    css-parse "1.7.x"
+    debug "*"
+    glob "7.0.x"
+    mkdirp "0.5.x"
+    sax "0.5.x"
+    source-map "0.1.x"
+
 subarg@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/subarg/-/subarg-1.0.0.tgz#f62cf17581e996b48fc965699f54c06ae268b8d2"
   dependencies:
     minimist "^1.1.0"
 
+subscriptions-transport-ws@^0.9.9:
+  version "0.9.9"
+  resolved "https://registry.yarnpkg.com/subscriptions-transport-ws/-/subscriptions-transport-ws-0.9.9.tgz#8a0bdc4c31df2e90e92901047fd8961deb138acc"
+  dependencies:
+    backo2 "^1.0.2"
+    eventemitter3 "^2.0.3"
+    iterall "^1.2.1"
+    lodash.assign "^4.2.0"
+    lodash.isobject "^3.0.2"
+    lodash.isstring "^4.0.1"
+    symbol-observable "^1.0.4"
+    ws "^3.0.0"
+
 supports-color@3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.1.2.tgz#72a262894d9d408b956ca05ff37b2ed8a6e2a2d5"
@@ -9906,7 +10690,7 @@ supports-color@^4.0.0:
   dependencies:
     has-flag "^2.0.0"
 
-supports-color@^5.1.0, supports-color@^5.3.0, supports-color@^5.4.0:
+supports-color@^5.1.0, supports-color@^5.2.0, supports-color@^5.3.0, supports-color@^5.4.0:
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.4.0.tgz#1c6b337402c2137605efe19f10fec390f6faab54"
   dependencies:
@@ -9932,6 +10716,10 @@ symbol-observable@^0.2.2:
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-0.2.4.tgz#95a83db26186d6af7e7a18dbd9760a2f86d08f40"
 
+symbol-observable@^1.0.2, symbol-observable@^1.0.4:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
+
 symbol-tree@^3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
@@ -10007,6 +10795,12 @@ term-size@^1.2.0:
   dependencies:
     execa "^0.7.0"
 
+terminate@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/terminate/-/terminate-2.1.0.tgz#a87ee424be01a1d28f2f301045043a5bcd679a05"
+  dependencies:
+    ps-tree "^1.1.0"
+
 test-exclude@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-4.2.1.tgz#dfa222f03480bca69207ca728b37d74b45f724fa"
@@ -10037,6 +10831,10 @@ throat@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"
 
+throttle-debounce@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-1.0.1.tgz#dad0fe130f9daf3719fdea33dc36a8e6ba7f30b5"
+
 throttleit@~0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-0.0.2.tgz#cfedf88e60c00dd9697b61fdd2a8343a9b680eaf"
@@ -10048,7 +10846,7 @@ through2@^2.0.0, through2@^2.0.2:
     readable-stream "^2.1.5"
     xtend "~4.0.1"
 
-through@2, "through@>=2.2.7 <3", through@^2.3.4, through@^2.3.6:
+through@2, "through@>=2.2.7 <3", through@^2.3.4, through@^2.3.6, through@~2.3, through@~2.3.1, through@~2.3.4:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
 
@@ -10082,6 +10880,10 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
+tinycolor2@^1.1.2:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
+
 tmp@0.0.31:
   version "0.0.31"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.31.tgz#8f38ab9438e17315e5dbd8b3657e8bfb277ae4a7"
@@ -10150,6 +10952,12 @@ toposort@^1.0.0:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.7.tgz#2e68442d9f64ec720b8cc89e6443ac6caa950029"
 
+touch@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/touch/-/touch-3.1.0.tgz#fe365f5f75ec9ed4e56825e0bb76d24ab74af83b"
+  dependencies:
+    nopt "~1.0.10"
+
 tough-cookie@>=2.3.3, tough-cookie@^2.3.3, tough-cookie@~2.3.0, tough-cookie@~2.3.3:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.4.tgz#ec60cee38ac675063ffc97a5c18970578ee83655"
@@ -10355,6 +11163,12 @@ unc-path-regex@^0.1.0:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/unc-path-regex/-/unc-path-regex-0.1.2.tgz#e73dd3d7b0d7c5ed86fbac6b0ae7d8c6a69d50fa"
 
+undefsafe@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/undefsafe/-/undefsafe-2.0.2.tgz#225f6b9e0337663e0d8e7cfd686fc2836ccace76"
+  dependencies:
+    debug "^2.2.0"
+
 unicode-canonical-property-names-ecmascript@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.3.tgz#f6119f417467593c0086357c85546b6ad5abc583"
@@ -10447,8 +11261,8 @@ unzip-response@^2.0.1:
   resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-2.0.1.tgz#d2f0f737d16b0615e72a6935ed04214572d56f97"
 
 upath@^1.0.0:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/upath/-/upath-1.0.5.tgz#02cab9ecebe95bbec6d5fc2566325725ab6d1a73"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/upath/-/upath-1.1.0.tgz#35256597e46a581db4793d0ce47fa9aebfc9fabd"
 
 update-notifier@^2.3.0:
   version "2.5.0"
@@ -10575,6 +11389,14 @@ uuid@^3.0.0, uuid@^3.0.1, uuid@^3.1.0:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.2.1.tgz#12c528bb9d58d0b9265d9a2f6f0fe8be17ff1f14"
 
+v-tooltip@^2.0.0-rc.31:
+  version "2.0.0-rc.32"
+  resolved "https://registry.yarnpkg.com/v-tooltip/-/v-tooltip-2.0.0-rc.32.tgz#85271476c191598ac59361d0660d5da92dc88bf6"
+  dependencies:
+    lodash.merge "^4.6.0"
+    popper.js "^1.12.9"
+    vue-resize "^0.4.3"
+
 validate-npm-package-license@^3.0.1:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.3.tgz#81643bcbef1bdfecd4623793dc4648948ba98338"
@@ -10610,10 +11432,42 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
+vue-apollo@^3.0.0-beta.5:
+  version "3.0.0-beta.12"
+  resolved "https://registry.yarnpkg.com/vue-apollo/-/vue-apollo-3.0.0-beta.12.tgz#d13d4cf516d70eaf56813c10c73973a06c8152ac"
+  dependencies:
+    throttle-debounce "^1.0.1"
+
 vue-class-component@^6.0.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-6.2.0.tgz#7adb1daa9a868c75f30f97f33f4f1b94aee62089"
 
+vue-cli-plugin-apollo@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/vue-cli-plugin-apollo/-/vue-cli-plugin-apollo-0.11.0.tgz#13d390006fd44245ce4914548a0d4a11bf5198bf"
+  dependencies:
+    apollo-cache-inmemory "^1.2.1"
+    apollo-client "^2.3.1"
+    apollo-engine "^1.1.1"
+    apollo-link "^1.2.2"
+    apollo-link-context "^1.0.8"
+    apollo-link-http "^1.5.4"
+    apollo-link-persisted-queries "^0.2.0"
+    apollo-link-ws "^1.0.8"
+    apollo-server-express "^1.3.6"
+    apollo-upload-client "^8.0.0"
+    apollo-upload-server "^5.0.0"
+    apollo-utilities "^1.0.12"
+    body-parser "^1.18.2"
+    cors "^2.8.4"
+    express "^4.16.2"
+    graphql "^0.13.2"
+    graphql-playground-middleware-express "^1.6.2"
+    graphql-subscriptions "^0.5.8"
+    graphql-tools "^3.0.2"
+    nodemon "^1.17.4"
+    subscriptions-transport-ws "^0.9.9"
+
 vue-cli@^2.9.2:
   version "2.9.3"
   resolved "https://registry.yarnpkg.com/vue-cli/-/vue-cli-2.9.3.tgz#c363ec48a7f55f72b76d90f44c001cc52d2fe0a8"
@@ -10639,6 +11493,14 @@ vue-cli@^2.9.2:
     user-home "^2.0.0"
     validate-npm-package-name "^3.0.0"
 
+vue-color@^2.4.6:
+  version "2.4.6"
+  resolved "https://registry.yarnpkg.com/vue-color/-/vue-color-2.4.6.tgz#9dcd5850f7eec5ee3ac0b20bec7bbffb5f475f64"
+  dependencies:
+    lodash.throttle "^4.0.0"
+    material-colors "^1.0.0"
+    tinycolor2 "^1.1.2"
+
 vue-eslint-parser@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz#c268c96c6d94cfe3d938a5f7593959b0ca3360d1"
@@ -10654,6 +11516,18 @@ vue-hot-reload-api@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.0.tgz#97976142405d13d8efae154749e88c4e358cf926"
 
+vue-i18n@^7.6.0:
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-7.7.0.tgz#f317581e0ebc43c128662501cfabd6ecd5e7fceb"
+
+vue-instantsearch@^1.5.1:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/vue-instantsearch/-/vue-instantsearch-1.6.0.tgz#1846902b57cbe1fb72dd09ba6a0b5a284653ca95"
+  dependencies:
+    algoliasearch "^3.27.0"
+    algoliasearch-helper "^2.26.0"
+    escape-html "^1.0.3"
+
 vue-jest@^2.6.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/vue-jest/-/vue-jest-2.6.0.tgz#23dc99a4dce0bb59fea3946e1317b234968cf12a"
@@ -10679,12 +11553,24 @@ vue-loader@^15.2.0:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-meta@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/vue-meta/-/vue-meta-1.5.0.tgz#02a9f166a1e87763a87bfd47431122ed575bcdde"
+  dependencies:
+    deepmerge "^2.0.0"
+    lodash.isplainobject "^4.0.6"
+    object-assign "^4.1.1"
+
 vue-parser@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/vue-parser/-/vue-parser-1.1.6.tgz#3063c8431795664ebe429c23b5506899706e6355"
   dependencies:
     parse5 "^3.0.3"
 
+vue-progress-path@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/vue-progress-path/-/vue-progress-path-0.0.2.tgz#d780fc7a96dbc7f784eb52895aeef7a5f0af6325"
+
 vue-property-decorator@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/vue-property-decorator/-/vue-property-decorator-6.0.0.tgz#bb651b293542e31db0d24f36f4b0250ef08d8515"
@@ -10692,6 +11578,10 @@ vue-property-decorator@^6.0.0:
     reflect-metadata "^0.1.10"
     vue-class-component "^6.0.0"
 
+vue-resize@^0.4.3:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-0.4.4.tgz#dee9b8dd1b189e7e3f6ec47f86c60694a241bb17"
+
 vue-router@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.1.tgz#d9b05ad9c7420ba0f626d6500d693e60092cc1e9"
@@ -10728,6 +11618,16 @@ w3c-hr-time@^1.0.1:
   dependencies:
     browser-process-hrtime "^0.1.2"
 
+wait-on@2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/wait-on/-/wait-on-2.1.0.tgz#3c4ace1f57266ca5be7fa25e0c15803b889ca46a"
+  dependencies:
+    core-js "^2.4.1"
+    joi "^9.2.0"
+    minimist "^1.2.0"
+    request "^2.78.0"
+    rx "^4.1.0"
+
 walker@~1.0.5:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"
@@ -10740,6 +11640,13 @@ ware@^1.2.0:
   dependencies:
     wrap-fn "^0.1.0"
 
+watch@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/watch/-/watch-1.0.2.tgz#340a717bde765726fa0aa07d721e0147a551df0c"
+  dependencies:
+    exec-sh "^0.2.0"
+    minimist "^1.2.0"
+
 watch@~0.18.0:
   version "0.18.0"
   resolved "https://registry.yarnpkg.com/watch/-/watch-0.18.0.tgz#28095476c6df7c90c963138990c0a5423eb4b986"
@@ -10767,14 +11674,14 @@ wcwidth@^1.0.0, wcwidth@^1.0.1:
   dependencies:
     defaults "^1.0.3"
 
-webassemblyjs@1.4.2:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/webassemblyjs/-/webassemblyjs-1.4.2.tgz#3b07b506917c97153d83441d8a88ffa2d25cc07d"
+webassemblyjs@1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/webassemblyjs/-/webassemblyjs-1.4.3.tgz#0591893efb8fbde74498251cbe4b2d83df9239cb"
   dependencies:
-    "@webassemblyjs/ast" "1.4.2"
-    "@webassemblyjs/validation" "1.4.2"
-    "@webassemblyjs/wasm-parser" "1.4.2"
-    "@webassemblyjs/wast-parser" "1.4.2"
+    "@webassemblyjs/ast" "1.4.3"
+    "@webassemblyjs/validation" "1.4.3"
+    "@webassemblyjs/wasm-parser" "1.4.3"
+    "@webassemblyjs/wast-parser" "1.4.3"
     long "^3.2.0"
 
 webidl-conversions@^4.0.2:
@@ -10860,12 +11767,12 @@ webpack-sources@^1.0.1, webpack-sources@^1.1.0:
     source-map "~0.6.1"
 
 webpack@^4.8.2:
-  version "4.8.2"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.8.2.tgz#41aa00fd32a8f253a2f12a2da11c8ad4d52fde1c"
+  version "4.8.3"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.8.3.tgz#957c8e80000f9e5cc03d775e78b472d8954f4eeb"
   dependencies:
-    "@webassemblyjs/ast" "1.4.2"
-    "@webassemblyjs/wasm-edit" "1.4.2"
-    "@webassemblyjs/wasm-parser" "1.4.2"
+    "@webassemblyjs/ast" "1.4.3"
+    "@webassemblyjs/wasm-edit" "1.4.3"
+    "@webassemblyjs/wasm-parser" "1.4.3"
     acorn "^5.0.0"
     acorn-dynamic-import "^3.0.0"
     ajv "^6.1.0"
@@ -10903,6 +11810,10 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3:
   dependencies:
     iconv-lite "0.4.19"
 
+whatwg-fetch@2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"
+
 whatwg-mimetype@^2.0.0, whatwg-mimetype@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.1.0.tgz#f0f21d76cbba72362eb609dbed2a30cd17fcc7d4"
@@ -10915,6 +11826,10 @@ whatwg-url@^6.4.0:
     tr46 "^1.0.1"
     webidl-conversions "^4.0.2"
 
+when@~3.6.x:
+  version "3.6.4"
+  resolved "https://registry.yarnpkg.com/when/-/when-3.6.4.tgz#473b517ec159e2b85005497a13983f095412e34e"
+
 whet.extend@~0.9.9:
   version "0.9.9"
   resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1"
@@ -11149,6 +12064,10 @@ xtend@^4.0.0, xtend@~4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
 
+xterm@^3.2.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/xterm/-/xterm-3.4.1.tgz#12452979ea2db3371f8195832d7407abba988980"
+
 y18n@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
@@ -11283,3 +12202,13 @@ yorkie@^1.0.2, yorkie@^1.0.3:
     is-ci "^1.0.10"
     normalize-path "^1.0.0"
     strip-indent "^2.0.0"
+
+zen-observable-ts@^0.8.6, zen-observable-ts@^0.8.9:
+  version "0.8.9"
+  resolved "https://registry.yarnpkg.com/zen-observable-ts/-/zen-observable-ts-0.8.9.tgz#d3c97af08c0afdca37ebcadf7cc3ee96bda9bab1"
+  dependencies:
+    zen-observable "^0.8.0"
+
+zen-observable@^0.8.0:
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.8.8.tgz#1ea93995bf098754a58215a1e0a7309e5749ec42"