From f340335bc5cd12907b3099d158b6947fa422d7b0 Mon Sep 17 00:00:00 2001
From: marcus <marcus@hhost.me>
Date: Sun, 20 Nov 2022 21:10:02 +0000
Subject: [PATCH 1/2] update to vue 3

---
 .eslintrc.js    |  5 +++++
 babel.config.js |  2 +-
 package.json    | 17 +++++++++--------
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 1b63c5e..6e84269 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..c4e6208 100644
--- a/package.json
+++ b/package.json
@@ -11,24 +11,25 @@
     "populateTypesenseIndex": "node populateTypesenseIndex.js"
   },
   "dependencies": {
-    "core-js": "2.6.9",
+    "core-js": "^3.8.3",
     "typesense-instantsearch-adapter": "^1.2.2",
     "vue": "2.6.14",
     "vue-instantsearch": "3.7.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",
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@vue/cli-service": "~5.0.8",
+    "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-vue": "^8.0.3",
     "prettier": "1.19.1",
-    "vue-template-compiler": "2.6.14"
+    "vue-template-compiler": "2.6.14",
+    "@babel/eslint-parser": "^7.12.16",
+    "@babel/core": "^7.12.16"
   },
   "browserslist": [
     "> 1%",

From 6a30f6da8abadc3bc5e227730f17f351ef25d7a2 Mon Sep 17 00:00:00 2001
From: marcus <marcus@hhost.me>
Date: Thu, 1 Dec 2022 14:00:06 +0000
Subject: [PATCH 2/2] vue 3 linting

---
 .eslintrc.js |  4 ++--
 package.json | 14 ++++++++------
 src/App.vue  | 14 +++++++-------
 src/main.js  | 14 ++++----------
 4 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 6e84269..0b4b023 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -9,6 +9,6 @@ module.exports = {
   },
 
   parserOptions: {
-    parser: '@babel/eslint-parser'
-  }
+    parser: '@babel/eslint-parser',
+  },
 };
diff --git a/package.json b/package.json
index c4e6208..e48039f 100644
--- a/package.json
+++ b/package.json
@@ -11,25 +11,27 @@
     "populateTypesenseIndex": "node populateTypesenseIndex.js"
   },
   "dependencies": {
+    "@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": {
+    "@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-prettier": "^4.2.1",
     "eslint-plugin-vue": "^8.0.3",
     "prettier": "1.19.1",
-    "vue-template-compiler": "2.6.14",
-    "@babel/eslint-parser": "^7.12.16",
-    "@babel/core": "^7.12.16"
+    "vue-template-compiler": "2.6.14"
   },
   "browserslist": [
     "> 1%",
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');