JSPM

Package Exports

@vueuse/core

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@vueuse/core) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Collection of essential Vue Composition Utilities

🚀 Features

🎪 Interactive docs & demos
🕶 Seamless migration: Works for both Vue 3 and 2
⚡ Fully tree shakable: 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 { useMouse, usePreferredDark, useLocalStorage } 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

Vue 3 Demo: Vite, Webpack / Vue 2 Demo: Vue CLI

CDN

<script src="https://unpkg.com/@vueuse/core"></script>

It will be exposed to global as window.VueUse

🧱 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/core