chore: update fetch/storage usages

Author: k2so-dev

nuxt/components/app/Header.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 const auth = useAuthStore();
-const { $storage } = useNuxtApp();
 
 const userItems = [
   [

nuxt/components/input/UploadImage.vue

@@ -3,8 +3,6 @@ const props = defineProps(["modelValue", "entity", "accept", "maxSize", "width",
 const emit = defineEmits(["update:modelValue"]);
 const toast = useToast();
 
-const { $storage, $http } = useNuxtApp();
-
 const value = computed({
   get() {
     return props.modelValue;

nuxt/composables/useHttp.ts

@@ -7,6 +7,6 @@ export function useHttp<T>(
 ) {
   return useFetch(url, {
     ...options,
-    $fetch: useNuxtApp().$http as $Fetch
+    $fetch: $http as $Fetch
   });
 }

nuxt/composables/useLazyHttp.ts

@@ -7,6 +7,6 @@ export function useLazyHttp<T>(
 ) {
   return useLazyFetch(url, {
     ...options,
-    $fetch: useNuxtApp().$http as $Fetch
+    $fetch: $http as $Fetch
   });
 }

nuxt/pages/account/devices.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 const dayjs = useDayjs();
 const auth = useAuthStore();
-const { $http } = useNuxtApp();
 
 const { data, status, refresh } = useHttp<any>("devices");
 const loading = computed(() => status.value === 'pending');