From 324e028a33be631e26f41e5138e17a800578b484 Mon Sep 17 00:00:00 2001
From: Kasper Seweryn <github@wvffle.net>
Date: Tue, 19 Apr 2022 21:40:25 +0200
Subject: [PATCH] Fix deprecated render function and deprecated $listeners

---
 front/src/components/Sidebar.vue             |  4 ++--
 front/src/components/audio/podcast/Table.vue |  4 ++--
 front/src/main.ts                            | 25 ++++++++++----------
 3 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue
index 4635836af..ab90e9ce3 100644
--- a/front/src/components/Sidebar.vue
+++ b/front/src/components/Sidebar.vue
@@ -119,7 +119,7 @@
               </div>
               <user-menu
                 :width="width"
-                v-on="$listeners"
+                v-bind="$attrs"
               />
             </div>
           </div>
@@ -522,7 +522,7 @@ export default {
       languageSelection: this.$language.current
     }
   },
-  unmount () {
+  destroy () {
     if (this.fetchInterval) {
       clearInterval(this.fetchInterval)
     }
diff --git a/front/src/components/audio/podcast/Table.vue b/front/src/components/audio/podcast/Table.vue
index 237d3b2a3..cfa8a2d92 100644
--- a/front/src/components/audio/podcast/Table.vue
+++ b/front/src/components/audio/podcast/Table.vue
@@ -30,7 +30,7 @@
           :total="total"
           :current="page"
           :paginate-by="paginateBy"
-          v-on="$listeners"
+          v-bind="$attrs"
         />
       </div>
     </div>
@@ -69,7 +69,7 @@
           :total="total"
           :current="page"
           :compact="true"
-          v-on="$listeners"
+          v-bind="$attrs"
         />
       </div>
     </div>
diff --git a/front/src/main.ts b/front/src/main.ts
index 110bc6f2c..eff84ebdc 100644
--- a/front/src/main.ts
+++ b/front/src/main.ts
@@ -1,29 +1,30 @@
 import router from '~/router'
 import store from '~/store'
-import { createApp, defineAsyncComponent } from 'vue'
+import { configureCompat, createApp, defineAsyncComponent, h } from 'vue'
 import useLogger from '~/composables/useLogger'
 import useTheme from '~/composables/useTheme'
 useTheme()
 
+configureCompat({
+  RENDER_FUNCTION: false
+})
+
 const logger = useLogger()
 logger.info('Loading environment:', import.meta.env.MODE)
 logger.debug('Environment variables:', import.meta.env)
 
 const app = createApp({
-  components: {
-    App: defineAsyncComponent(() => import('~/App.vue'))
+  name: 'Root',
+  data: () => ({ ready: false }),
+  mounted () {
+    this.ready = true
   },
-  data: () => ({ isMounted: false }),
-  async mounted () {
-    this.isMounted = true
-  },
-  render (h) {
-    if (this.isMounted) {
-      return h('app')
+  render () {
+    if (this.ready) {
+      return h(defineAsyncComponent(() => import('~/App.vue')))
     }
 
-    // TODO (wvffle): Import fake app component
-    return h()
+    return null
   }
 })