{"id":12602,"library":"vue-textarea-autosize","title":"Vue Textarea Autosize","description":"vue-textarea-autosize is a lightweight Vue.js component that provides a `<textarea>` element with automatically adjustable height based on its content. It supports standard `v-model` binding, allowing for two-way data synchronization, and includes props for setting `minHeight` and `maxHeight` to constrain the textarea's dimensions. The component differentiates itself by explicitly stating it has no external dependencies or wrappers, aiming for a simple and performant solution. Currently at version 1.1.1, the package appears to be primarily targeted at Vue 2 applications, as indicated by its documentation and a Vue 2 badge. With its last update approximately four years ago and Vue 2 having reached end-of-life, the project is likely in an abandoned state, meaning new feature development or compatibility updates for Vue 3 are not expected.","status":"abandoned","version":"1.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/devstark-com/vue-textarea-autosize","tags":["javascript","vue","vuejs","plugin","textarea","size","auto","autosize","height"],"install":[{"cmd":"npm install vue-textarea-autosize","lang":"bash","label":"npm"},{"cmd":"yarn add vue-textarea-autosize","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-textarea-autosize","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The component is exported as a default for global Vue plugin registration. Do not use named imports.","wrong":"import { TextareaAutosize } from 'vue-textarea-autosize';","symbol":"TextareaAutosize","correct":"import TextareaAutosize from 'vue-textarea-autosize';\nimport Vue from 'vue';\n\nVue.use(TextareaAutosize);"},{"note":"For local component registration within a Vue component, use the default import.","wrong":"const TextareaAutosize = require('vue-textarea-autosize');","symbol":"TextareaAutosize (local registration)","correct":"import TextareaAutosize from 'vue-textarea-autosize';\n\nexport default {\n  components: { TextareaAutosize },\n  // ...\n}"},{"note":"To access native DOM methods like `focus()` or `blur()` on the textarea, you must access the underlying DOM element via `$el` on the component's `$ref`.","wrong":"this.$refs.myTextarea.focus();","symbol":"$el access on ref","correct":"this.$refs.myTextarea.$el.focus();"}],"quickstart":{"code":"import Vue from 'vue';\nimport TextareaAutosize from 'vue-textarea-autosize';\n\nVue.use(TextareaAutosize);\n\nnew Vue({\n  el: '#app',\n  data() {\n    return {\n      value: 'Initial text for the autosizing textarea. Type something here to see it expand automatically.',\n    };\n  },\n  methods: {\n    onBlurTextarea() {\n      console.log('Textarea blurred (native event)');\n    },\n    focusTextarea() {\n      if (this.$refs.myTextarea && this.$refs.myTextarea.$el) {\n        this.$refs.myTextarea.$el.focus();\n      }\n    },\n    blurTextarea() {\n      if (this.$refs.myTextarea && this.$refs.myTextarea.$el) {\n        this.$refs.myTextarea.$el.blur();\n      }\n    },\n    selectTextarea() {\n      if (this.$refs.myTextarea && this.$refs.myTextarea.$el) {\n        this.$refs.myTextarea.$el.select();\n      }\n    },\n  },\n  template: `\n    <div id=\"app\">\n      <h2>Vue Textarea Autosize Example</h2>\n      <textarea-autosize\n        placeholder=\"Type something here...\"\n        ref=\"myTextarea\"\n        v-model=\"value\"\n        :min-height=\"50\"\n        :max-height=\"250\"\n        style=\"width: 100%; border: 1px solid #ccc; padding: 8px; font-size: 14px; box-sizing: border-box;\" \n        @blur.native=\"onBlurTextarea\"\n      />\n      <p>Current value: {{ value }}</p>\n      <button @click=\"focusTextarea\">Focus Textarea</button>\n      <button @click=\"blurTextarea\">Blur Textarea</button>\n      <button @click=\"selectTextarea\">Select Content</button>\n    </div>\n  `,\n});","lang":"javascript","description":"This quickstart demonstrates how to globally register and use the `textarea-autosize` component with `v-model`, `min-height`, `max-height`, and native event handling in a Vue 2 application. It also shows how to programmatically interact with the underlying `<textarea>` element using refs."},"warnings":[{"fix":"For Vue 3 projects, seek a dedicated autosizing textarea component built for Vue 3 or implement the functionality manually.","message":"This package is designed for Vue 2.x and is not directly compatible with Vue 3. The Composition API, Teleports, and other Vue 3 features are not supported. Using it in a Vue 3 project will likely lead to errors due to API changes.","severity":"breaking","affected_versions":"All versions"},{"fix":"Always append `.native` to event listeners when you intend to capture events directly from the root DOM element of the component, e.g., `@event.native=\"handler\"`.","message":"To listen to native DOM events (like `focus`, `blur`, `click`) on the underlying `<textarea>` element, you must use the `.native` modifier (e.g., `@blur.native`). Direct event listeners on the component will not fire for native DOM events.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Apply desired CSS styles directly to the `<textarea-autosize>` component, as it renders a plain `<textarea>` element.","message":"The component provides no default CSS styling. You are responsible for styling the textarea element completely. This includes basic styles like `border`, `padding`, `font-size`, `resize`, and `overflow`.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Use the `important` prop sparingly and only when necessary to override conflicting styles. Prefer standard CSS specificity rules for styling when possible.","message":"The `important` prop allows forcing `!important` for certain CSS properties (`resize`, `overflow`, `height`). While useful in specific CSS override scenarios (e.g., when using reset stylesheets), overuse can lead to CSS specificity issues and make debugging styles difficult.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you have `import TextareaAutosize from 'vue-textarea-autosize'; Vue.use(TextareaAutosize);` in your main JavaScript file, or `components: { TextareaAutosize }` in your component options.","cause":"The `textarea-autosize` component was not registered globally via `Vue.use()` or locally within the `components` option of a Vue component.","error":"Unknown custom element: <textarea-autosize> - did you register the component correctly?"},{"fix":"Ensure the component with `ref=\"myTextarea\"` is rendered and mounted. Access `$el` in lifecycle hooks like `mounted()` or after a `nextTick()` if its presence depends on conditional rendering.","cause":"Attempting to access `$refs.myTextarea.$el` before the component instance or its `$el` (the underlying DOM element) has been mounted or is available in the DOM. This can happen if the ref is on a non-existent element or accessed too early in the lifecycle.","error":"Cannot read property '$el' of undefined"},{"fix":"Ensure you are using `v-model=\"yourDataProperty\"` on the `<textarea-autosize>` component and that `yourDataProperty` is part of your component's `data` object and thus reactive.","cause":"This is often caused by trying to modify a prop directly (e.g., `value` prop) instead of using `v-model`, or by issues with mutable data within Vue's reactivity system when dealing with complex objects passed via `v-model`.","error":"v-model is not updating the textarea value correctly."}],"ecosystem":"npm"}