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
Create a new Vue instance
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>