https://github.com/shrpne/v-autosize

Lightweight Vue wrapper for autosize.
https://github.com/shrpne/v-autosize

autosize textarea vue

Last synced: about 1 year ago
JSON representation

Lightweight Vue wrapper for autosize.

• Host: GitHub
• URL: https://github.com/shrpne/v-autosize
• Owner: shrpne
• License: mit
• Created: 2018-08-02T07:57:09.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2025-02-01T23:12:34.000Z (over 1 year ago)
• Last Synced: 2025-04-10T10:42:02.814Z (about 1 year ago)
• Topics: autosize, textarea, vue
• Language: JavaScript
• Homepage:
• Size: 545 KB
• Stars: 17
• Watchers: 1
• Forks: 0
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# v-autosize

[![NPM Package](https://img.shields.io/npm/v/v-autosize.svg?style=flat-square)](https://www.npmjs.org/package/v-autosize)

[![Minified Size](https://img.shields.io/bundlephobia/min/v-autosize.svg?style=flat-square)](https://bundlephobia.com/result?p=v-autosize)

[![Build Status](https://img.shields.io/travis/com/shrpne/v-autosize/master.svg?style=flat-square)](https://travis-ci.com/shrpne/v-autosize)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://github.com/shrpne/v-autosize/blob/master/LICENSE)

Lightweight Vue 3 wrapper for [autosize](https://github.com/jackmoore/autosize).

Use `v-autosize` directive on the `textarea` element to make it automatically adjust height to fit text.

### Using Vue 2?

Check old version [v-autosize@1](https://github.com/shrpne/v-autosize/tree/v1?tab=readme-ov-file)

## Install

```

npm install v-autosize

```

## Register

Register directive locally in the component

```js

import autosize from 'v-autosize';

// Your component

export default {

    directives: {

        autosize,

    }

}

```

Or register directive globally in the root Vue instance

```js

import { createApp } from 'vue'

import autosizePlugin from 'v-autosize/src/plugin.js';

const app = createApp({})

app.use(autosizePlugin)

```

## Use

Use `v-autosize` directive on the `textarea` element

```html

```

## Comparison

- This module: [![Minified Size](https://img.shields.io/bundlephobia/min/v-autosize.svg?style=flat-square&label=minified)](https://bundlephobia.com/result?p=v-autosize) [![Minified Size](https://img.shields.io/bundlephobia/minzip/v-autosize.svg?style=flat-square&label=gzipped)](https://bundlephobia.com/result?p=v-autosize)

- [`vue-autosize`](https://github.com/mage3k/vue-autosize): [![Minified Size](https://img.shields.io/bundlephobia/min/vue-autosize.svg?style=flat-square&label=minified)](https://bundlephobia.com/result?p=vue-autosize) [![Minified Size](https://img.shields.io/bundlephobia/minzip/vue-autosize.svg?style=flat-square&label=gzipped)](https://bundlephobia.com/result?p=vue-autosize) Doesn't support Vue 3, `autosize-input` included, not maintained.

- [`vue-textarea-autosize`](https://github.com/devstark-com/vue-textarea-autosize): [![Minified Size](https://img.shields.io/bundlephobia/min/vue-textarea-autosize.svg?style=flat-square&label=minified)](https://bundlephobia.com/result?p=vue-textarea-autosize) [![Minified Size](https://img.shields.io/bundlephobia/minzip/vue-textarea-autosize.svg?style=flat-square&label=gzipped)](https://bundlephobia.com/result?p=vue-textarea-autosize) Doesn't support Vue 3. A component is used instead of a directive.

## License

MIT License