# vue-textarea-autosize

> Vue component provides textarea with automatically adjustable height and without any wrappers and dependencies

Latest version **1.1.1** (published 2019-09-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-textarea-autosize
pnpm add vue-textarea-autosize
yarn add vue-textarea-autosize
bun add vue-textarea-autosize
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2019-09-07 |
| First published | 2017-07-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 41.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 124 |
| Author | Saymon |
| Maintainers | saymon |
| Keywords | vue, vuejs, plugin, textarea, size, auto, autosize, height |

## Links

- npm: https://www.npmjs.com/package/vue-textarea-autosize
- Repository: https://github.com/devstark-com/vue-textarea-autosize
- Homepage: https://github.com/devstark-com/vue-textarea-autosize#readme
- Issues: https://github.com/devstark-com/vue-textarea-autosize/issues
- npm.io page: https://npm.io/package/vue-textarea-autosize

## Dependencies (1)

- [core-js](https://npm.io/package/core-js.md) ^2.6.5

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 1.1.1 (latest) — 2019-09-07
- 1.1.0 — 2019-09-07
- 1.0.4 — 2018-02-23
- 1.0.3 — 2017-08-16
- 1.0.2 — 2017-07-27
- 1.0.1 — 2017-07-27
- 1.0.0 — 2017-07-02
- 0.0.0 — 2017-07-01

## README

# vue-textarea-autosize

[![npm](https://img.shields.io/npm/v/vue-textarea-autosize.svg) ![npm](https://img.shields.io/npm/dm/vue-textarea-autosize.svg)](https://www.npmjs.com/package/vue-textarea-autosize)
[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)

Vue component provides textarea with automatically adjustable height and without any wrappers and dependencies

# Finctionality

- `v-model` binding in parent
- min/max height limitation
- enable/disable auto resizing dynamically

Note

- You are able to handle all native events with `.native` modifier [read more](https://vuejs.org/v2/guide/components.html#Binding-Native-Events-to-Components)
- You are able to use native attrs like this `<textarea-autosize rows="1" ... />`
- There is no CSS out of the box, so you feel free to style it as you wish

# Install

Install with npm
```
npm i -S vue-textarea-autosize
```
or with yarn
```
yarn add vue-textarea-autosize
```

## Add to your app

```js
import Vue from 'vue'
import TextareaAutosize from 'vue-textarea-autosize'

Vue.use(TextareaAutosize)
```

# Usage

In components
```html
<textarea-autosize
  placeholder="Type something here..."
  ref="myTextarea"
  v-model="value"
  :min-height="30"
  :max-height="350"
  @blur.native="onBlurTextarea"
/>
```

Focus/blur or select content in components
```js
this.$refs.myTextarea.$el.focus()
this.$refs.myTextarea.$el.blur()
this.$refs.myTextarea.$el.select()
```

# Interface

### Props

| Props            | Required  | Type            | Default   | Description  |
| ---------------- | --------- | --------------- | --------- | -------------|
| `v-model`          | no     | String, Number  | ''        | value binding |
| `value` | no | String, Number | '' | part of the `v-model` binding |
| `autosize`         | no     | Boolean         | true      | allow to enable/disable auto resizing dynamically |
| `minHeight`        | no     | Number          | null      | min textarea height |
| `maxHeight`        | no     | Number          | null      | max textarea height |
| `important` | no | Boolean, Array | false | Force !important for style properties e.g. when using [http://cleanslatecss.com/](http://cleanslatecss.com/). Allowed values: `true`, `false`, all or some of `['resize', 'overflow', 'height']`|

### Events

| Name      | Params   | Description  |
| ----------|:---------|--------------|
| input     | value    | fires on textarea content changed. part of the `v-model` binding. [read more](https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events) |

### Slots

There are no slots available

---

## License

[MIT](http://opensource.org/licenses/MIT)

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