usalmon / resize-textarea-vue3

A simple textarea resize for Vue3.

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>