v-autosize Vue Textarea Autosize Directive

Common errors

• [Vue warn]: Failed to resolve directive: autosize

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

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

Warnings

• breaking Version 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.
• gotcha The `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.
• gotcha When 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()`.

Install

• npm install v-autosize npm
• yarn add v-autosize yarn
• pnpm add v-autosize pnpm

Imports

• autosize
  wrong:

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

  correct:

  import autosize from 'v-autosize';

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

  import { autosizePlugin } from 'v-autosize';

  correct:

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

  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
  wrong:

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

  correct:

  import autosize from 'v-autosize';

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

Quickstart

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');