How can I implement loading indicators in Vue.js?

How can I implement loading indicators in Vue.js?

You can use Vue's built-in features to create loading indicators. A common approach is to use a boolean data property to control the visibility of the loading indicator.

Can you show me a simple example?

Sure! You can create a loading indicator like this:

<template>
  <div>
    <div v-if="isLoading">Loading...</div>
    <button @click="fetchData">Fetch Data</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
    };
  },
  methods: {
    async fetchData() {
      this.isLoading = true;
      // Simulate a data fetch
      await new Promise(resolve => setTimeout(resolve, 2000));
      this.isLoading = false;
    },
  },
};
</script>

What if I want to use a spinner instead of text?

You can replace the text with a spinner component. For example, you can use a CSS spinner or a library like Font Awesome to show a loading icon.