Vue Loading Overlay

A Vue 3 plugin for displaying a full-page loading overlay with a spinner.

Installation

Install via npm:

npm install jv3-loader
## Install Plugin to vue
Copy

// main.ts
import JV3Loader from "jv3-loader";

const app = createApp(App);

app.use(JV3Loader);

app.mount("#app");
Copy

How to use

// Component.vue
<script lang="ts" setup>
...
import { useLoader } from "jv3-loader";
...
...
...
const loader = useLoader();
...
...
...

const task1 = _.debounce(async (date) => {
  await loader.add(async () => {
    await axios
      .post(`...`, {})
      .then((res) => {
        ...
      })
      .catch((e) => {
        alert(e);
      });
  });
}, 300);

const task1 = _.debounce(async () => {
  await loader?.add(async () => {
    await axios
      .post(`...`, {})
      .then((res) => {
        ...
      })
      .catch((e) => {
        alert(e);
      });
  });
}, 300);

async function task2(s = 300) {
  await new Promise((resolve) => setTimeout(resolve, 500));
}

// call function add task
task1()
loader?.add(() => task2(3000));
loader?.add(() => task2(2000));

Copy