useTextareaAutosize
Automatically update the height of a textarea depending on the content.
Package: @vueuse/core
Category: Browser
Usage
<script setup lang="ts">
import { useTextareaAutosize } from '@vueuse/core'
const { textarea, input } = useTextareaAutosize()
</script>
<template>
<textarea
ref="textarea"
v-model="input"
class="resize-none"
placeholder="What's on your mind?"
/>
</template>Options
| Option | Type | Default | Description |
|---|---|---|---|
| element | MaybeRef<HTMLTextAreaElement | undefined | null> |
- | |
| input | MaybeRef<string> |
- | |
| maxHeight | number |
- | |
| watch | WatchSource | MultiWatchSources |
- | |
| onResize | () => void |
- | |
| styleTarget | MaybeRef<HTMLElement | undefined> |
- | |
| styleProp | 'height' | 'minHeight' |
- |
Returns
| Name | Type |
|---|---|
| textarea | toRef |
| input | toRef |
| triggerResize | Ref |