vue-autosize

library1.0.2jsnpmunverified

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.

web-framework

npm install vue-autosize

package ↗

INSTALL

IMPORT

SIG · VUE-AUTOSIZE

vue-autosize

web-frameworkjavascriptv1.0.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueAutosize

✓ import VueAutosize from 'vue-autosize';

✗ const { VueAutosize } = require('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)

✓ import Vue from 'vue'; import VueAutosize from 'vue-autosize'; Vue.use(VueAutosize);

✗ Vue.use(require('vue-autosize').default);

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

✓ <textarea v-autosize></textarea>

✗ <textarea autosize></textarea>

After registering the plugin with `Vue.use()`, the directive `v-autosize` becomes globally available for use on `textarea` elements.

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> ` });

Debug

Known issues

breakingThis 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.

affects: >=1.0.0

deprecatedThe `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.

affects: >=1.0.0

gotchaThe 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.

affects: >=1.0.0

gotchaConflicting 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`.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'directive') OR [Vue warn]: Failed to resolve directive: autosize

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.

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.

Upgrade

Version history

1.0.2latest on npm

Audit

Dependencies

autosizerequiredCore dependency for textarea resizing logic.

vuerequiredPeer dependency for the Vue 2 framework.

Agent activity

5 hits · last 30 days

node

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/vue-autosize ↗