diff --git a/packages/@vue/cli-ui/package.json b/packages/@vue/cli-ui/package.json
index 40f864168e..8fa1cb618d 100644
--- a/packages/@vue/cli-ui/package.json
+++ b/packages/@vue/cli-ui/package.json
@@ -39,6 +39,7 @@
     "vue": "^2.5.13",
     "vue-apollo": "^3.0.0-beta.5",
     "vue-cli-plugin-apollo": "^0.4.1",
+    "vue-instantsearch": "^1.5.1",
     "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.5.13",
     "xterm": "^3.2.0"
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/InstantSearchInput.vue b/packages/@vue/cli-ui/src/components/InstantSearchInput.vue
new file mode 100644
index 0000000000..f0a774c5d8
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/InstantSearchInput.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="instant-search-input">
+    <VueInput
+      icon-left="search"
+      v-model="query"
+      class="big"
+      placeholder="Search a plugin"
+    >
+      <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
+  ],
+
+  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()
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.instant-search-input
+  .vue-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..9a3f19597d
--- /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-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..8b2387822a
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/ItemLogo.vue
@@ -0,0 +1,103 @@
+<template>
+  <div
+    class="item-logo"
+    :class="{
+      selected,
+      loaded
+    }"
+  >
+    <div class="wrapper">
+      <VueIcon
+        v-if="selected"
+        icon="done"
+      />
+      <img
+        v-else-if="image"
+        class="image"
+        :src="image"
+        :key="image"
+        @load="loaded = true"
+      >
+      <VueIcon
+        v-else
+        :icon="icon"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    image: {
+      type: String,
+      default: null
+    },
+
+    icon: {
+      type: String,
+      default: 'widgets'
+    },
+
+    selected: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  data () {
+    return {
+      loaded: false
+    }
+  },
+
+  watch: {
+    image (value) {
+      this.loaded = 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-icon
+      width 24px
+      height @width
+      >>> svg
+        fill rgba($color-text-light, .3)
+
+  &.loaded
+    .image
+      animation zoom .1s
+      transform none
+
+  &.selected
+    .wrapper
+      background $vue-color-primary
+      animation zoom .1s
+      .vue-icon
+        >>> svg
+          fill $vue-color-light
+
+@keyframes zoom
+  0%
+    transform scale(0)
+  100%
+    transform scale(1)
+</style>
diff --git a/packages/@vue/cli-ui/src/components/ListItemInfo.vue b/packages/@vue/cli-ui/src/components/ListItemInfo.vue
index 87a5598fc6..c920646835 100644
--- a/packages/@vue/cli-ui/src/components/ListItemInfo.vue
+++ b/packages/@vue/cli-ui/src/components/ListItemInfo.vue
@@ -5,7 +5,11 @@
       selected
     }"
   >
-    <div class="name">{{ name }}</div>
+    <div class="name">
+      <slot name="name">
+        {{ name }}
+      </slot>
+    </div>
     <div v-if="description || link || showDescription" class="description">
       <slot name="description">
         {{ description }}
@@ -14,8 +18,10 @@
         v-if="link"
         :href="link"
         target="_blank"
+        class="more-info"
         @click.stop="() => {}"
       >
+        <VueIcon icon="open_in_new" class="medium top"/>
         More info
       </a>
     </div>
@@ -37,7 +43,7 @@ export default {
 
     name: {
       type: String,
-      required: true
+      default: null
     },
 
     selected: {
@@ -68,6 +74,22 @@ export default {
       svg
         fill @color
 
+    .more-info
+      color $vue-color-primary
+      padding 0 4px 0 2px
+      border-radius $br
+      .vue-icon
+        >>> svg
+          fill @color
+      &:hover
+        color $vue-color-light
+        background $vue-color-primary
+        .vue-icon
+          >>> svg
+            fill @color
+      &:active
+        background darken($vue-color-primary, 10%)
+
   &.selected
     .name
       color $vue-color-primary
diff --git a/packages/@vue/cli-ui/src/components/LoggerView.vue b/packages/@vue/cli-ui/src/components/LoggerView.vue
index be4c58b0f4..de77ccb9d0 100644
--- a/packages/@vue/cli-ui/src/components/LoggerView.vue
+++ b/packages/@vue/cli-ui/src/components/LoggerView.vue
@@ -19,7 +19,7 @@
       />
       <VueButton
         class="icon-button"
-        icon-left="arrow_downward"
+        icon-left="subdirectory_arrow_left"
         v-tooltip="'Scroll to bottom'"
         @click="scrollToBottom()"
       />
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..55d2cfd9ff
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/PackageSearchItem.vue
@@ -0,0 +1,94 @@
+<template>
+  <div
+    class="package-search-item list-item"
+    :class="{
+      selected
+    }"
+  >
+    <ItemLogo
+      :image="pkg.owner.avatar"
+      :selected="selected"
+    />
+
+    <ListItemInfo
+      :link="pkg.repository && pkg.repository.url || ''"
+      :selected="selected"
+      show-description
+    >
+      <template slot="name">
+        <span class="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 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
+    }
+  }
+}
+</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-icon
+      margin-right 2px
+</style>
diff --git a/packages/@vue/cli-ui/src/components/ProjectNav.vue b/packages/@vue/cli-ui/src/components/ProjectNav.vue
index b936a9530f..42b2643de4 100644
--- a/packages/@vue/cli-ui/src/components/ProjectNav.vue
+++ b/packages/@vue/cli-ui/src/components/ProjectNav.vue
@@ -41,7 +41,6 @@ const BUILTIN_ROUTES = [
 export default {
   data () {
     return {
-      currentRoute: null,
       routes: [
         ...BUILTIN_ROUTES
         // Plugins routes here
@@ -50,22 +49,22 @@ export default {
     }
   },
 
-  watch: {
-    currentRoute (name) {
-      if (this.$route.name !== name) {
-        this.$router.push({ name })
-      }
-    },
-
-    '$route.name': {
-      handler (value) {
-        if (value !== this.currentRoute) {
-          this.currentRoute = value
-        }
+  computed: {
+    currentRoute: {
+      get () {
+        const currentRoute = this.$route.name
+        const route = this.routes.find(
+          r => currentRoute.indexOf(r.name) === 0
+        )
+        return route ? route.name : null
       },
-      immediate: true
+      set (name) {
+        if (this.$route.name !== name) {
+          this.$router.push({ name })
+        }
+      }
     }
-  }
+  },
 }
 </script>
 
diff --git a/packages/@vue/cli-ui/src/components/ProjectPluginItem.vue b/packages/@vue/cli-ui/src/components/ProjectPluginItem.vue
index 1d7b4087bd..48ae8aef60 100644
--- a/packages/@vue/cli-ui/src/components/ProjectPluginItem.vue
+++ b/packages/@vue/cli-ui/src/components/ProjectPluginItem.vue
@@ -1,18 +1,6 @@
 <template>
   <div class="project-plugin-item list-item">
-    <div class="logo">
-      <div class="wrapper">
-        <img
-          v-if="plugin.logo"
-          class="image"
-          :src="plugin.logo"
-        >
-        <VueIcon
-          v-else
-          icon="widgets"
-        />
-      </div>
-    </div>
+    <ItemLogo :image="plugin.logo"/>
 
     <ListItemInfo
       :name="plugin.id"
@@ -98,23 +86,4 @@ export default {
     font-style italic
     opacity .7
 
-  .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
-      .vue-icon
-        width 24px
-        height @width
-        >>> svg
-          fill rgba($color-text-light, .3)
-
 </style>
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 301a86c204..638fba6b6d 100644
--- a/packages/@vue/cli-ui/src/graphql-api/type-defs.js
+++ b/packages/@vue/cli-ui/src/graphql-api/type-defs.js
@@ -67,7 +67,7 @@ type ProjectCreation {
 }
 
 type Version {
-  current: String!
+  current: String
   latest: String
   range: String
 }
diff --git a/packages/@vue/cli-ui/src/main.js b/packages/@vue/cli-ui/src/main.js
index e2553a01ed..f42ee6da9e 100644
--- a/packages/@vue/cli-ui/src/main.js
+++ b/packages/@vue/cli-ui/src/main.js
@@ -3,10 +3,12 @@ import App from './App.vue'
 import router from './router'
 import { apolloProvider } from './vue-apollo'
 import VueUi from '@vue/ui'
+import InstantSearch from 'vue-instantsearch'
 import * as Filters from './filters'
 import './register-components'
 
 Vue.use(VueUi)
+Vue.use(InstantSearch)
 
 for (const key in Filters) {
   Vue.filter(key, Filters[key])
diff --git a/packages/@vue/cli-ui/src/router.js b/packages/@vue/cli-ui/src/router.js
index ca883064cc..3993f8c56a 100644
--- a/packages/@vue/cli-ui/src/router.js
+++ b/packages/@vue/cli-ui/src/router.js
@@ -4,6 +4,7 @@ import { apolloClient } from './vue-apollo'
 
 import ProjectHome from './views/ProjectHome.vue'
 import ProjectPlugins from './views/ProjectPlugins.vue'
+import ProjectPluginsAdd from './views/ProjectPluginsAdd.vue'
 import ProjectConfiguration from './views/ProjectConfiguration.vue'
 import ProjectTasks from './views/ProjectTasks.vue'
 import ProjectSelect from './views/ProjectSelect.vue'
@@ -34,6 +35,11 @@ const router = new Router({
           name: 'project-plugins',
           component: ProjectPlugins
         },
+        {
+          path: 'plugins/add',
+          name: 'project-plugins-add',
+          component: ProjectPluginsAdd
+        },
         {
           path: 'configuration',
           name: 'project-configuration',
diff --git a/packages/@vue/cli-ui/src/style/main.styl b/packages/@vue/cli-ui/src/style/main.styl
index 61a4c9e082..1114a6931c 100644
--- a/packages/@vue/cli-ui/src/style/main.styl
+++ b/packages/@vue/cli-ui/src/style/main.styl
@@ -17,6 +17,7 @@ body,
   background $color-light-background
   h-box()
   box-center()
+  position relative
 
   > *
     space-between-x($padding-item)
@@ -55,3 +56,39 @@ ansi-colors('white', $vue-color-light)
   margin $padding-item
   svg
     fill rgba($vue-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-highlight
+  em
+    font-style normal
+    background lighten($vue-color-primary, 80%)
+    color darken($vue-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
diff --git a/packages/@vue/cli-ui/src/views/ProjectPlugins.vue b/packages/@vue/cli-ui/src/views/ProjectPlugins.vue
index b8b3ecc169..c99e66ec55 100644
--- a/packages/@vue/cli-ui/src/views/ProjectPlugins.vue
+++ b/packages/@vue/cli-ui/src/views/ProjectPlugins.vue
@@ -8,6 +8,7 @@
           icon-left="add"
           label="Add plugin"
           class="primary"
+          :to="{ name: 'project-plugins-add' }"
         />
       </template>
 
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..73c37cad54
--- /dev/null
+++ b/packages/@vue/cli-ui/src/views/ProjectPluginsAdd.vue
@@ -0,0 +1,215 @@
+<template>
+  <div class="project-plugins-add page">
+    <div class="content">
+      <StepWizard
+        title="Add a plugin"
+        class="frame"
+        :tab-id.sync="tabId"
+      >
+        <template slot-scope="{ next, previous }">
+          <VueTab
+            id="search"
+            label="Search"
+            icon="search"
+            disabled
+          >
+            <div class="content vue-disable-scroll">
+              <ais-index
+                app-id="OFCNCOG2CU"
+                api-key="db283631f89b5b8a10707311f911fd00"
+                index-name="npm-search"
+                :query-parameters="{
+                  hitsPerPage: 10,
+                  attributesToRetrieve: [
+                    'name',
+                    'description',
+                    'repository',
+                    'homepage',
+                    'version',
+                    'owner',
+                    'humanDownloadsLast30Days'
+                  ],
+                  attributesToHighlight: [
+                    'name',
+                    'description'
+                  ]
+                }"
+              >
+                <InstantSearchInput/>
+                <ais-results>
+                  <PackageSearchItem
+                    slot-scope="{ result }"
+                    :pkg="result"
+                    :selected="selectedId === result.name"
+                    @click.native="selectedId = result.name"
+                  />
+                </ais-results>
+                <InstantSearchPagination/>
+              </ais-index>
+            </div>
+
+            <div class="actions-bar no-padding-x">
+              <VueButton
+                icon-left="close"
+                label="Cancel"
+                class="big"
+                @click="cancel()"
+              />
+
+              <div class="algolia">
+                <img class="ais-logo" src="~@/assets/search-by-algolia.svg">
+              </div>
+
+              <VueButton
+                icon-left="add"
+                :label="`Install ${selectedId || 'plugin'}`"
+                class="big primary"
+                :disabled="!selectedId"
+                @click="installPlugin()"
+              />
+            </div>
+          </VueTab>
+
+          <VueTab
+            id="config"
+            label="Configuration"
+            icon="settings_applications"
+            disabled
+            lazy
+          >
+            <div class="content vue-disable-scroll">
+              <PromptsList
+                :prompts="enabledPrompts"
+                @answer="answerPrompt"
+              />
+            </div>
+
+            <div class="actions-bar no-padding-x">
+              <VueButton
+                icon-left="arrow_back"
+                label="Cancel"
+                class="big"
+                @click="showCancelInstall = true"
+              />
+
+              <VueButton
+                icon-left="done"
+                label="Finish installation"
+                class="big primary"
+                :disabled="!configurationValid"
+                @click="invokePlugin()"
+              />
+            </div>
+          </VueTab>
+        </template>
+      </StepWizard>
+    </div>
+
+    <VueModal
+      v-if="showCancelInstall"
+      :title="`Uninstall ${selectedId}?`"
+      class="small"
+      @close="showCancelInstall = false"
+    >
+      <div class="default-body">
+        Do you want to uninstall the {{ selectedId }} plugin?
+      </div>
+
+      <div slot="footer" class="actions space-between">
+        <VueButton
+          label="Go back"
+          class="flat"
+          @click="showCancelInstall = false"
+        />
+
+        <VueButton
+          label="Cancel without uninstalling"
+          class="flat"
+          @click="cancelInstall()"
+        />
+
+        <VueButton
+          label="Uninstall"
+          icon-left="delete_forever"
+          class="danger"
+          @click="uninstallPlugin()"
+        />
+      </div>
+    </VueModal>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ProjectPluginsAdd',
+
+  data () {
+    return {
+      tabId: 'search',
+      selectedId: null,
+      enabledPrompts: [],
+      showCancelInstall: false
+    }
+  },
+
+  computed: {
+    configurationValid () {
+      return false
+    }
+  },
+
+  methods: {
+    cancel () {
+      this.$router.push({ name: 'project-home' })
+    },
+
+    installPlugin () {
+      // TODO
+      this.tabId = 'config'
+    },
+
+    cancelInstall ()  {
+      this.selectedId = null
+      this.tabId = 'search'
+      this.showCancelInstall = false
+    },
+
+    uninstallPlugin () {
+      // TODO
+      this.cancelInstall()
+    },
+
+    invokePlugin () {
+      // TODO
+    },
+
+    answerPrompt () {
+      // TODO
+    }
+  }
+}
+</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
+
+.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/yarn.lock b/yarn.lock
index 1c86395f7b..ac18195954 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -811,6 +811,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"
@@ -843,6 +847,35 @@ ajv@^6.1.0:
     fast-json-stable-stringify "^2.0.0"
     json-schema-traverse "^0.3.0"
 
+algoliasearch-helper@^2.21.1:
+  version "2.24.0"
+  resolved "https://registry.yarnpkg.com/algoliasearch-helper/-/algoliasearch-helper-2.24.0.tgz#6ebf91683a82799bc4019ee1ad92d0ad0f41167b"
+  dependencies:
+    events "^1.1.0"
+    lodash "^4.13.1"
+    qs "^6.2.1"
+    util "^0.10.3"
+
+algoliasearch@^3.18.1:
+  version "3.25.1"
+  resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-3.25.1.tgz#e543108b528e5c89338834473cb8fb082d13d11f"
+  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"
@@ -3338,6 +3371,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"
@@ -3533,6 +3570,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"
@@ -3595,7 +3639,7 @@ es6-map@^0.1.3:
     es6-symbol "~3.1.1"
     event-emitter "~0.3.5"
 
-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"
 
@@ -3631,7 +3675,7 @@ es6-weak-map@^2.0.1:
     es6-iterator "^2.0.1"
     es6-symbol "^3.1.1"
 
-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"
 
@@ -3911,7 +3955,7 @@ eventemitter3@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-2.0.3.tgz#b5e1079b59fb5e1ba2771c0a993be060a58c99ba"
 
-events@^1.0.0, events@^1.1.1:
+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"
 
@@ -4716,6 +4760,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.3.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.3.0.tgz#e04fdb7b9796d8adac9c8f64c14837b2313378b0"
@@ -5759,6 +5810,10 @@ 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"
@@ -6602,6 +6657,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"
@@ -7172,6 +7231,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"
+
 minimalistic-assert@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"
@@ -7636,7 +7701,7 @@ object-hash@^1.1.4:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.2.0.tgz#e96af0e96981996a1d47f88ead8f74f1ebc4422b"
 
-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"
 
@@ -8419,6 +8484,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, progress@^1.1.8:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be"
@@ -8537,7 +8606,7 @@ q@^1.1.2, q@^1.4.1, q@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
 
-qs@6.5.1, qs@~6.5.1:
+qs@6.5.1, qs@^6.2.1, qs@~6.5.1:
   version "6.5.1"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"
 
@@ -8556,7 +8625,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"
 
@@ -8767,6 +8836,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"
@@ -10021,7 +10096,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.3, through@~2.3.1:
+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"
 
@@ -10678,6 +10753,14 @@ vue-hot-reload-api@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.0.tgz#97976142405d13d8efae154749e88c4e358cf926"
 
+vue-instantsearch@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/vue-instantsearch/-/vue-instantsearch-1.5.1.tgz#6a16b4e2de746a555bc096082cb43eb423355f8e"
+  dependencies:
+    algoliasearch "^3.18.1"
+    algoliasearch-helper "^2.21.1"
+    escape-html "^1.0.3"
+
 vue-jest@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/vue-jest/-/vue-jest-2.1.1.tgz#7e78c7731cd581e88f275ae9b7faf8098e53dda0"