Update to Vue.js 3

Doesn't use "vue-intersect" anymore, because I can't get it to work with Vue 3

Closes #1

package.json

@@ -14,25 +14,24 @@
     "core-js": "^3.8.3",
     "postcss": "^7",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
-    "vue": "^2.6.12",
-    "vue-intersect": "^1.1.6"
+    "vue": "^3.0.11"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.5.11",
     "@vue/cli-plugin-eslint": "^4.5.11",
     "@vue/cli-service": "^4.5.11",
+    "@vue/compiler-sfc": "^3.0.11",
     "babel-eslint": "^10.1.0",
     "eslint": "^7.19.0",
-    "eslint-plugin-vue": "^7.5.0",
-    "vue-template-compiler": "^2.6.12"
+    "eslint-plugin-vue": "^7.5.0"
   },
   "eslintConfig": {
     "root": true,
     "env": {
       "node": true
     },
     "extends": [
-      "plugin:vue/essential",
+      "plugin:vue/vue3-essential",
       "eslint:recommended"
     ],
     "parserOptions": {

src/App.vue

@@ -1,8 +1,8 @@
 <template>
-  <div id="app" class="p-5 max-w-4xl mx-auto">
+  <div class="p-5 max-w-4xl mx-auto">
     <h1 class="my-2 text-3xl">Progressive image loading with BlurHash</h1>
 
-    <p>Example using Vue.js. Full article here:
+    <p>Example using Vue.js 3. Full article here:
       <br>
       <a
         class="underline"

src/components/LazyImage.vue

@@ -1,5 +1,5 @@
 <template>
-  <intersect @enter.once="onEnter">
+  <div ref="wrapper" v-bind="$attrs">
     <div class="relative">
       <!-- Show the placeholder as background -->
       <blurhash-img
@@ -14,21 +14,18 @@
         ref="image"
         :width="width"
         :height="height"
-        v-bind="$attrs"
         class="absolute top-0 left-0 transition-opacity duration-500"
         :class="isLoaded ? 'opacity-100' : 'opacity-0'"
       >
     </div>
-  </intersect>
+  </div>
 </template>
 
 <script>
 import BlurhashImg from "./BlurhashImg";
-import Intersect from "vue-intersect";
 
 export default {
   components: {
-    Intersect,
     BlurhashImg
   },
 
@@ -56,11 +53,24 @@ export default {
 
   data() {
     return {
-      isVisible: false,
       isLoaded: false
     };
   },
 
+  mounted() {
+    this.observer = new IntersectionObserver((entries) => {
+      if (entries[0].isIntersecting) {
+        this.onEnter()
+      }
+    })
+
+    this.observer.observe(this.$refs.wrapper)
+  },
+
+  unmounted () {
+    this.observer.disconnect()
+  },
+
   methods: {
     onEnter() {
       // Image is visible (means: has entered the viewport),

src/main.js

@@ -1,9 +1,5 @@
-import Vue from 'vue'
+import { createApp } from 'vue'
 import App from './App.vue'
 import '@/assets/css/tailwind.css'
 
-Vue.config.productionTip = false
-
-new Vue({
-  render: h => h(App),
-}).$mount('#app')
+createApp(App).mount('#app')