diff --git a/packages/@vue/cli-ui/src/components/ProjectNav.vue b/packages/@vue/cli-ui/src/components/ProjectNav.vue
index 8852ee7c56..0efe1a8b12 100644
--- a/packages/@vue/cli-ui/src/components/ProjectNav.vue
+++ b/packages/@vue/cli-ui/src/components/ProjectNav.vue
@@ -20,6 +20,8 @@
 </template>
 
 <script>
+import { isSameRoute, isIncludedRoute } from '../util/route'
+
 const BUILTIN_ROUTES = [
   {
     name: 'project-plugins',
@@ -52,14 +54,14 @@ export default {
   computed: {
     currentRoute: {
       get () {
-        const currentRoute = this.$route.name
+        const currentRoute = this.$route
         const route = this.routes.find(
-          r => currentRoute.indexOf(r.name) === 0
+          item => isIncludedRoute(currentRoute, this.$router.resolve({ name: item.name }).route)
         )
-        return route ? route.name : null
+        return route && route.name
       },
       set (name) {
-        if (this.$route.name !== name) {
+        if (!isSameRoute(this.$route, this.$router.resolve({ name }).route)) {
           this.$router.push({ name })
         }
       }
diff --git a/packages/@vue/cli-ui/src/graphql-api/channels.js b/packages/@vue/cli-ui/src/graphql-api/channels.js
index 0419e583af..10b7dff2c3 100644
--- a/packages/@vue/cli-ui/src/graphql-api/channels.js
+++ b/packages/@vue/cli-ui/src/graphql-api/channels.js
@@ -2,5 +2,7 @@ module.exports = {
   CWD_CHANGED: 'cwd_changed',
   PROGRESS_CHANGED: 'progress_changed',
   PROGRESS_REMOVED: 'progress_removed',
-  CONSOLE_LOG_ADDED: 'console_log_added'
+  CONSOLE_LOG_ADDED: 'console_log_added',
+  TASK_CHANGED: 'task_changed',
+  TASK_LOG_ADDED: 'task_log_added'
 }
diff --git a/packages/@vue/cli-ui/src/graphql-api/connectors/plugins.js b/packages/@vue/cli-ui/src/graphql-api/connectors/plugins.js
index c2d6f4725b..646bdd40ca 100644
--- a/packages/@vue/cli-ui/src/graphql-api/connectors/plugins.js
+++ b/packages/@vue/cli-ui/src/graphql-api/connectors/plugins.js
@@ -5,8 +5,7 @@ const semver = require('semver')
 const {
   isPlugin,
   isOfficialPlugin,
-  getPluginLink,
-  hasYarn
+  getPluginLink
 } = require('@vue/cli-shared-utils')
 const getPackageVersion = require('@vue/cli/lib/util/getPackageVersion')
 const {
@@ -15,7 +14,6 @@ const {
   uninstallPackage,
   updatePackage
 } = require('@vue/cli/lib/util/installDeps')
-const { loadOptions } = require('@vue/cli/lib/options')
 const invoke = require('@vue/cli/lib/invoke')
 
 const cwd = require('./cwd')
@@ -24,6 +22,8 @@ const prompts = require('./prompts')
 const progress = require('./progress')
 const logs = require('./logs')
 
+const { getCommand } = require('../utils/command')
+
 const metadataCache = new LRU({
   max: 200,
   maxAge: 1000 * 60 * 30
@@ -178,8 +178,7 @@ function install (id, context) {
 
     currentPluginId = id
 
-    const packageManager = loadOptions().packageManager || (hasYarn() ? 'yarn' : 'npm')
-    await installPackage(cwd.get(), packageManager, null, id)
+    await installPackage(cwd.get(), getCommand(), null, id)
 
     await initPrompts(id, context)
 
@@ -196,8 +195,7 @@ function uninstall (id, context) {
 
     currentPluginId = id
 
-    const packageManager = loadOptions().packageManager || (hasYarn() ? 'yarn' : 'npm')
-    await uninstallPackage(cwd.get(), packageManager, null, id)
+    await uninstallPackage(cwd.get(), getCommand(), null, id)
 
     currentPluginId = null
 
@@ -248,8 +246,7 @@ function update (id, context) {
     const plugin = findOne(id, context)
     const { current, wanted } = await getVersion(plugin, context)
 
-    const packageManager = loadOptions().packageManager || (hasYarn() ? 'yarn' : 'npm')
-    await updatePackage(cwd.get(), packageManager, null, id)
+    await updatePackage(cwd.get(), getCommand(), null, id)
 
     logs.add({
       message: `Plugin ${id} updated from ${current} to ${wanted}`,
diff --git a/packages/@vue/cli-ui/src/graphql-api/connectors/tasks.js b/packages/@vue/cli-ui/src/graphql-api/connectors/tasks.js
index a81eb420fd..660a4fd205 100644
--- a/packages/@vue/cli-ui/src/graphql-api/connectors/tasks.js
+++ b/packages/@vue/cli-ui/src/graphql-api/connectors/tasks.js
@@ -1,32 +1,176 @@
+const execa = require('execa')
+
+const channels = require('../channels')
 const cwd = require('./cwd')
 const folders = require('./folders')
+const logs = require('./logs')
+
+const { getCommand } = require('../utils/command')
 
-let 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)
-  tasks = []
   if (pkg.scripts) {
-    tasks = Object.keys(pkg.scripts).map(
-      name => ({
-        id: `${file}:${name}`,
-        name,
-        command: pkg.scripts[name],
-        status: 'idle'
+    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)
+        return {
+          id,
+          name,
+          command: pkg.scripts[name],
+          index: list.findIndex(t => t.id === id)
+        }
+      }
+    )
+
+    // Process existing tasks
+    const existingTasks = currentTasks.filter(
+      task => task.index !== -1
+    )
+    // Update tasks data
+    existingTasks.forEach(task => {
+      Object.assign(list[task.index], task)
+    })
+
+    // 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 tasks
+  return list
 }
 
 function findOne (id, context) {
-  return tasks.find(
+  return getTasks().find(
     t => t.id === id
   )
 }
 
+function updateOne (data, context) {
+  const task = findOne(data.id)
+  if (task) {
+    Object.assign(task, data)
+    context.pubsub.publish(channels.TASK_CHANGED, {
+      taskChanged: task
+    })
+  }
+  return task
+}
+
+function run (id, context) {
+  const task = findOne(id, context)
+  if (task && task.status !== 'running') {
+    const args = ['run', task.name]
+
+    const child = execa(getCommand(), args, {
+      cwd: cwd.get(),
+      stdio: ['inherit', 'pipe', 'pipe']
+    })
+
+    updateOne({
+      id: task.id,
+      status: 'running',
+      child
+    }, context)
+    logs.add({
+      message: `Task ${task.id} started`,
+      type: 'info'
+    }, context)
+
+    child.stdout.on('data', buffer => {
+      // TODO logs
+      console.log(buffer.toString())
+    })
+
+    child.stderr.on('data', buffer => {
+      // TODO logs
+      console.log(buffer.toString())
+    })
+
+    child.on('close', (code, signal) => {
+      if (signal === 'SIGINT') {
+        updateOne({
+          id: task.id,
+          status: 'error',
+          child: null
+        }, context)
+        logs.add({
+          message: `Task ${task.id} was terminated`,
+          type: 'error'
+        }, context)
+      } else if (code !== 0) {
+        updateOne({
+          id: task.id,
+          status: 'error',
+          child: null
+        }, context)
+        logs.add({
+          message: `Task ${task.id} ended with error code`,
+          type: 'error'
+        }, context)
+      } else {
+        updateOne({
+          id: task.id,
+          status: 'done',
+          child: null
+        }, context)
+        logs.add({
+          message: `Task ${task.id} completed`,
+          type: 'done'
+        }, context)
+      }
+    })
+  }
+  return task
+}
+
+function stop (id, context) {
+  const task = findOne(id, context)
+  if (task && task.status === 'running') {
+    task.child.kill('SIGINT') // TODO not working
+  }
+  return task
+}
+
 module.exports = {
   list,
-  findOne
+  findOne,
+  run,
+  stop,
+  updateOne
 }
diff --git a/packages/@vue/cli-ui/src/graphql-api/resolvers.js b/packages/@vue/cli-ui/src/graphql-api/resolvers.js
index 6f11c32e0e..989daec141 100644
--- a/packages/@vue/cli-ui/src/graphql-api/resolvers.js
+++ b/packages/@vue/cli-ui/src/graphql-api/resolvers.js
@@ -70,7 +70,9 @@ module.exports = {
     pluginInstall: (root, { id }, context) => plugins.install(id, context),
     pluginUninstall: (root, { id }, context) => plugins.uninstall(id, context),
     pluginInvoke: (root, { id }, context) => plugins.runInvoke(id, context),
-    pluginUpdate: (root, { id }, context) => plugins.update(id, context)
+    pluginUpdate: (root, { id }, context) => plugins.update(id, context),
+    taskRun: (root, { id }, context) => tasks.run(id, context),
+    taskStop: (root, { id }, context) => tasks.stop(id, context)
   },
 
   Subscription: {
@@ -98,6 +100,9 @@ module.exports = {
         logs.init(context)
         return context.pubsub.asyncIterator(channels.CONSOLE_LOG_ADDED)
       }
+    },
+    taskChanged: {
+      subscribe: (parent, args, { pubsub }) => pubsub.asyncIterator(channels.TASK_CHANGED)
     }
   }
 }
diff --git a/packages/@vue/cli-ui/src/graphql-api/type-defs.js b/packages/@vue/cli-ui/src/graphql-api/type-defs.js
index 5eb55bacb9..a9f9e5bc39 100644
--- a/packages/@vue/cli-ui/src/graphql-api/type-defs.js
+++ b/packages/@vue/cli-ui/src/graphql-api/type-defs.js
@@ -203,6 +203,8 @@ type Mutation {
   pluginUninstall (id: ID!): PluginInstallation
   pluginInvoke (id: ID!): PluginInstallation
   pluginUpdate (id: ID!): Plugin
+  taskRun (id: ID!): Task
+  taskStop (id: ID!): Task
 }
 
 type Subscription {
@@ -210,5 +212,6 @@ type Subscription {
   progressRemoved (id: ID!): ID
   consoleLogAdded: ConsoleLog!
   cwdChanged: String!
+  taskChanged: Task
 }
 `
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/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/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/locales/en.json b/packages/@vue/cli-ui/src/locales/en.json
index 40cbb39c49..3a82eaff6d 100644
--- a/packages/@vue/cli-ui/src/locales/en.json
+++ b/packages/@vue/cli-ui/src/locales/en.json
@@ -234,6 +234,13 @@
     },
     "project-tasks": {
       "title": "Project tasks"
+    },
+    "project-task-details": {
+      "actions": {
+        "play": "Run task",
+        "stop": "Stop task"
+      },
+      "command": "Script command"
     }
   }
 }
diff --git a/packages/@vue/cli-ui/src/locales/fr.json b/packages/@vue/cli-ui/src/locales/fr.json
index ea67b65c28..687dd28569 100644
--- a/packages/@vue/cli-ui/src/locales/fr.json
+++ b/packages/@vue/cli-ui/src/locales/fr.json
@@ -70,7 +70,7 @@
       },
       "log": {
         "tooltip": "Journal<br><i>Cliquer pour Afficher/Masquer le Journal Vue CLI</i>",
-        "empty": "Aucun entrée dans le journal"
+        "empty": "Aucune entrée dans le journal"
       }
     }
   },
@@ -234,6 +234,13 @@
     },
     "project-tasks": {
       "title": "Tâches du projet"
+    },
+    "project-task-details": {
+      "actions": {
+        "play": "Lancer la tâche",
+        "stop": "Arrêter la tâche"
+      },
+      "command": "Commande de script"
     }
   }
 }
diff --git a/packages/@vue/cli-ui/src/views/ProjectConfiguration.vue b/packages/@vue/cli-ui/src/views/ProjectConfiguration.vue
index 963f38f418..aa82198916 100644
--- a/packages/@vue/cli-ui/src/views/ProjectConfiguration.vue
+++ b/packages/@vue/cli-ui/src/views/ProjectConfiguration.vue
@@ -2,6 +2,7 @@
   <div class="project-configuration page">
     <ContentView
       :title="$t('views.project-configuration.title')"
+      class="limit-width"
     >
       WIP
     </ContentView>
diff --git a/packages/@vue/cli-ui/src/views/ProjectTaskDetails.vue b/packages/@vue/cli-ui/src/views/ProjectTaskDetails.vue
index 7924d6273b..c4624ca833 100644
--- a/packages/@vue/cli-ui/src/views/ProjectTaskDetails.vue
+++ b/packages/@vue/cli-ui/src/views/ProjectTaskDetails.vue
@@ -1,10 +1,38 @@
 <template>
   <div class="project-task-details">
-    WIP
+    <div v-if="task" class="actions-bar">
+      <VueButton
+        v-if="task.status !== 'running'"
+        icon-left="play_arrow"
+        class="primary"
+        :label="$t('views.project-task-details.actions.play')"
+        @click="runTask()"
+      />
+      <VueButton
+        v-else
+        icon-left="stop"
+        class="primary"
+        :label="$t('views.project-task-details.actions.stop')"
+        @click="stopTask()"
+      />
+
+      <div
+        class="command"
+        v-tooltip="$t('views.project-task-details.command')"
+      >
+        {{ task.command }}
+      </div>
+
+      <div class="vue-ui-spacer"/>
+    </div>
   </div>
 </template>
 
 <script>
+import TASK from '../graphql/task.gql'
+import TASK_RUN from '../graphql/taskRun.gql'
+import TASK_STOP from '../graphql/taskStop.gql'
+
 export default {
   name: 'ProjectTaskDetails',
 
@@ -13,6 +41,59 @@ export default {
       type: String,
       required: true
     }
+  },
+
+  data () {
+    return {
+      task: null
+    }
+  },
+
+  apollo: {
+    task: {
+      query: TASK,
+      variables () {
+        return {
+          id: this.id
+        }
+      },
+      fetchPolicy: 'cache-and-network'
+    }
+  },
+
+  methods: {
+    runTask () {
+      this.$apollo.mutate({
+        mutation: TASK_RUN,
+        variables: {
+          id: this.id
+        }
+      })
+    },
+
+    stopTask () {
+      this.$apollo.mutate({
+        mutation: TASK_STOP,
+        variables: {
+          id: this.id
+        }
+      })
+    }
   }
 }
 </script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.command
+  font-family 'Roboto Mono', monospace
+  font-size 12px
+  background lighten($vue-ui-color-dark, 40%)
+  color $vue-ui-color-light
+  padding 0 16px
+  height 32px
+  h-box()
+  box-center()
+  border-radius $br
+</style>
diff --git a/packages/@vue/cli-ui/src/views/ProjectTasks.vue b/packages/@vue/cli-ui/src/views/ProjectTasks.vue
index 950d4c4918..c20836676f 100644
--- a/packages/@vue/cli-ui/src/views/ProjectTasks.vue
+++ b/packages/@vue/cli-ui/src/views/ProjectTasks.vue
@@ -32,7 +32,17 @@
 </template>
 
 <script>
+import TASK_CHANGED from '../graphql/taskChanged.gql'
+
 export default {
+  apollo: {
+    $subscribe: {
+      taskChanged: {
+        query: TASK_CHANGED
+      }
+    }
+  },
+
   methods: {
     generateItems (tasks) {
       return tasks.map(