vuetify 3 vue 3 loading button example

Vuetify 3 Vue 3 Loading Button Example

VueJS
23/12/23
Webvees

In this tutorial, we will create loading button using vuetifyjs 3 in Vue.js 3 . We will see loading button with icon, disabled state loading button, Before we begin, you need to install and configure 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 options api.

<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>
 vuetify 3 loading button

vuetify 3 loading button

2. Vuetify 3 vue 3 loading using  Composition API.

<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>
vue 3  vuetify 3 loading button

vue 3 vuetify 3 loading button

3. Vue.js 3 Vuetify 3 Loading Button with Icon and Disabled State.

<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>
vuetify 3 loading button icon disabled state

vuetify 3 loading button icon disabled state

4. Vue.js 3 Typescript Vuetify 3 Loading Button with Icon and Disabled State.

<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>