# vue-use-model-helpers

> Helpers to manage custom v-model and .sync using composition API

Latest version **4.0.0-beta.4** (published 2023-03-01) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install vue-use-model-helpers
pnpm add vue-use-model-helpers
yarn add vue-use-model-helpers
bun add vue-use-model-helpers
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 4.0.0-beta.4 |
| Published | 2023-03-01 |
| First published | 2021-05-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 12.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Sergio Carracedo |
| Maintainers | sergiocarracedo |
| Keywords | vue, vue3, v-model, composition-api, props, Avoid mutating a prop directly |

## Links

- npm: https://www.npmjs.com/package/vue-use-model-helpers
- Repository: https://github.com/sergiocarracedo/vue-use-model-helpers
- Homepage: https://github.com/sergiocarracedo/vue-use-model-helpers#readme
- Issues: https://github.com/sergiocarracedo/vue-use-model-helpers/issues
- npm.io page: https://npm.io/package/vue-use-model-helpers

## Dependencies (1)

- [vue-demi](https://npm.io/package/vue-demi.md) ^0.13.11

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 4.0.0-beta.4 (latest) — 2023-03-01
- 4.0.0-beta.3 — 2023-02-19
- 4.0.0-beta.2 — 2022-10-23
- 4.0.0-beta.1 — 2022-10-23
- 3.0.1 — 2022-04-06
- 3.0.0 — 2021-05-07
- 2.0.0 — 2021-05-07
- 1.0.0-beta.1 — 2021-05-06
- 0.0.1 — 2021-05-06

## README

# Vue use model helpers 4

This library provides a helper to convert a component's property to a local Ref you can mutate when you are using composition-api, simplifying  the management of the custom `v-model` and `.sync`

This library works with Vue 2.7+ and Vue 3

## Motivation

When you create a component that gets a property and then needs to mutate it into the component you get this vue warn

`[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component`

You need to copy the property value to a local value to use in the component,

Also should update your local value when the property value changes

If the property is a `v-model` or uses `.sync` you also must take care of emitting an event when your local value changes to keep updated the property value in the parent component.

The motivation of this library is simplifying this task and reducing the amount of repetitive code.

## Requeriments
Vue 2.7+ or 3.x
If you need support for vue 2.5+ and composition Api, please use the `2.x` version

## Improvements in 4.x
* The library return just one property at time in order of be able to infer prop type
* Same code runs in vue 2.7 and 3.x


## Getting started

### Install
`npm i vue-use-model-helper@4 --save`
or
`yarn add vue-use-model-helper@4`

### Usage
In your component:

```ts
import { useLocalModel } from 'vue-use-model-helpers'

export default defineComponent({
  ...
  props: {
    value: String
  } ,
  setup(props) {
    
    const localValue = useLocalModel(props, 'value')
  
    return {
      localValue  
    }
  }
  ...
})
```

Now you can use `localValue` in your component, and the helper takes care of sync the values, emit the update event, etc

The component can work with both `value` and `.sync` emitting the correct event to keep the property updated

## Examples

```ts
<template>
  <div>
    {{ localCounter }}
    <button @click="increaseCounter"></button>
  </div>
</template>
import { useLocalModel } from 'vue-use-model-helpers'

export default defineComponent({
  ...
  props: {
    value: String,
    counter: Number // This propery has .sync in the parent component  
  }  ,
  setup(props) {
    const localValue = useLocalModel(props, 'value')
    const localCounter = useLocalModel(props, 'counter')
  
    const increaseCounter = () => {
        localCounter.value = localCounter.value + 1
    }
  
    return {
      localValue,
      localCounter,
      increaseCounter
    }
  }
  ...
})
```

Proudly created in Vigo and around its [local community](https://vigotech.org)

---
_Source: https://npm.io/package/vue-use-model-helpers · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._