Vue 2 textarea autogrow

Very simple Vue directive for handling textarea autogrow (automatically adjustable height).

There is no need any custom component registration or CSS out-of-the-box.

If you want to set a min-height to textarea, you should use the native rows textarea attribute.

It works with Nuxt.js nicely too. Please run only on client-side.

Installation

npm install vue-textarea-grow

Examples

Local registration

import { grow } from 'vue-textarea-grow';

export default {

  directives: {
    grow,
  },

};

Global registration

import { grow } from 'vue-textarea-grow';

Vue.directive(
  'grow',
  grow,
);

Template

<textarea
  v-grow
></textarea>

Conditional usage

When you need to use this directive conditionally, you can do this.

So it is not necessary to add extra textarea element:

<template>
  <div>
    <textarea
      v-if="grow"
    ></textarea>

    <textarea
      v-else
    ></textarea>

    <button
      @click="grow = false"
    ></button>
</div>
</template>

<script>
export default {

  data() {
    return {
      grow: true,
    };
  },

};
</script>

Instead:

<template>
  <div>
    <textarea
      v-grow="grow"
    ></textarea>

    <button
      @click="grow = false"
    ></button>
  </div>
</template>

<script>
export default {

  data() {
    return {
      grow: true,
    };
  },

};
</script>