diff --git a/.eslintrc.js b/.eslintrc.js
index 1b63c5e..0b4b023 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,9 +1,14 @@
 module.exports = {
   // extends from 'prettier/vue' until we update the Algolia configuration
   extends: ['algolia/vue', 'prettier/vue'],
+
   rules: {
     'import/no-commonjs': 'off',
     // enable the rule until we update the Algolia configuration
     'vue/component-name-in-template-casing': ['error', 'kebab-case'],
   },
+
+  parserOptions: {
+    parser: '@babel/eslint-parser',
+  },
 };
diff --git a/babel.config.js b/babel.config.js
index 4f45f32..078c005 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ['@vue/app'],
+  presets: ['@vue/cli-plugin-babel/preset'],
 };
diff --git a/package.json b/package.json
index 546c9ca..e48039f 100644
--- a/package.json
+++ b/package.json
@@ -11,22 +11,25 @@
     "populateTypesenseIndex": "node populateTypesenseIndex.js"
   },
   "dependencies": {
-    "core-js": "2.6.9",
+    "@vue/compat": "^3.1.0",
+    "core-js": "^3.8.3",
     "typesense-instantsearch-adapter": "^1.2.2",
-    "vue": "2.6.14",
-    "vue-instantsearch": "3.7.0"
+    "vue": "^3.1.0",
+    "vue-instantsearch": "^4.6.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "3.6.0",
-    "@vue/cli-plugin-eslint": "3.6.0",
-    "@vue/cli-service": "3.6.0",
-    "babel-eslint": "10.0.2",
-    "eslint": "5.16.0",
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@vue/cli-service": "~5.0.8",
+    "@vue/compiler-sfc": "^3.1.0",
+    "eslint": "^7.32.0",
     "eslint-config-algolia": "13.2.3",
     "eslint-config-prettier": "4.1.0",
     "eslint-plugin-import": "2.19.1",
-    "eslint-plugin-prettier": "3.1.2",
-    "eslint-plugin-vue": "5.2.2",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-vue": "^8.0.3",
     "prettier": "1.19.1",
     "vue-template-compiler": "2.6.14"
   },
diff --git a/src/App.vue b/src/App.vue
index 6d54f0e..09ae2dd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -30,13 +30,13 @@
               <ais-search-box placeholder="" />
             </div>
             <ais-hits>
-              <template slot="item" slot-scope="{ item }">
-                <article>
-                  <img
-                    :src="item['image_url']"
-                    :alt="item['name']"
-                    height="100"
-                  />
+              <template #default="{ items }">
+                <article
+                  v-for="item in items"
+                  :key="item.id"
+                  style="display: inline-block;width: 25%"
+                >
+                  <img :src="item.image_url" :alt="item.name" height="100" />
                   <h1>
                     <ais-highlight
                       :hit="item"
diff --git a/src/main.js b/src/main.js
index d395c9d..a632b80 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,11 +1,5 @@
-import Vue from 'vue';
-import InstantSearch from 'vue-instantsearch';
 import App from './App.vue';
-
-Vue.config.productionTip = false;
-
-Vue.use(InstantSearch);
-
-new Vue({
-  render: h => h(App),
-}).$mount('#app');
+import { createApp } from 'vue';
+import InstantSearch from 'vue-instantsearch/vue3/es';
+const app = createApp(App).use(InstantSearch);
+app.mount('#app');