Move to appConfig, Vuetify 3

components/animations/AClientOnly.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useQuasar } from 'quasar'
 import type { PropType } from 'vue'
 
 type ModeOptions = 'in-out' | 'out-in' | 'default' | undefined
@@ -17,9 +16,12 @@ type RenderOptions =
   | 'lg-down'
   | 'lg-up'
   | 'xl'
+  | 'xl-down'
+  | 'xl-up'
+  | 'xxl'
   | undefined
 
-const quasar = useQuasar()
+const vdisp = ref(useVDisplay())
 const props = defineProps({
   fallback: {
     type: String,
@@ -54,27 +56,33 @@ const render = computed(() => {
     case 'always':
       return true
     case 'xs':
-      return quasar.screen.xs
+      return vdisp.value.xs
     case 'sm':
-      return quasar.screen.sm
+      return vdisp.value.sm
     case 'sm-down':
-      return quasar.screen.xs || quasar.screen.sm
+      return vdisp.value.smAndDown
     case 'sm-up':
-      return !quasar.screen.xs
+      return vdisp.value.smAndUp
     case 'md':
-      return quasar.screen.md
+      return vdisp.value.md
     case 'md-down':
-      return !quasar.screen.lg && !quasar.screen.xl
+      return vdisp.value.mdAndDown
     case 'md-up':
-      return !quasar.screen.xs && !quasar.screen.sm
+      return vdisp.value.mdAndUp
     case 'lg':
-      return quasar.screen.lg
+      return vdisp.value.lg
     case 'lg-down':
-      return !quasar.screen.xl
+      return vdisp.value.lgAndDown
     case 'lg-up':
-      return quasar.screen.lg || quasar.screen.xl
+      return vdisp.value.lgAndUp
     case 'xl':
-      return quasar.screen.xl
+      return vdisp.value.xl
+    case 'xl-down':
+      return vdisp.value.xlAndDown
+    case 'xl-up':
+      return vdisp.value.xlAndUp
+    case 'xxl':
+      return vdisp.value.xxl
     default:
       return false
   }
@@ -91,7 +99,7 @@ const render = computed(() => {
       :enter-active-class="`animate__animated ${props.enter}`"
       :leave-active-class="`animate__animated ${props.leave}`"
     >
-      <slot v-if="(quasar.screen.width || quasar.screen.height) && render" />
+      <slot v-if="render" />
     </Transition>
   </ClientOnly>
 </template>