https://github.com/sxzz/vue-functional-ref
Functional-style refs for Vue reactivity.
https://github.com/sxzz/vue-functional-ref
Last synced: about 1 month ago
JSON representation
Functional-style refs for Vue reactivity.
- Host: GitHub
- URL: https://github.com/sxzz/vue-functional-ref
- Owner: sxzz
- License: mit
- Created: 2022-08-30T08:12:16.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-09-29T21:55:15.000Z (about 2 months ago)
- Last Synced: 2025-09-29T23:41:47.377Z (about 2 months ago)
- Language: TypeScript
- Homepage:
- Size: 848 KB
- Stars: 189
- Watchers: 1
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# vue-functional-ref
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![Unit Test][unit-test-src]][unit-test-href]
Functional-style refs for Vue. Inspired by [@antfu](https://github.com/antfu).
Requires Vue 3.5+
## Features
- ✨ Extend refs with functional style.
- 💖 Compatible with existing libraries. Tested on [Element Plus](https://github.com/element-plus/element-plus) and [VueUse](https://github.com/vueuse/vueuse).
- 🦾 Full TypeScript support.
- ⚡️ Supports Vite, Rollup, esbuild.
## Install
### PNPM / Yarn (Recommended)
If you're using pnpm or Yarn, try this approach first!
```bash
pnpm i vue-functional-ref
```
```jsonc
// 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.
```bash
npm i vue-functional-ref
```
Supports Vite, Rollup and esbuild.
```ts
import VueFunctionalRef from 'vue-functional-ref/vite'
// Rollup: 'vue-functional-ref/rollup'
// esbuild: 'vue-functional-ref/esbuild'
export default {
plugins: [VueFunctionalRef()],
}
```
#### TypeScript Support
```jsonc
// tsconfig.json
{
"compilerOptions": {
// ...
"paths": {
"@vue/reactivity": ["./node_modules/vue-functional-ref/types"],
},
},
}
```
## Usage
### Ref
```ts
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
```ts
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
```
## Sponsors
## License
[MIT](./LICENSE) License © 2022-PRESENT [Kevin Deng](https://github.com/sxzz)
[npm-version-src]: https://img.shields.io/npm/v/vue-functional-ref.svg
[npm-version-href]: https://npmjs.com/package/vue-functional-ref
[npm-downloads-src]: https://img.shields.io/npm/dm/vue-functional-ref
[npm-downloads-href]: https://www.npmcharts.com/compare/vue-functional-ref?interval=30
[unit-test-src]: https://github.com/sxzz/vue-functional-ref/actions/workflows/unit-test.yml/badge.svg
[unit-test-href]: https://github.com/sxzz/vue-functional-ref/actions/workflows/unit-test.yml