refactor(integrations): use direct imports in demos

packages/integrations/useAsyncValidator/demo.client.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Rules } from 'async-validator'
-import { useAsyncValidator } from '@vueuse/integrations'
+import { useAsyncValidator } from '@vueuse/integrations/useAsyncValidator'
 import { reactive } from 'vue'
 
 const form = reactive({ email: '', name: '', age: '' })

packages/integrations/useAxios/demo.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useAxios } from '@vueuse/integrations'
+import { useAxios } from '@vueuse/integrations/useAxios'
 import { reactify } from '@vueuse/shared'
 import YAML from 'yaml'
 

packages/integrations/useChangeCase/demo.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { ChangeCaseType } from '@vueuse/integrations'
-import { useChangeCase } from '@vueuse/integrations'
+import type { ChangeCaseType } from '@vueuse/integrations/useChangeCase'
+import { useChangeCase } from '@vueuse/integrations/useChangeCase'
 import * as ChangeCase from 'change-case'
 import { shallowRef } from 'vue'
 

packages/integrations/useDrauu/demo.client.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { toRefs } from '@vueuse/core'
-import { useDrauu } from '@vueuse/integrations'
+import { useDrauu } from '@vueuse/integrations/useDrauu'
 import { ref as deepRef } from 'vue'
 import Scrubber from '../../core/useMediaControls/components/Scrubber.vue'
 

packages/integrations/useFocusTrap/demo.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useFocusTrap } from '@vueuse/integrations'
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
 import { useTemplateRef } from 'vue'
 
 const target = useTemplateRef<HTMLElement>('target')

packages/integrations/useFuse/demo.vue

@@ -1,6 +1,6 @@
 <script setup lang='ts'>
-import type { UseFuseOptions } from '@vueuse/integrations'
-import { useFuse } from '@vueuse/integrations'
+import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
+import { useFuse } from '@vueuse/integrations/useFuse'
 import { computed, shallowRef, watch } from 'vue'
 
 interface DataItem {

packages/integrations/useIDBKeyval/demo.client.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useIDBKeyval } from '@vueuse/integrations'
+import { useIDBKeyval } from '@vueuse/integrations/useIDBKeyval'
 import { reactify } from '@vueuse/shared'
 import YAML from 'yaml'
 

packages/integrations/useJwt/demo.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useJwt } from '@vueuse/integrations'
+import { useJwt } from '@vueuse/integrations/useJwt'
 import { shallowRef } from 'vue'
 
 const encodedJwt = shallowRef('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwiaWF0IjoxNTE2MjM5MDIyfQ.L8i6g3PfcHlioHCCPURC9pmXT7gdJpx3kOoyAfNUwCc')

packages/integrations/useNProgress/demo.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useNProgress } from '@vueuse/integrations'
+import { useNProgress } from '@vueuse/integrations/useNProgress'
 import './style.css'
 
 const { isLoading, progress } = useNProgress()

packages/integrations/useQRCode/demo.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useQRCode } from '@vueuse/integrations'
+import { useQRCode } from '@vueuse/integrations/useQRCode'
 import { shallowRef } from 'vue'
 
 const text = shallowRef('https://vueuse.org')

packages/integrations/useSortable/demo.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useSortable } from '@vueuse/integrations'
+import { useSortable } from '@vueuse/integrations/useSortable'
 import { shallowRef, useTemplateRef } from 'vue'
 
 const el = useTemplateRef<HTMLElement>('el')