Managed to load a page

resources/js/components/common/Alert.vue

@@ -1,14 +1,14 @@
 <template>
   <transition enter-active-class="linear duration-500 overflow-hidden"
-              enter-class="max-h-0 opacity-0"
+              enter-from-class="max-h-0 opacity-0"
               enter-to-class="max-h-screen opacity-100"
               leave-active-class="linear duration-500 overflow-hidden"
-              leave-class="max-h-screen opacity-100"
+              leave-from-class="max-h-screen opacity-100"
               leave-to-class="max-h-0 opacity-0"
   >
     <div :class="alertClasses" class="border shadow-sm p-2 flex items-center rounded-md">
       <div class="flex-grow">
-        <p class="mb-0 py-2 px-4" :class="textClasses" v-html="message"/>
+        <p class="mb-0 py-2 px-4" :class="textClasses" v-html="message" />
       </div>
 
       <div class="justify-end">

resources/js/components/common/Dropdown.vue

@@ -6,13 +6,9 @@
           :close="close"
     />
     <transition name="fade">
-      <div
-        v-if="isOpen"
-        v-on-clickaway="close"
-        :class="dropdownClass"
-      >
+      <div v-if="isOpen" v-on-click-outside="close" :class="dropdownClass">
         <div class="py-1 " role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
-          <slot/>
+          <slot />
         </div>
       </div>
     </transition>
@@ -20,34 +16,40 @@
 </template>
 
 <script>
-import {directive as onClickaway} from 'vue-clickaway'
+import { ref } from 'vue'
+import { vOnClickOutside } from '@vueuse/components'
 
 export default {
   name: 'Dropdown',
-  directives: {
-    onClickaway: onClickaway
-  },
-
   props: {
     dropdownClass: {
       type: String,
       default: 'origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 z-20'
     }
   },
-  data() {
-    return {
-      isOpen: false
+  setup () {
+    const isOpen = ref(false)
+
+    const open = () => {
+      isOpen.value = true
     }
-  },
-  methods: {
-    open() {
-      this.isOpen = true
-    },
-    close() {
-      this.isOpen = false
-    },
-    toggle() {
-      this.isOpen = !this.isOpen
+
+    const close = () => {
+      isOpen.value = false
+    }
+
+    const toggle = () => {
+      isOpen.value = !isOpen.value
+    }
+
+    const dropdownRef = ref(null)
+
+    return {
+      isOpen,
+      open,
+      close,
+      toggle,
+      dropdownRef
     }
   }
 }

resources/js/components/common/transitions/VTransition.vue

@@ -1,10 +1,10 @@
 <template>
   <transition v-if="name=='slideInUp'"
               enter-active-class="linear duration-300 overflow-hidden"
-              enter-class="max-h-0"
+              enter-from-class="max-h-0"
               enter-to-class="max-h-screen"
               leave-active-class="linear duration-300 overflow-hidden"
-              leave-class="max-h-screen"
+              leave-from-class="max-h-screen"
               leave-to-class="max-h-0"
   >
     <slot />