{"id":22579,"library":"vite-plugin-app-loading","title":"Vite Plugin App Loading","description":"vite-plugin-app-loading (v0.5.4) is a Vite plugin that injects a custom loading animation into the HTML entry point during development and production builds, which automatically hides when the app mounts. It uses a virtual import `virtual:app-loading` to expose a `loadingFadeOut()` function for manual dismissal. The plugin supports custom HTML/CSS loading animations via a configurable path. It requires Vite ^6.0.0, ^7.0.0, or ^8.0.0 as a peer dependency. TypeScript types are shipped via `vite-plugin-app-loading/client`. Updated regularly with dependency bumps and build tool changes (e.g., tsup replaced by tsdown in v0.4.0).","status":"active","version":"0.5.4","language":"javascript","source_language":"en","source_url":"https://github.com/hooray/vite-plugin-app-loading","tags":["javascript","typescript"],"install":[{"cmd":"npm install vite-plugin-app-loading","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-app-loading","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-app-loading","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency – requires Vite ^6.0.0, ^7.0.0, or ^8.0.0","package":"vite","optional":false}],"imports":[{"note":"Uses default export – named import will fail.","wrong":"import { AppLoading } from 'vite-plugin-app-loading'","symbol":"AppLoading (default)","correct":"import AppLoading from 'vite-plugin-app-loading'"},{"note":"Virtual module path is `virtual:app-loading`, not the package name.","wrong":"import { loadingFadeOut } from 'vite-plugin-app-loading'","symbol":"loadingFadeOut (virtual)","correct":"import { loadingFadeOut } from 'virtual:app-loading'"},{"note":"Use `/client` path to access virtual module types.","wrong":"/// <reference types=\"vite-plugin-app-loading\" />","symbol":"client types reference","correct":"/// <reference types=\"vite-plugin-app-loading/client\" />"}],"quickstart":{"code":"// vite.config.ts\nimport AppLoading from 'vite-plugin-app-loading'\nimport { defineConfig } from 'vite'\n\nexport default defineConfig({\n  plugins: [\n    AppLoading(), // uses built-in loading.html\n  ],\n})","lang":"typescript","description":"Shows minimal setup: import the plugin and add it to the Vite config. Also demonstrates calling loadingFadeOut from virtual module."},"warnings":[{"fix":"Uninstall old package: `npm rm vite-plugin-vue-app-loading` and install new: `npm i vite-plugin-app-loading -D`. Update import path.","message":"Package renamed from `vite-plugin-vue-app-loading` to `vite-plugin-app-loading` in v0.3.0.","severity":"breaking","affected_versions":"<0.3.0"},{"fix":"Use `import { loadingFadeOut } from 'virtual:app-loading'` exactly.","message":"Virtual import must be `virtual:app-loading`, not a direct file path.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Upgrade to Vite 6, 7, or 8. For earlier Vite versions, pin to vite-plugin-app-loading@0.4.x.","message":"Vite peer dependency constraint: v0.5.x requires Vite ^6.0.0, ^7.0.0, or ^8.0.0.","severity":"breaking","affected_versions":">=0.5.0"},{"fix":"Pass relative path from project root (e.g., `AppLoading('src/loading.html')`) or resolve absolutely using `path.resolve`.","message":"Custom loading.html path is resolved relative to project root, not an absolute path.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Add `/// <reference types=\"vite-plugin-app-loading/client\" />` in a .d.ts file or add `\"vite-plugin-app-loading/client\"` to compilerOptions.types in tsconfig.json.","message":"TypeScript virtual module typing requires explicit reference via `vite-plugin-app-loading/client`.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Add `\"vite-plugin-app-loading/client\"` to compilerOptions.types in tsconfig.json, or add `/// <reference types=\"vite-plugin-app-loading/client\" />` in a .d.ts file.","cause":"Missing TypeScript reference for the virtual module.","error":"Cannot find module 'virtual:app-loading' or its corresponding type declarations."},{"fix":"Use `import AppLoading from 'vite-plugin-app-loading'` (no braces).","cause":"Importing the plugin as a named import instead of default.","error":"TypeError: AppLoading is not a function"},{"fix":"Run `npm i vite-plugin-app-loading -D` and ensure a compatible Vite version (6, 7, or 8) is installed.","cause":"Package not installed or missing peer dependency Vite >=6.","error":"Module not found: Error: Can't resolve 'vite-plugin-app-loading'"},{"fix":"Verify the path (e.g., `AppLoading('src/loading.html')`) and ensure the file exists at that relative path from project root.","cause":"Custom loading.html path is incorrect or file doesn't exist at the given relative path.","error":"TypeError: failed to fetch (loading HTML not found)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}