Vuetify loading overlay
This package serves to display a load on the whole page, useful when you expect an ajax response from an API. It only works with the vuetify framework, since it uses components of it.
Install
npm -i vuetify-loading-overlayyarn add vuetify-loading-overlay
Usage
Vue
Vue;
Nuxt
for nuxt you have to create a plugin and add it to your nuxtconfig
{ ;};
Example
<template> <form @submit.prevent="submit"> <input type="text" name="email" /> <input type="password" name="password" /> <button type="submit">Login</button> </form></template> <script> export default { data() { return { } }, methods: { submit() { this.$vloading.show(); // simulate AJAX setTimeout(() => { this.$vloading.hide() },5000) }, onCancel() { console.log('User cancelled the loader.') } } }</script>
the use is simple, you just have to call the api and its methods this.$vloading.show() this.$vloading.hide()
Props
snipperProps
color: "primary"
You can check the properties of the spinner in its official documentation
overlayProps
color: "red"
You can check the properties of the overlay in its official documentation
Author
rldev25
Licence
MIT