Vueuse Module • Nuxt

Collection of essential Vue Composition Utilities

🚀 Features

🎪 Interactive docs & demos
🕶 Seamless migration: Works for both Vue 3 and 2
⚡ Fully tree shakeable: Only take what you want, bundle size
🦾 Type Strong: Written in TypeScript, with TS Docs
🔋 SSR Friendly
🌎 No bundler required: Usable via CDN
🔩 Flexible: Configurable event filters and targets
🔌 Optional Add-ons: Router, Firebase, RxJS, etc.

🦄 Usage

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 or documentations for more details.

📦 Install

🎩 From v4.0, it works for Vue 2 & 3 within a single package by the power of vue-demi!

npm i @vueuse/core

Add ons | Nuxt Module

From v6.0, VueUse requires vue >= v3.2 or @vue/composition-api >= v1.1

Demos

CDN

<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

🪴 Project Activity

Alt

🧱 Contribute

See the Contributing Guide

🌸 Thanks

This project is heavily inspired by the following awesome projects.

And thanks to all the contributors on GitHub!

vueuse