{"id":12399,"library":"vue-autosize","title":"Vue Autosize Directive (Vue 2)","description":"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.","status":"abandoned","version":"1.0.2","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","textarea","autosize","vue","directive"],"install":[{"cmd":"npm install vue-autosize","lang":"bash","label":"npm"},{"cmd":"yarn add vue-autosize","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-autosize","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for textarea resizing logic.","package":"autosize","optional":false},{"reason":"Peer dependency for the Vue 2 framework.","package":"vue","optional":false}],"imports":[{"note":"The package exports a default plugin object for `Vue.use()`. Direct named imports are not the intended usage for the plugin itself.","wrong":"const { VueAutosize } = require('vue-autosize');","symbol":"VueAutosize","correct":"import VueAutosize from 'vue-autosize';"},{"note":"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.","wrong":"Vue.use(require('vue-autosize').default);","symbol":"Vue.use(VueAutosize)","correct":"import Vue from 'vue';\nimport VueAutosize from 'vue-autosize';\nVue.use(VueAutosize);"},{"note":"After registering the plugin with `Vue.use()`, the directive `v-autosize` becomes globally available for use on `textarea` elements.","wrong":"","symbol":"v-autosize","correct":""}],"quickstart":{"code":"import Vue from 'vue';\nimport VueAutosize from 'vue-autosize';\n\nVue.use(VueAutosize);\n\nnew Vue({\n el: '#app',\n data: {\n 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.',\n anotherMessage: 'Short message.'\n },\n template: `\n
\n

Autosizing Textareas

\n \n

Current message length: {{ message.length }}

\n
\n \n
\n `\n});","lang":"javascript","description":"Demonstrates global registration of the `v-autosize` directive and its application to `textarea` elements in a Vue 2 instance, showing automatic height adjustment."},"warnings":[{"fix":"For Vue 3 projects, consider using dedicated Vue 3 wrappers like `v-autosize` by `shrpne`, `vue-textarea-autosize`, or `useTextareaAutosize` from VueUse.","message":"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.","severity":"breaking","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"deprecated","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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`.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","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.","error":"TypeError: Cannot read properties of undefined (reading 'directive') OR [Vue warn]: Failed to resolve directive: autosize"},{"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.","cause":"The textarea might be `display: none` on mount, or its value was updated by JavaScript without `autosize.js` being notified to recalculate.","error":"Textarea not resizing initially or after programmatic content change."}],"ecosystem":"npm"}