v-autosize

library2.0.1jsnpmunverified

v-autosize is a lightweight Vue 3 directive designed to wrap the standalone `autosize` library, enabling `<textarea>` HTML elements to automatically adjust their height to perfectly fit their content. The current stable version, 2.0.1, is built specifically for Vue 3. Users requiring Vue 2 compatibility should refer to `v-autosize@1`. This package differentiates itself from other solutions like `vue-autosize` and `vue-textarea-autosize` by being actively maintained for the current Vue ecosystem (Vue 3) and providing a simple, directive-based integration rather than a component-based one, ensuring minimal boilerplate. Release cadence is typically tied to updates in the core `autosize` library or significant Vue ecosystem changes, prioritizing stability and a small bundle size.

web-framework

npm install v-autosize

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · V-AUTOSIZE

v-autosize

web-frameworkjavascriptv2.0.1

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.

autosize

✓ import autosize from 'v-autosize';

✗ const autosize = require('v-autosize');

This is the primary named export for local directive registration. The package is primarily ESM-first for Vue 3 projects.

autosizePlugin

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

✗ import { autosizePlugin } from 'v-autosize';

Use this specific path for the global Vue plugin. It is a default export from its file, not a named export from the main package entry.

autosize

✓ import autosize from 'v-autosize';

✗ import autosize from 'v-autosize/dist/v-autosize.esm-browser.js';

While browser-specific builds exist, importing directly from the package name allows bundlers to pick the correct entry point (ESM for modern projects).

This quickstart demonstrates how to globally register the `v-autosize` directive plugin and apply it to a `<textarea>` element within a Vue 3 application, enabling automatic height adjustment.

import { createApp } from 'vue'; import autosizePlugin from 'v-autosize/src/plugin.js'; const app = createApp({ template: ` <div> <label for="my-textarea">Resizable Textarea:</label> <textarea id="my-textarea" v-autosize style="width: 300px; padding: 8px; border: 1px solid #ccc;" placeholder="Type something..."></textarea> <p>The textarea above will automatically adjust its height as you type.</p> </div> `, }); app.use(autosizePlugin); app.mount('#app');

Debug

Known issues

breakingVersion 2.x and above of `v-autosize` is exclusively for Vue 3. If you are using Vue 2, you must install `v-autosize@1` instead.

fix

For Vue 2 projects, run `npm install v-autosize@1` or `yarn add v-autosize@1`. For Vue 3, ensure you are on `v-autosize@2` or newer.

affects: >=2.0.0

gotchaThe `v-autosize` directive must be applied directly to a `<textarea>` HTML element. Applying it to other elements (e.g., `<div>` or custom components) will not work as intended and may cause runtime errors.

fix

Ensure `v-autosize` is used only on `<textarea>` elements. If you need it for a custom component, ensure the component internally renders a `<textarea>` and you can pass the directive to it or wrap it.

affects: >=1.0.0

gotchaWhen globally registering the plugin, ensure you import from `v-autosize/src/plugin.js`. A direct import from 'v-autosize' typically provides the directive for local registration, not the global plugin.

fix

Use `import autosizePlugin from 'v-autosize/src/plugin.js';` for global registration with `app.use()`.

affects: >=2.0.0

Errors

Common errors & fixes

[Vue warn]: Failed to resolve directive: autosize

The `v-autosize` directive has not been correctly registered with your Vue application, either locally in a component or globally.

fix

Register the directive. For local use: `import autosize from 'v-autosize'; export default { directives: { autosize } }`. For global use: `import autosizePlugin from 'v-autosize/src/plugin.js'; app.use(autosizePlugin);`

TypeError: Cannot read properties of null (reading 'style') at autosize.

This error often occurs when the `v-autosize` directive is applied to an element that is not a `<textarea>`, or the `<textarea>` element itself is not rendered or accessible at the time of directive binding.

fix

Verify that the `v-autosize` directive is exclusively used on `<textarea>` HTML elements and that the element is present in the DOM when the directive initializes.

Upgrade

Version history

2.0.1latest on npm

Audit

Dependencies

vuerequiredPeer dependency for Vue 3 framework integration.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/shrpne/v-autosize ↗

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

homepagehttps://vue-autosize.netlify.app ↗