feat: vueuse/nuxt

components/Audiostream.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useMediaControls } from "@vueuse/core";
 import IconPlay from "~icons/ph/play-circle-thin";
 import IconPause from "~icons/ph/pause-circle-thin";
 import IconCircle from "~icons/ph/circle-fill";

components/Controls.client.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { debouncedWatch } from "@vueuse/core";
-
 type Props = {
   controls: any;
   channel: string;

components/Datetime.client.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useNow } from "@vueuse/core";
 import { differenceInSeconds } from "date-fns";
 
 type Props = {

components/Dock.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { useIdle } from "@vueuse/core";
-
 type Props = {
   draggables: any;
 };

components/Draggable.client.vue

@@ -5,13 +5,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import {
-  useDraggable,
-  useIdle,
-  useTimeoutFn,
-  useWindowSize,
-} from "@vueuse/core";
-import { Ref } from "vue";
+import type { Ref } from "vue";
 import IconDock from "~icons/radix-icons/minus";
 
 type Props = {

components/LabVideo.vue

@@ -1,11 +1,6 @@
 <script setup lang="ts">
 import { format } from "date-fns";
 import { scaleTime, scaleLinear, csvParse } from "d3";
-import {
-  useElementSize,
-  useMediaControls,
-  useMouseInElement,
-} from "@vueuse/core";
 
 type Props = {
   video: any;

components/Nav.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { useMagicKeys, whenever } from "@vueuse/core";
 import IconMenu from "~icons/radix-icons/drag-handle-horizontal";
-
 const { theme, changeTheme } = useTheme();
 const { lang, changeLang } = useLang();
 const menu = ref(false);

components/RechargingButton.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { useInterval, useStorage } from "@vueuse/core";
-
 type Emits = {
   (e: "click"): void;
   (e: "remaining", value: number): void;

components/Videostream.client.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { useFullscreen, useIdle, useMediaControls } from "@vueuse/core";
-
 import IconMuted from "~icons/radix-icons/speaker-off";
 import IconUnmuted from "~icons/radix-icons/speaker-loud";
 import IconEnterPip from "~icons/ph/picture-in-picture";

composables/chat.ts

@@ -1,5 +1,4 @@
 import { computed, Ref, ref } from "vue";
-import { useFocus, useScroll, onKeyStroke, useKeyModifier } from "@vueuse/core";
 
 interface UseChatOptions {
   userId?: Ref<string>;

composables/datetime.ts

@@ -1,5 +1,4 @@
 import { computed } from "vue";
-import { useNow } from "@vueuse/core";
 import {
   differenceInMinutes,
   format,

composables/messages.ts

@@ -1,5 +1,4 @@
 import { ref } from "vue";
-import { useWebSocket } from "@vueuse/core";
 
 const wsUrl = "wss://data.elektron.art";
 

composables/theme.ts

@@ -1,5 +1,3 @@
-import { useCssVar } from "@vueuse/core";
-
 const vars = [
   [useCssVar("--white"), ["255 255 255", "0 0 0"]],
   [useCssVar("--gray-50"), ["250 250 250", "23 23 23"]],

composables/videostream.ts

@@ -1,6 +1,6 @@
 import { Ref, ref, watch, onMounted, onUnmounted } from "vue";
 import Hls from "hls.js";
-import type { MaybeRef } from "@vueuse/core";
+import { MaybeRef } from "@vueuse/core";
 
 // Although the video player supports "paused" status
 // it is not currently supported, since is not that useful

nuxt.config.ts

@@ -5,6 +5,7 @@ export default defineNuxtConfig({
     "@nuxtjs/strapi",
     "@nuxtjs/tailwindcss",
     ["unplugin-icons/nuxt", { autoInstall: true }],
+    "@vueuse/nuxt",
   ],
   runtimeConfig: {
     strapiUrl: "",