diff --git a/app/views/plugins/recommended.html.haml b/app/views/plugins/recommended.html.haml
index 4cd0ce9..c0f9e7e 100644
--- a/app/views/plugins/recommended.html.haml
+++ b/app/views/plugins/recommended.html.haml
@@ -1,61 +1,61 @@
 - page_title t('.page_title')
 
-%table{class: "table table-striped table-hover", id: "plugins-table"}
-  %thead
-    %tr
-      %th{scope: "col", width: "24"}
-      %th{scope: "col"}= t('plugins.common.name')
-      %th{scope: "col"}= t('plugins.common.api_version')
-      %th{scope: "col"}= t('plugins.common.category')
-      %th{scope: "col"}= t('plugins.common.status')
-      %th{scope: "col"}
-  %tbody
-    - @plugins.each do |plugin|
-      %tr
-        %td
-          - unless plugin.installed? || plugin.processing?
-            = link_to t("terms.install"), install_plugins_path, class: "js-install btn btn-primary", data: { url: install_plugins_path, name: plugin.gem_name}
-        %td
-          %label{for: "plugin_#{plugin.gem_name}"}
-            = plugin.gem_name
-        %td
-          = plugin.api_version
-        %td
-          = plugin.category
-        %td
-          = plugin.status
-        %td
-          = link_to t('plugins.view_on_rubygems_org'), plugin.rubygems_org_page, target: "_blank"
-
+#plugins-table
+  %b-form-group.float-right(horizontal){"label" => t("terms.search")}
+    %b-input-group
+      %b-form-input{"v-model" => "filter"}
+      %b-input-group-append
+        %b-btn{ "v-bind:disabled" => "!filter", "v-on:click" => "filter = ''" }
+          = t("terms.clear")
+  %b-table(stripped hover small){"v-bind:items" => "items",
+                                 "v-bind:fields" => "fields",
+                                 "v-bind:filter" => "filter"}
+    %template{"slot" => "is_installed", "slot-scope" => "row"}
+      %template{"v-if" => "row.item.is_installed || row.item.is_processing"}
+         
+      %template(v-else)
+        %b-button{"variant" => "primary",
+                  "data-url" => install_plugins_path,
+                  "v-bind:data-name" => "row.item.name",
+                  "v-on:click" => "installPlugin"}
+          = t("terms.install")
+    %template{"slot" => "rubygems_org_page", "slot-scope" => "row"}
+      %a{"target" => "_blank", "v-bind:href" => "row.item.rubygems_org_page"}
+        = t("plugins.view_on_rubygems_org")
 
 :javascript
   window.addEventListener("load", () => {
-    $('#plugins-table').dataTable({
-      "autoWidth": false,
-      "ordering": true,
-      "paging": false,
-      "info": false,
-      "searching": true,
-      "language": {
-        "search": "#{t("terms.search")} "
+    new Vue({
+      name: "RecommendedPlugins",
+      el: "#plugins-table",
+      data() {
+        return {
+          fields: {
+            is_installed: { label: "" },
+            name: { label: "#{t("plugins.common.name")}", sortable: true },
+            api_version: { label: "#{t("plugins.common.api_version")}", sortable: true },
+            category: { label: "#{t("plugins.common.category")}", sortable: true },
+            status: { label: "#{t("plugins.common.status")}", sortable: true },
+            rubygems_org_page: { label: "" }
+          },
+          items: #{plugins_json.html_safe},
+          filter: null
+        };
+      },
+      methods: {
+        installPlugin(event) {
+          $.ajax({
+            url: `${event.target.dataset.url}.json`,
+            data: {"plugins[]": event.target.dataset.name, "_method": "PATCH"},
+            method: "POST"
+          }).then((data) => {
+            console.log("installed", data);
+            let item = this.items.find(item => item.name === event.target.dataset.name);
+            item.is_processing = true;
+            item.status = "#{t("terms.processing")}";
+            this.update();
+          });
+        }
       }
     });
-    $('#plugins-table').on('click', '.js-install', function(ev){
-      ev.preventDefault();
-      var $anchor = $(ev.target);
-      var url = $anchor.attr('href');
-      $anchor.removeClass('js-install');
-      $anchor.attr("href", "#");
-      $anchor.css({color: "green"});
-      var name = $anchor.attr('data-name');
-      $.ajax({
-        url: url,
-        data: {"plugins[]": name, "_method": "PATCH"},
-        method: "POST"
-      }).done(function(){
-        $anchor.fadeOut();
-        var status = $anchor.parent().closest('tr').children()[3];
-        $(status).text("#{t("terms.processing")}");
-      });;
-    });
   });