VueUse - Biblioteka Composables

VueUse to kolekcja 200+ gotowych composables - jak biblioteka standardowych protokołów badawczych NOVA LAB!

Instalacja VueUse

1npm install @vueuse/core

useLocalStorage

1<script setup>
2import { useLocalStorage } from '@vueuse/core'
3
4// Automatycznie synchronizuje z localStorage
5const labSettings = useLocalStorage('lab-settings', {
6  mode: 'exploration',
7  sensorsPerView: 12,
8  sortBy: 'temperature'
9})
10
11// Zmiana automatycznie zapisuje w localStorage
12labSettings.value.mode = 'research'
13</script>
14
15<template>
16  <div>
17    <p>Tryb: {{ labSettings.mode }}</p>
18    <button @click="labSettings.mode = 'maintenance'">
19      Zmień tryb
20    </button>
21  </div>
22</template>

useMouseInElement

1<script setup>
2import { ref } from 'vue'
3import { useMouseInElement } from '@vueuse/core'
4
5const sensorPanel = ref(null)
6const { x, y, isOutside } = useMouseInElement(sensorPanel)
7</script>
8
9<template>
10  <div ref="sensorPanel" class="sensor-panel">
11    <img src="/sensor-display.jpg" />
12    <div v-if="!isOutside" class="tooltip" :style="{ left: x + 'px', top: y + 'px' }">
13      Pozycja: {{ x }}, {{ y }}
14    </div>
15  </div>
16</template>

useIntersectionObserver

1<script setup>
2import { ref } from 'vue'
3import { useIntersectionObserver } from '@vueuse/core'
4
5const experimentPanel = ref(null)
6const isVisible = ref(false)
7
8useIntersectionObserver(
9  experimentPanel,
10  ([{ isIntersecting }]) => {
11    isVisible.value = isIntersecting
12  }
13)
14</script>
15
16<template>
17  <div ref="experimentPanel">
18    <Transition name="fade">
19      <img v-if="isVisible" src="/experiment-data.jpg" />
20    </Transition>
21  </div>
22</template>

useWindowSize

1<script setup>
2import { useWindowSize } from '@vueuse/core'
3import { computed } from 'vue'
4
5const { width, height } = useWindowSize()
6
7const isMobile = computed(() => width.value < 768)
8const isTablet = computed(() => width.value >= 768 && width.value < 1024)
9const isDesktop = computed(() => width.value >= 1024)
10</script>
11
12<template>
13  <div>
14    <p v-if="isMobile">Widok mobilny</p>
15    <p v-else-if="isTablet">Widok tabletowy</p>
16    <p v-else>Widok desktopowy</p>
17    <p>Wymiary: {{ width }} x {{ height }}</p>
18  </div>
19</template>

useDark & useToggle

1<script setup>
2import { useDark, useToggle } from '@vueuse/core'
3
4const isDark = useDark()
5const toggleDark = useToggle(isDark)
6</script>
7
8<template>
9  <div :class="{ dark: isDark }">
10    <button @click="toggleDark()">
11      {{ isDark ? '☀️ Jasny' : '🌙 Ciemny' }} motyw
12    </button>
13  </div>
14</template>
15
16<style>
17body {
18  transition: background 0.3s, color 0.3s;
19}
20
21.dark {
22  background: #1a1a1a;
23  color: #f5f5f5;
24}
25</style>

useDebounce & useThrottle

1<script setup>
2import { ref } from 'vue'
3import { useDebouncedRef, useThrottledRef } from '@vueuse/core'
4
5// Debounce - czeka aż użytkownik przestanie pisać
6const searchQuery = ref('')
7const debouncedQuery = useDebouncedRef(searchQuery, 500)
8
9// Throttle - maksymalnie raz na X ms
10const scrollPosition = ref(0)
11const throttledScroll = useThrottledRef(scrollPosition, 100)
12</script>
13
14<template>
15  <input v-model="searchQuery" placeholder="Szukaj..." />
16  <p>Wyszukiwanie: {{ debouncedQuery }}</p>
17</template>

Popularne Composables z VueUse

| Composable | Opis | |------------|------| |

useLocalStorage

| LocalStorage reaktywnie | |

useFetch

| Fetch z reaktywnością | |

useIntersectionObserver

| Wykrywanie widoczności | |

useMouseInElement

| Pozycja myszy w elemencie | |

useWindowSize

| Rozmiar okna | |

useDark

| Tryb ciemny | |

useDebounce

| Opóźniona reaktywność | |

useClipboard

| Kopiowanie do schowka |