vue-functional-ref 
Functional-style refs for Vue. Inspired by @antfu.
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-refSupports 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
