Resize Textarea

A simple resize textarea for Vue3.

Inspired from vue-textarea-autosize (Works with Vue2)

Installation

Install the package using npm

npm install resize-textarea

Documentation

  1. Create a new Vue instance
  2. Import ResizeTextarea and use it

import { createApp } from 'vue'
import ResizeTextarea from 'resize-textarea-vue3'

const app = createApp({
  /* root component options */
})
app.use(ResizeTextarea)
.mount('#app')

Available props:

Props required type default
placeholder no String Null
rows no Number 2
cols no Number 0
minHeight no Number 50 px
maxHeight (The content will be scrollable after set limit) no Number Null
modelValue no String / Number Null
autoResize (The drag handle is disabled by default.) no Booolean true

The default unit is (px)

Component simple usage example:

<template>
    <div id="wrapper">
        <resize-textarea
        :placeholder="placeholder"
        :rows="2"
        :cols="4"
        :maxHeight="150"
        v-model="textValue">
        </resize-textarea>
    </div>
    <script>
    export default {
        data() {
            return {
                placeholder: "This is a test message",
                textValue: "reSize",
            }
        },
    }
    </script>
</template>

Component usage with update:modelValue event example:

<template>
    <div id="wrapper">
        <resize-textarea
        :placeholder="placeholder"
        :modelValue="textValue"
        @update:modelValue="(value)=>useUpdatedValue(value)"
        v-model="textValue">
        </resize-textarea>
    </div>
    <script>
    export default {
        data() {
            return {
                placeholder: "This is a test message",
                textValue: "reSize",
            }
        },
        methods: {
            useUpdatedValue(value) {
                //do something 
            }
        }
    }
    </script>
</template>

Component usage example with state management:

<template>
    <div id="wrapper">
        <resize-textarea
        :placeholder="placeholder"
        v-model="textValue">
        </resize-textarea>
    </div>
    <script>
    export default {
        data() {
            return {
                placeholder: "This is a test message",
            }
        },
        computed: {
            textValue: {
                get() {
                    return this.$store.state.textValue
                },
                set(v) {
                    this.$store.commit('UPDATE', v)
                }
            }
        }
    }
    </script>
</template>

GitHub

View Github