Reset input directive for Vue.js


Directives are another cool feature of Vue.js, although seen again in Angular. Vue's core allows to create and register your own directives to achieve your goals. The v-reset-input directive can be used, you guessed it, on inputs to allow users to clear an input by pressing the "X" button. Not a very sophisticated functionality but useful nevertheless.

Check the Live Demo which is pretty Ιnformative.


Install it in your project via:


yarn add v-reset-input



$ npm install v-reset-input


import Vue from 'vue'

import ResetInput from 'v-reset-input'


Then just use it in your inputs to get the clear ability

<input v-model='write' class="reset-input" type="text" v-reset-input>

To get a similar appearance as the demo:

Overwrite the CSS class

.reset-input {
    font-size: 1.5em;
    padding: 10px 15px;
    box-shadow: none;
    border: 1px solid #157977;
    width: 100%;
    outline: none;
    background-color: #eee;

.v-reset-input {
    top: 8px;
    right: 25px;
    font-size: 1.5em;
    display: none;

.v-reset-input.v-reset-input-active {
    display: block;

And there you have it, use the Reset input directive and if you find it useful you can give it a star on GitHub.