VueUseGet Started
Learn VueUse with videoVueUse is a collection of utility functions based on Composition API. We assume you are already familiar with the basic ideas of Composition API before you continue.
Installation
🎩 From v4.0, it works for Vue 2 & 3 within a single package by the power of vue-demi!
bash
npm i @vueuse/core
npm i @vueuse/core
From v6.0, VueUse requires
vue>= v3.2 or@vue/composition-api>= v1.1
Demos
CDN
html
<script src="https://unpkg.com/@vueuse/shared"></script>
<script src="https://unpkg.com/@vueuse/core"></script>
<script src="https://unpkg.com/@vueuse/shared"></script>
<script src="https://unpkg.com/@vueuse/core"></script>
It will be exposed to global as window.VueUse
Nuxt
From v7.2.0, we shipped a Nuxt module to enable auto importing for Nuxt 3 and Nuxt Bridge.
bash
npm i -D @vueuse/nuxt @vueuse/core
npm i -D @vueuse/nuxt @vueuse/core
Nuxt 3
ts
// nuxt.config.ts
export default {
modules: [
'@vueuse/nuxt',
],
}
// nuxt.config.ts
export default {
modules: [
'@vueuse/nuxt',
],
}
Nuxt 2
ts
// nuxt.config.js
export default {
buildModules: [
'@vueuse/nuxt',
],
}
// nuxt.config.js
export default {
buildModules: [
'@vueuse/nuxt',
],
}
And then use VueUse function anywhere in your Nuxt app. For example:
html
<script setup lang="ts">
const { x, y } = useMouse()
</script>
<template>
<div>pos: {{x}}, {{y}}</div>
</template>
<script setup lang="ts">
const { x, y } = useMouse()
</script>
<template>
<div>pos: {{x}}, {{y}}</div>
</template>
Usage Example
Simply importing the functions you need from @vueuse/core
ts
import { useLocalStorage, useMouse, usePreferredDark } from '@vueuse/core'
export default {
setup() {
// tracks mouse position
const { x, y } = useMouse()
// is user prefers dark theme
const isDark = usePreferredDark()
// persist state in localStorage
const store = useLocalStorage(
'my-storage',
{
name: 'Apple',
color: 'red',
},
)
return { x, y, isDark, store }
},
}
import { useLocalStorage, useMouse, usePreferredDark } from '@vueuse/core'
export default {
setup() {
// tracks mouse position
const { x, y } = useMouse()
// is user prefers dark theme
const isDark = usePreferredDark()
// persist state in localStorage
const store = useLocalStorage(
'my-storage',
{
name: 'Apple',
color: 'red',
},
)
return { x, y, isDark, store }
},
}
Refer to functions list for more details.