docs(integrations,math,rxjs): replace relative imports with vueuse im…

…ports
vueuse · antfu · May 14, 2025 · Apr 14, 2025 · Apr 14, 2025 · Apr 14, 2025
commit 2d4455635eceac0b7480bd1e61b2e8617bd0a4a1
diff --git a/packages/integrations/useAxios/demo.vue b/packages/integrations/useAxios/demo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { useAxios } from '@vueuse/integrations'
 import { stringify } from '@vueuse/internal-docs-utils'
-import { useAxios } from './index'

 const { data, isLoading, isFinished, execute, abort, isAborted } = useAxios(
  'https://jsonplaceholder.typicode.com/todos/1',

diff --git a/packages/integrations/useChangeCase/demo.vue b/packages/integrations/useChangeCase/demo.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { ChangeCaseType } from './index'
+import type { ChangeCaseType } from '@vueuse/integrations'
+import { useChangeCase } from '@vueuse/integrations'
 import * as ChangeCase from 'change-case'
 import { shallowRef } from 'vue'
-import { useChangeCase } from './index'

 const transforms: any = Object.keys(ChangeCase).filter(v => v.endsWith('Case'))
 const input = shallowRef('helloWorld')

diff --git a/packages/integrations/useDrauu/demo.client.vue b/packages/integrations/useDrauu/demo.client.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { toRefs } from '@vueuse/shared'
+import { toRefs } from '@vueuse/core'
+import { useDrauu } from '@vueuse/integrations'
 import { ref as deepRef } from 'vue'
 import Scrubber from '../../core/useMediaControls/components/Scrubber.vue'
-import { useDrauu } from './index'

 const colors = deepRef(['black', '#ef4444', '#22c55e', '#3b82f6'])
 const target = deepRef()

diff --git a/packages/integrations/useFocusTrap/demo.vue b/packages/integrations/useFocusTrap/demo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { useFocusTrap } from '@vueuse/integrations'
 import { useTemplateRef } from 'vue'
-import { useFocusTrap } from './index'

 const target = useTemplateRef<HTMLElement>('target')
 const { hasFocus, activate, deactivate } = useFocusTrap(target)

diff --git a/packages/integrations/useFuse/demo.vue b/packages/integrations/useFuse/demo.vue
@@ -1,7 +1,7 @@
 <script setup lang='ts'>
-import type { UseFuseOptions } from './index'
+import type { UseFuseOptions } from '@vueuse/integrations'
+import { useFuse } from '@vueuse/integrations'
 import { computed, shallowRef, watch } from 'vue'
-import { useFuse } from './index'

 interface DataItem {
  firstName: string

diff --git a/packages/integrations/useIDBKeyval/demo.client.vue b/packages/integrations/useIDBKeyval/demo.client.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { useIDBKeyval } from '@vueuse/integrations'
 import { stringify } from '@vueuse/internal-docs-utils'
-import { useIDBKeyval } from './index'

 const KEY = 'vue-use-idb-keyval'


diff --git a/packages/integrations/useJwt/demo.vue b/packages/integrations/useJwt/demo.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
+import { useJwt } from '@vueuse/integrations'
 import { shallowRef } from 'vue'

-import { useJwt } from './index'
-
 const encodedJwt = shallowRef('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwiaWF0IjoxNTE2MjM5MDIyfQ.L8i6g3PfcHlioHCCPURC9pmXT7gdJpx3kOoyAfNUwCc')
 const { header, payload } = useJwt(encodedJwt)
 </script>

diff --git a/packages/integrations/useNProgress/demo.vue b/packages/integrations/useNProgress/demo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useNProgress } from './index'
+import { useNProgress } from '@vueuse/integrations'
 import './style.css'

 const { isLoading, progress } = useNProgress()

diff --git a/packages/integrations/useQRCode/demo.vue b/packages/integrations/useQRCode/demo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { useQRCode } from '@vueuse/integrations'
 import { shallowRef } from 'vue'
-import { useQRCode } from './index'

 const text = shallowRef('https://vueuse.org')
 const qrcode = useQRCode(text, {

diff --git a/packages/integrations/useSortable/demo.vue b/packages/integrations/useSortable/demo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { useSortable } from '@vueuse/integrations'
 import { shallowRef, useTemplateRef } from 'vue'
-import { useSortable } from './index'

 const el = useTemplateRef<HTMLElement>('el')
 const list = shallowRef([{ id: 1, name: 'a' }, { id: 2, name: 'b' }, { id: 3, name: 'c' }])

diff --git a/packages/math/useProjection/demo.vue b/packages/math/useProjection/demo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { useProjection } from '@vueuse/math'
 import { shallowRef } from 'vue'
-import { useProjection } from './index'

 const from = shallowRef<[number, number]>([0, 10])
 const to = shallowRef<[number, number]>([10, 100])

diff --git a/packages/rxjs/from/_demo.vue b/packages/rxjs/from/_demo.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
+import { from, fromEvent, toObserver, useSubscription } from '@vueuse/rxjs'
 import { interval } from 'rxjs'
 import {
  map,
@@ -8,9 +9,6 @@ import {
  withLatestFrom,
 } from 'rxjs/operators'
 import { ref as deepRef, shallowRef } from 'vue'
-import { toObserver } from '../toObserver'
-import { useSubscription } from '../useSubscription'
-import { from, fromEvent } from './index'

 const count = shallowRef(0)
 const button = deepRef<HTMLButtonElement | null>(null)

diff --git a/packages/rxjs/toObserver/_demo.vue b/packages/rxjs/toObserver/_demo.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
+import { from, fromEvent, toObserver, useSubscription } from '@vueuse/rxjs'
 import { interval } from 'rxjs'
 import {
  map,
@@ -9,9 +10,6 @@ import {
  withLatestFrom,
 } from 'rxjs/operators'
 import { ref as deepRef, shallowRef } from 'vue'
-import { from, fromEvent } from '../from'
-import { useSubscription } from '../useSubscription'
-import { toObserver } from './index'

 const count = shallowRef(0)
 const button = deepRef<HTMLButtonElement | null>(null)

diff --git a/packages/rxjs/useExtractedObservable/_demo.vue b/packages/rxjs/useExtractedObservable/_demo.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { useExtractedObservable } from '@vueuse/rxjs'
 import { interval } from 'rxjs'
 import { mapTo, scan, startWith } from 'rxjs/operators'
 import { shallowRef } from 'vue'
-import { useExtractedObservable } from './index'

 const start = shallowRef(0)


diff --git a/packages/rxjs/useObservable/_demo.vue b/packages/rxjs/useObservable/_demo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { useObservable } from '@vueuse/rxjs'
 import { interval } from 'rxjs'
 import { mapTo, scan, startWith } from 'rxjs/operators'
-import { useObservable } from './index'

 const count = useObservable(
  interval(1000).pipe(

diff --git a/packages/rxjs/useSubject/demo.vue b/packages/rxjs/useSubject/demo.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { useSubject } from '@vueuse/rxjs'
 import { tryOnScopeDispose } from '@vueuse/shared'
 import { BehaviorSubject } from 'rxjs'
 import { onMounted, watch } from 'vue'
-import { useSubject } from './index'

 const countSubject = new BehaviorSubject(0)
 const count = useSubject(countSubject)

diff --git a/packages/rxjs/useSubscription/_demo.vue b/packages/rxjs/useSubscription/_demo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { useSubscription } from '@vueuse/rxjs'
 import { interval } from 'rxjs'
 import { shallowRef } from 'vue'
-import { useSubscription } from './index'

 const count = shallowRef(0)
 useSubscription(

diff --git a/packages/rxjs/watchExtractedObservable/_demo.vue b/packages/rxjs/watchExtractedObservable/_demo.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { Observable } from 'rxjs'
+import { watchExtractedObservable } from '@vueuse/rxjs'
 import { fromEvent } from 'rxjs'
 import { map, skip, tap } from 'rxjs/operators'
 import { computed, ref as deepRef, reactive } from 'vue'
-import { watchExtractedObservable } from './index'

 class AudioPlayer {
  public readonly reachEnd$: Observable<unknown>