JSPM – @vueuse/core@3.0.7

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

NPM Downloads

Collection of essential Vue Composition API (inspired by react-use)

🚀 Features

0 dependencies ⚡ No worry about your bundle size
Fully tree shakable 🌴 Only take what you want
Seamless migration 🕶 Works for both Vue 3.x and 2.x
Browser compatible 🌐 Use it without complex building tools
Intractive docs & demos 🎪 Check out the Storybook!
Optional Add-ons 🎛 Firebase, i18n in Composition API as well

🦄 Usage

import { useMouse, usePreferredDark, useLocalStorage } from '@vueuse/core'

new Vue({
  setup() {
    // tracks mouse position
    const { x, y } = useMouse()

    // is user prefers dark theme
    const isDark = usePreferredDark()

    // persist state in localStorage
    const state = useLocalStorage(
      'my-storage', 
      {
        name: 'Apple',
        color: 'red',
      },
    )

    return { x, y, isDark, state }
  }
})

Refer to functions and documentations for more details.

📦 Install

for Vue 3.x (vue-next), demo here

npm i @vueuse/core@vue3

for Vue 2.x with composition-api polyfill

npm i @vue/composition-api @vueuse/core@vue2

Please register the Composition API Plugin before using APIs.

CDN

<!-- For Vue 3.x -->
<script src="https://unpkg.com/@vueuse/core@vue3"></script> 

<!-- For Vue 2.x -->
<script src="https://unpkg.com/@vueuse/core@vue2"></script>

It will be exposed to global variable as window.VueUse

⚡ Functions

You can checkout the full documents and live demos in Storybook.

More functions to be added. Please keep turned. (PRs are also welcome!)

🧰 Add-ons

There are also some optional add-ons you can integrate in.

Firebase - enables the realtime bindings for Firebase

🔬 Technical Details

The Versioning

For every release, it will release two version of this package. The 3.x.x is used for Vue 3.x and the 2.x.x is used for 2.x. We use the major version number to distinguish the different target version will the minor and patch numbers are shared in both packages.

Different between 3.x and 2.x

Since the Composition API will be available in 3.x. Using it in 2.x require you use a polyfill. For 3.x build, we use the API from @vue/runtime-dom, and for 2.x, it's @vue/composition-api. All the functions exported in this package behaves the same.

// 3.x build
import { ref } from '@vue/runtime-dom'

// 2.x build
import { ref } from '@vue/composition-api'

🧱 Contribute

See the Contributing Guide

🌸 Thanks

This project is heavily inspired by following awesome projects.

Thanks!

@vueuse/core