In this tutorial, we’ll create loading buttons using Vuetify.js 3 in Vue.js 3. We’ll cover loading buttons with icons and disabled state loading buttons. Before we begin, make sure you’ve installed and configured Vuetify 3 in Vue 3.
How to Install Vuetify 3 in Vue 3
Vuetify 3 Vue 3 Loading Button Example
1. Vuetify 3 Vue 3 basic loading using the options API.
Vue
<template>
<v-app>
<v-container>
<v-btn :loading="loading" @click="toggleLoading">
Loading Button
</v-btn>
</v-container>
</v-app>
</template>
<script>
export default {
data() {
return {
loading: false,
};
},
methods: {
toggleLoading() {
this.loading = true;
setTimeout(() => {
this.loading = false;
}, 2000);
},
},
};
</script>
2. Vuetify 3 Vue 3 loading using the Composition API.
Vue
<script setup>
import { ref } from 'vue';
const loading = ref(false);
const toggleLoading = () => {
loading.value = true;
setTimeout(() => {
loading.value = false;
}, 2000);
};
</script>
<template>
<v-app>
<v-container>
<v-btn :loading="loading" @click="toggleLoading">
Loading Button
</v-btn>
</v-container>
</v-app>
</template>
3. Vue.js 3 Vuetify 3 loading button with icon and disabled state.
Vue
<script setup>
import { ref } from 'vue';
const loading = ref(false);
const toggleLoading = () => {
loading.value = true;
setTimeout(() => {
loading.value = false;
}, 3000);
};
</script>
<template>
<v-app>
<v-container>
<v-btn :loading="loading" :disabled="loading" @click="toggleLoading" icon>
<v-icon left>mdi-cloud-upload</v-icon>
</v-btn>
</v-container>
</v-app>
</template>
4. Vue.js 3 TypeScript Vuetify 3 loading button with icon and disabled state.
Vue
<script setup lang="ts">
import { ref, Ref } from 'vue';
const loading: Ref<boolean> = ref(false);
const toggleLoading = () => {
loading.value = true;
setTimeout(() => {
loading.value = false;
}, 3000);
};
</script>
<template>
<v-app>
<v-container>
<v-btn :loading="loading" :disabled="loading" @click="toggleLoading" icon>
<v-icon left>mdi-cloud-upload</v-icon>
</v-btn>
</v-container>
</v-app>
</template>