fix: correctly import CSSProperties as type

Author: zedjarvis

app.vue

@@ -1,60 +1,62 @@
 <script setup lang="ts">
 useHead({
-  titleTemplate: '%s ← Cedrouseroll Omondi',
+  titleTemplate: "%s ← Cedrouseroll Omondi",
   bodyAttrs: {
-    class: 'relative font-space text-slate-400 leading-relaxed bg-[#002937] selection:text-teal-900 selection:bg-teal-300'
-  }
-})
+    class:
+      "relative font-space text-slate-400 leading-relaxed bg-[#002937] selection:text-teal-900 selection:bg-teal-300",
+  },
+});
 
-import { gsap } from 'gsap';
-import { CSSProperties } from 'nuxt/dist/app/compat/capi';
+import { gsap } from "gsap";
+// import { CSSProperties } from 'nuxt/dist/app/compat/capi';
+import type { CSSProperties } from "vue";
 
-const cursorInnerRef = ref()
-const cursorOuterRef = ref()
+const cursorInnerRef = ref();
+const cursorOuterRef = ref();
 
-const { x, y } = usePointer()
-const isLeft = usePageLeave()
+const { x, y } = usePointer();
+const isLeft = usePageLeave();
 
 // hide custom cursor when mouse leaves page
 const cursorStyle = computed((): CSSProperties => {
   return {
-    'opacity': isLeft.value ? 0 : 1
-  }
-})
+    opacity: isLeft.value ? 0 : 1,
+  };
+});
 
 function updateCursor() {
-  console.log('animating mouse')
+  console.log("animating mouse");
   gsap.set(cursorInnerRef.value, {
     left: x.value,
     top: y.value,
-  })
+  });
 
   gsap.to(cursorOuterRef.value, {
     duration: 0.2,
     x: x.value,
     y: y.value,
   });
-
 }
 
-
 onMounted(() => {
   // requestAnimationFrame(updateCursor)
-  useEventListener('mousemove', updateCursor, document)
-})
+  useEventListener("mousemove", updateCursor, document);
+});
 </script>
 
 <template>
   <NuxtLayout>
     <div class="cursor hidden md:flex">
-      <div ref="cursorInnerRef"
+      <div
+        ref="cursorInnerRef"
         class="cursor--small pointer-events-none select-none fixed z-50 top-0 left-0 w-2 h-2 rounded-full bg-[#36E4DA]"
-        :style="cursorStyle">
-      </div>
-      <div ref="cursorOuterRef"
+        :style="cursorStyle"
+      ></div>
+      <div
+        ref="cursorOuterRef"
         class="cursor--large pointer-events-none select-none fixed z-50 top-0 left-0 w-8 h-8 rounded-full border border-solid border-[#36E4DA]"
-        :style="cursorStyle">
-      </div>
+        :style="cursorStyle"
+      ></div>
     </div>
     <NuxtPage />
     <!-- <UNotifications /> -->