wip

resources/js/Pages/Servers/Index.vue

@@ -303,7 +303,7 @@ export default {
         }
     },
 
-    beforeDestroy() {
+    beforeUnmount() {
         this.clearPollingInterval();
     }
 }

resources/js/Pages/Sites/Certificates.vue

@@ -284,7 +284,7 @@ export default {
             }
         },
 
-        beforeDestroy(){
+        beforeUnmount(){
             this.clearPollingInterval();
         }
     }

resources/js/Pages/Sites/Cronjobs.vue

@@ -322,7 +322,7 @@ export default {
             }
         },
 
-        beforeDestroy(){
+        beforeUnmount(){
             this.clearPollingInterval();
         }
     }

resources/js/Pages/Sites/Databases.vue

@@ -263,7 +263,7 @@ export default {
         }
     },
 
-    beforeDestroy() {
+    beforeUnmount() {
         this.clearPollingInterval();
     }
 }

resources/js/Pages/Sites/Index.vue

@@ -275,7 +275,7 @@ export default {
             }
         },
 
-        beforeDestroy(){
+        beforeUnmount(){
             this.clearPollingInterval();
         }
     }

resources/js/Pages/Sites/Redirects.vue

@@ -264,7 +264,7 @@ export default {
             }
         },
 
-        beforeDestroy(){
+        beforeUnmount(){
             this.clearPollingInterval();
         }
     }

resources/js/Pages/Sites/Settings.vue

@@ -227,7 +227,7 @@ export default {
         },
     },
 
-    beforeDestroy() {
+    beforeUnmount() {
         this.clearTimeoutInterval();
     }
 }

resources/js/Pages/Sites/Tabs.vue

@@ -1,7 +1,8 @@
 <template>
     <ul class="md:-ml-4 space-y-1">
-        <li v-for="item in items" v-if="item">
+        <li v-for="item in items" >
             <component
+                v-if="item"
                 :is="item.type && item.type === 'a' ? 'a' : 'inertia-link'"
                 :target="item.type && item.type === 'a' ? '_blank' : '_self'"
                 class="flex items-center h-10 px-4 font-medium text-medium-emphasis"

resources/js/app.js

@@ -2,8 +2,8 @@ import {createInertiaApp, InertiaLink} from '@inertiajs/inertia-vue3'
 import {resolvePageComponent} from "laravel-vite-plugin/inertia-helpers";
 import {createApp, h} from 'vue';
 import {InertiaProgress} from '@inertiajs/progress'
-import VueMeta from 'vue-meta'
 import Store from '@/store';
+import PortalVue from 'portal-vue'
 import vClickOutside from 'v-click-outside'
 import VueClipboard from 'vue-clipboard2'
 import mixins from '@/mixins';
@@ -11,18 +11,22 @@ import axios from 'axios';
 import forEach from 'lodash/forEach';
 import mitt from 'mitt';
 import '../sass/app.scss';
+import Vue from 'vue'
 
+Vue.configureCompat({ RENDER_FUNCTION: false, COMPONENT_V_MODEL: false });
 
 createInertiaApp({
     title: (title) => `${title} - ${appName}`,
     resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
-    setup({el, app, props, plugin}) {
-        return createApp({render: () => h(app, props)})
+    setup({el, App, props, plugin}) {
+        createApp({
+            render: () => h(App, props),
+        })
             .use(plugin)
             .use(vClickOutside)
-            .use(VueMeta)
             .use(VueClipboard)
             .use(Store)
+            .use(PortalVue)
             .mixin({methods: {route: window.route}})
             .mixin(mixins)
             .component('InertiaLink', InertiaLink)

resources/js/components/Dropdown.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-click-outside="close" ref="dropdown" class="relative">
+    <div ref="dropdown" class="relative">
         <slot v-bind="{ isOpen, open, close, toggle, position }"></slot>
     </div>
 </template>
@@ -41,7 +41,7 @@ export default {
     mounted() {
         window.addEventListener('click', this.outsideClickListener)
     },
-    beforeDestroy() {
+    beforeUnmount() {
         window.removeEventListener('click', this.outsideClickListener)
     },
 }

resources/js/components/SearchPalette.vue

@@ -88,7 +88,7 @@ export default {
         });
     },
 
-    destroyed() {
+    unmounted() {
         if (this.timeout) clearTimeout(this.timeout);
     },
 

resources/js/components/TabBar.vue

@@ -2,9 +2,11 @@
     <ul
         class="inline-flex flex-row p-1 overflow-hidden overflow-x-auto whitespace-nowrap rounded bg-tab-bar"
     >
-        <TabBarItem v-for="item in items" :key="item.title" :to="item.to" :active="item.active" v-if="item">
-            {{ item.title }}
-        </TabBarItem>
+        <template v-for="item in items">
+            <TabBarItem :key="item.title" :to="item.to" :active="item.active" v-if="item">
+                {{ item.title }}
+            </TabBarItem>
+        </template>
     </ul>
 </template>
 

resources/js/components/forms/FormInput.vue

@@ -20,7 +20,7 @@
                    ]"
                :type="type"
                :required="required"
-               :value="value"
+               :value="modelValue"
                @input="updateValue($event.target.value)"
                :disabled="loading || disabled"
                :autofocus="autofocus"
@@ -69,7 +69,7 @@ export default {
         placeholder: {
             type: String,
         },
-        value: {
+        modelValue: {
             required: false,
             default: '',
         },
@@ -130,7 +130,7 @@ export default {
 
     methods: {
         updateValue(value) {
-            this.$emit('input', value);
+            this.$emit('update:modelValue', value);
         },
         copy() {
             this.copied = true;

resources/js/components/forms/FormSelect.vue

@@ -7,7 +7,7 @@
             loading ? 'cursor-wait' : '',
             ]" :id="id" :required="required" :placeholder="placeholder"
                 @input="updateValue($event.target.value)"
-                v-model="value">
+                v-model="modelValue">
             <slot></slot>
         </select>
         <ErrorText v-if="errors">{{ errors[0] }}</ErrorText>
@@ -51,7 +51,7 @@ export default {
         placeholder: {
             type: String,
         },
-        value: {
+        modelValue: {
             required: false,
             default: '',
         },
@@ -83,7 +83,7 @@ export default {
 
     methods: {
         updateValue(value) {
-            this.$emit('input', value);
+            this.$emit('update:modelValue', value);
         },
     },
 }