{"id":12336,"library":"v-autosize","title":"v-autosize Vue Textarea Autosize Directive","description":"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.","status":"active","version":"2.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/shrpne/v-autosize","tags":["javascript","vue","textarea","autosize","adjust","height","directive","typescript"],"install":[{"cmd":"npm install v-autosize","lang":"bash","label":"npm"},{"cmd":"yarn add v-autosize","lang":"bash","label":"yarn"},{"cmd":"pnpm add v-autosize","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue 3 framework integration.","package":"vue","optional":false}],"imports":[{"note":"This is the primary named export for local directive registration. The package is primarily ESM-first for Vue 3 projects.","wrong":"const autosize = require('v-autosize');","symbol":"autosize","correct":"import autosize from 'v-autosize';"},{"note":"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.","wrong":"import { autosizePlugin } from 'v-autosize';","symbol":"autosizePlugin","correct":"import autosizePlugin from 'v-autosize/src/plugin.js';"},{"note":"While browser-specific builds exist, importing directly from the package name allows bundlers to pick the correct entry point (ESM for modern projects).","wrong":"import autosize from 'v-autosize/dist/v-autosize.esm-browser.js';","symbol":"autosize","correct":"import autosize from 'v-autosize';"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport autosizePlugin from 'v-autosize/src/plugin.js';\n\nconst app = createApp({\n  template: `\n    <div>\n      <label for=\"my-textarea\">Resizable Textarea:</label>\n      <textarea id=\"my-textarea\" v-autosize style=\"width: 300px; padding: 8px; border: 1px solid #ccc;\" placeholder=\"Type something...\"></textarea>\n      <p>The textarea above will automatically adjust its height as you type.</p>\n    </div>\n  `,\n});\n\napp.use(autosizePlugin);\napp.mount('#app');","lang":"typescript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=2.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use `import autosizePlugin from 'v-autosize/src/plugin.js';` for global registration with `app.use()`.","message":"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.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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);`","cause":"The `v-autosize` directive has not been correctly registered with your Vue application, either locally in a component or globally.","error":"[Vue warn]: Failed to resolve directive: autosize"},{"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.","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.","error":"TypeError: Cannot read properties of null (reading 'style') at autosize."}],"ecosystem":"npm"}