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 (Recommended)

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

pnpm i vue-functional-ref

{
  // package.json

  // ...
  "pnpm": {
    "overrides": {
      "@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": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@vue/reactivity": ["./node_modules/vue-functional-ref/types"],
    },
  },
}

Usage

Ref

<script setup>
import { ref } from 'vue'
const count = ref(1)
count.set(10)

console.log(count())
</script>

Computed

<script setup>
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
</script>

Sponsors

License

MIT License © 2022 三咲智子