@afe1/vite-plugin-app-loading

Inject a startup loading overlay into Vite HTML, then remove it manually when your app is ready.

Install

pnpm add -D @afe1/vite-plugin-app-loading

Usage

// vite.config.ts
import { defineConfig } from 'vite';
import { viteInjectAppLoadingPlugin } from '@afe1/vite-plugin-app-loading';

export default defineConfig({
  plugins: [
    viteInjectAppLoadingPlugin()
  ]
});

Remove the loading overlay after your framework has mounted:

// src/main.ts
import { removeAppLoading } from 'virtual:app-loading';

// Mount React, Vue, Svelte, or any other app first.
removeAppLoading();

If TypeScript cannot resolve the virtual module, add this once to your Vite env declarations:

/// <reference types="@afe1/vite-plugin-app-loading" />

Options

function viteInjectAppLoadingPlugin(): Plugin;

Thanks

Thanks to vue-vben-admin for the inspiration.