Vue Autosize Directive (Vue 2)

1.0.2 · abandoned · verified Sun Apr 19

The `vue-autosize` package provides a simple Vue 2 directive that integrates the `autosize.js` library into Vue applications, allowing `textarea` elements to automatically adjust their height to fit content. While `autosize.js` itself is actively maintained (latest v6.0.1, published February 2023), this specific Vue 2 wrapper (v1.0.2) is not actively maintained and does not support Vue 3. For new projects or Vue 3, developers should consider modern alternatives like `v-autosize` (a Vue 3 wrapper), `vue-textarea-autosize` (a component-based solution), or `useTextareaAutosize` from VueUse. Its key differentiator was its straightforward directive-based approach for Vue 2, simplifying textarea resizing without complex component structures.

Common errors

```
TypeError: Cannot read properties of undefined (reading 'directive') OR [Vue warn]: Failed to resolve directive: autosize
```
cause The `vue-autosize` plugin was not correctly registered with Vue, or you are attempting to use it in a Vue 3 project where the directive API has changed.

fix Ensure `Vue.use(VueAutosize)` is called before your Vue application mounts. If using Vue 3, this package is incompatible; switch to a Vue 3 specific alternative.
```
Textarea not resizing initially or after programmatic content change.
```
cause The textarea might be `display: none` on mount, or its value was updated by JavaScript without `autosize.js` being notified to recalculate.

fix Ensure the textarea is visible when the component mounts. If content changes programmatically, and resizing doesn't occur, you may need to force a re-render or find a way to manually trigger an `autosize.update` if the wrapper provides access, or consider alternatives that better handle dynamic updates.

Warnings

breaking This package is explicitly noted as not supporting Vue 3. Attempting to use it in a Vue 3 project will lead to errors due to API changes in Vue's directive system.
Fix: For Vue 3 projects, consider using dedicated Vue 3 wrappers like `v-autosize` by `shrpne`, `vue-textarea-autosize`, or `useTextareaAutosize` from VueUse.
deprecated The `vue-autosize` package is not actively maintained and is considered abandoned. While it works for Vue 2, new feature development or bug fixes are unlikely.
Fix: For new projects, evaluate more current and maintained solutions, especially those designed for Vue 3 or with active development, even if targeting Vue 2.
gotcha The underlying `autosize.js` library, and thus this directive, may not correctly initialize or update the textarea height if the element is initially hidden (e.g., `display: none`) or its content is changed programmatically after initial rendering without triggering an update.
Fix: If a textarea's visibility or content changes dynamically, you might need to manually trigger an update. The base `autosize.js` library provides an `autosize.update(elements)` method, but this wrapper does not directly expose it. A workaround might involve re-rendering the component or using a specific event.
gotcha Conflicting CSS properties like `height`, `min-height`, or `max-height` can interfere with the autosizing behavior. While `autosize.js` supports `min-height` and `max-height` via CSS, directly setting `height` will override its functionality.
Fix: Ensure that your `textarea` elements only use `min-height` and `max-height` CSS properties if you intend for `v-autosize` to manage the dynamic height. Avoid setting a fixed `height`.

Install

npm install vue-autosize npm
yarn add vue-autosize yarn
pnpm add vue-autosize pnpm

Imports

VueAutosize
wrong:
```
const { VueAutosize } = require('vue-autosize');
```
correct:
```
import VueAutosize from 'vue-autosize';
```
The package exports a default plugin object for `Vue.use()`. Direct named imports are not the intended usage for the plugin itself.
Vue.use(VueAutosize)
wrong:
```
Vue.use(require('vue-autosize').default);
```
correct:
```
import Vue from 'vue';
import VueAutosize from 'vue-autosize';
Vue.use(VueAutosize);
```
This is the primary way to register the directive globally in a Vue 2 application. The `.default` on require is sometimes seen but usually unnecessary if the CommonJS export is a single object.
v-autosize
wrong:
```
<textarea autosize></textarea>
```
correct:
```
<textarea v-autosize></textarea>
```
After registering the plugin with `Vue.use()`, the directive `v-autosize` becomes globally available for use on `textarea` elements.

Quickstart

Demonstrates global registration of the `v-autosize` directive and its application to `textarea` elements in a Vue 2 instance, showing automatic height adjustment.

import Vue from 'vue';
import VueAutosize from 'vue-autosize';

Vue.use(VueAutosize);

new Vue({
  el: '#app',
  data: {
    message: 'This textarea will automatically adjust its height as you type. Try typing a lot of text here to see it expand vertically. The underlying autosize.js library handles the resizing logic efficiently.',
    anotherMessage: 'Short message.'
  },
  template: `
    <div id="app">
      <h3>Autosizing Textareas</h3>
      <textarea v-autosize v-model="message" style="width: 100%; border: 1px solid #ccc; padding: 8px;"></textarea>
      <p>Current message length: {{ message.length }}</p>
      <br>
      <textarea v-autosize v-model="anotherMessage" style="width: 100%; border: 1px solid #ccc; padding: 8px;"></textarea>
    </div>
  `
});

view raw JSON →