Registry / web-framework / vue-textarea-autosize

vue-textarea-autosize

library1.1.1jsnpmunverified

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.

web-framework

npm install vue-textarea-autosize

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-TEXTAREA-AUTOS

vue-textarea-autosize

web-frameworkjavascriptv1.1.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.

TextareaAutosize

✓ import TextareaAutosize from 'vue-textarea-autosize'; import Vue from 'vue'; Vue.use(TextareaAutosize);

✗ import { TextareaAutosize } from 'vue-textarea-autosize';

The component is exported as a default for global Vue plugin registration. Do not use named imports.

TextareaAutosize (local registration)

✓ import TextareaAutosize from 'vue-textarea-autosize'; export default { components: { TextareaAutosize }, // ... }

✗ const TextareaAutosize = require('vue-textarea-autosize');

For local component registration within a Vue component, use the default import.

$el access on ref

✓ this.$refs.myTextarea.$el.focus();

✗ this.$refs.myTextarea.focus();

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

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.

import Vue from 'vue'; import TextareaAutosize from 'vue-textarea-autosize'; Vue.use(TextareaAutosize); new Vue({ el: '#app', data() { return { value: 'Initial text for the autosizing textarea. Type something here to see it expand automatically.', }; }, methods: { onBlurTextarea() { console.log('Textarea blurred (native event)'); }, focusTextarea() { if (this.$refs.myTextarea && this.$refs.myTextarea.$el) { this.$refs.myTextarea.$el.focus(); } }, blurTextarea() { if (this.$refs.myTextarea && this.$refs.myTextarea.$el) { this.$refs.myTextarea.$el.blur(); } }, selectTextarea() { if (this.$refs.myTextarea && this.$refs.myTextarea.$el) { this.$refs.myTextarea.$el.select(); } }, }, template: ` <div id="app"> <h2>Vue Textarea Autosize Example</h2> <textarea-autosize placeholder="Type something here..." ref="myTextarea" v-model="value" :min-height="50" :max-height="250" style="width: 100%; border: 1px solid #ccc; padding: 8px; font-size: 14px; box-sizing: border-box;" @blur.native="onBlurTextarea" /> <p>Current value: {{ value }}</p> <button @click="focusTextarea">Focus Textarea</button> <button @click="blurTextarea">Blur Textarea</button> <button @click="selectTextarea">Select Content</button> </div> `, });

Debug

Known issues

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

fix

For Vue 3 projects, seek a dedicated autosizing textarea component built for Vue 3 or implement the functionality manually.

affects: All versions

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

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"`.

affects: All versions

gotchaThe 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`.

fix

Apply desired CSS styles directly to the `<textarea-autosize>` component, as it renders a plain `<textarea>` element.

affects: All versions

gotchaThe `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.

fix

Use the `important` prop sparingly and only when necessary to override conflicting styles. Prefer standard CSS specificity rules for styling when possible.

affects: All versions

Errors

Common errors & fixes

Unknown custom element: <textarea-autosize> - did you register the component correctly?

The `textarea-autosize` component was not registered globally via `Vue.use()` or locally within the `components` option of a Vue component.

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.

Cannot read property '$el' of undefined

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.

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.

v-model is not updating the textarea value correctly.

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

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.

Upgrade

Version history

1.1.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/devstark-com/vue-textarea-autosize ↗

packagehttps://www.npmjs.com/package/vue-textarea-autosize ↗