useLoading

useLoading returns the an object containing the function for showing loadings.

// return of useLoading
export interface LoadingInject {
  loading: (options?: LoadingOptions) => Loading
  close: () => void // for closing fullscreen loading/loadings
}

export type LoadingOptions = {
  text?: VNode | string;
  color?: string;
  background?: string;
  scale?: string | number;
  target?: HTMLElement | string;
  spinner?: VNode;
  onlySingleLoading?: boolean;
  containerClass?: string;
  containerStyle?: CSSProperties;
};

// returns
export interface Loading {
  close: () => void;
}
Loading Target

Styling

You can use color and/or background and/or scale to customize loading colors.

Target

target?: string | HTMLElement Should either be a string for querySelector or a HTML element like template ref.

The target should have relative positioning. position: relative
Loading Target

Closing

notification returns an object containing close function you can use to close the loading.

const { loading } = useLoading()
const load = loading({
  text: 'hey'
})
// after some time
load.close()

Closing fullscreen loading

As an addition to closing from instance you can also close fullscreen loading/loadings using close function returned from useLoading.

const { close } = useLoading()
close() // will close full screen loading

Multiple loadings on same element

By default only single loading is allowed on an element ( the last one ), if you want to create multiple loadings on top of each other set onlySingleLoading as false when calling a loading.

Using outside setup

Since useLoading is using inject inside it, it can't be used outside of vue setup context. To solve this you can import the factory function and creating your own useLoading composable and freely use it anywhere in your app for example Pinia/Vuex.

The loadingFactory accepts app instance as it's first parameter returns the same value as useLoading.

composables/useLoading.ts
import { loadingFactory } from "sevue";
import VueInstance from '@/main' // or wherever your app is being exported

export default () => {
  return loadingFactory(VueInstance)
}

Or for Nuxt JS:

composables/useLoading.ts
import { loadingFactory, type LoadingInject } from "sevue";

export default () => {
  const nuxtApp = useNuxtApp()
  return loadingFactory(nuxtApp.vueApp) as LoadingInject
}
Table of Contents