Float label pattern for Vue.js Cross-browser compatible and easy to customize with CSS
vue-float-label
Float label pattern for Vue.js. Cross-browser compatible and easy to customize with CSS.
<float-label>
<input type="text" placeholder="Label">
</float-label>
Installation
yarn / npm
Install package using yarn or npm:
$ yarn add vue-float-label
or
$ npm install --save vue-float-label
Global
Load the plugin by calling Vue.use():
import Vue from 'vue'
import VueFloatLabel from 'vue-float-label'
Vue.use(VueFloatLabel)
Now you have access in your templates to the component.
Local
You may prefer to explicitly import the plugin and use it inside your components:
<template>
<float-label>
...
</float-label>
</template>
<script>
import FloatLabel from 'vue-float-label/components/FloatLabel'
export default {
components: {
FloatLabel
}
}
</script>