Awesome

vue-functional-ref

Functional-style refs for Vue. Inspired by @antfu.

Requires Vue 3.5+

Features

✨ Extend refs with functional style.
💖 Compatible with existing libraries. Tested on Element Plus and VueUse.
🦾 Full TypeScript support.
⚡️ Supports Vite, Rollup, esbuild.

Install

PNPM / Yarn (Recommended)

If you're using pnpm or Yarn, try this approach first!

pnpm i vue-functional-ref

// package.json
{
  // ...
  "resolutions": {
    "@vue/runtime-core>@vue/reactivity": "npm:vue-functional-ref",
  },
}

Bundler

If you're not using pnpm but using Rollup, Vite or esbuild, try this approach.

npm i vue-functional-ref

Supports Vite, Rollup and esbuild.

import VueFunctionalRef from 'vue-functional-ref/vite'
//                   Rollup: 'vue-functional-ref/rollup'
//                  esbuild: 'vue-functional-ref/esbuild'

export default {
  plugins: [VueFunctionalRef()],
}

TypeScript Support

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "paths": {
      "@vue/reactivity": ["./node_modules/vue-functional-ref/types"],
    },
  },
}

Usage

Ref

import { ref } from 'vue'

const count = ref(1)
count.set(10)
console.log(count())

// Mutate value inside of object
const obj = ref({ count: 1 })
obj.mutate((obj) => obj.count++)

Computed

import { computed, ref } from 'vue'

const count = ref(1)
const double = computed(() => count() * 2)

console.log(double() === 2) // true
console.log(double.set === undefined) // true