@koleszar.norbert/vue3-axios-indicator

A minimal pulsing loading indicator for Vue 3 that automatically reflects in-flight axios requests via an interceptor.

Live demo: vue3.laryon.hu/vue3-axios-indicator

Install

npm install @koleszar.norbert/vue3-axios-indicator

Peer dependencies: vue ^3 and axios ^1.

Usage

Set up the interceptor once (e.g. in main.js) on the axios instance you use throughout the app:

import axios from 'axios';
import { setupAxiosLoadingInterceptor } from '@koleszar.norbert/vue3-axios-indicator';

setupAxiosLoadingInterceptor(axios);

Then drop the component anywhere — it shows itself automatically while any request is pending and hides when all have resolved:

<script setup>
import { AxiosIndicator } from '@koleszar.norbert/vue3-axios-indicator';
import '@koleszar.norbert/vue3-axios-indicator/style.css';
</script>

<template>
  <AxiosIndicator />
  <AxiosIndicator color="#ff4081" size="14px" />
</template>

If you use a custom axios instance, pass that one instead:

const api = axios.create({ baseURL: '/api' });
setupAxiosLoadingInterceptor(api);

Props

| Name | Type | Default | Description | | ------- | ------- | ---------- | -------------------------------------------------- | | color | String | 'yellow' | Any valid CSS color. | | size | String | '10px' | Any valid CSS length (width/height). | | blink | Boolean | true | Opacity-pulse overlay. Combines with spinner for a rotating + pulsing look. | | variant | String | 'pulse' | 'pulse' (filled dot), 'spinner' (always-rotating arc), or 'glow' (dot with a pulsing same-color halo). |

Visibility is driven entirely by the shared request counter — there is no active prop. The component's root is a <span>, so class and style are forwarded; use them to position or space the indicator.

Advanced

If you need to read the loading state yourself (e.g. to disable a button or show the number of in-flight requests):

<script setup>
import { isLoading, pendingCount } from '@koleszar.norbert/vue3-axios-indicator';
</script>

<template>
  <p>In-flight requests: {{ pendingCount }}</p>
  <button :disabled="isLoading">Submit</button>
</template>

• isLoading — ComputedRef<boolean>, true while any request is pending.
• pendingCount — Ref<number>, the raw in-flight request count. In plain JavaScript, read it via pendingCount.value; in templates Vue unwraps it automatically.

License

MIT