Reset input directive for Vue.js

v-reset-input

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.

Example

Install it in your project via:

Yarn

yarn add v-reset-input

or

NPM

$ npm install v-reset-input

Usage

import Vue from 'vue'

import ResetInput from 'v-reset-input'

Vue.use(ResetInput)

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

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

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.