{"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":"/// ","symbol":"client types reference","correct":"/// "}],"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 `/// ` 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,"search_vec":"'/client':87 '6.0.0':69 '7.0.0':70 '8.0.0':72 'anim':20,61 'app':3,8,36,45,85 'app-load':44 'automat':32 'build':30,94 'bump':92 'chang':96 'configur':64 'custom':18,58 'depend':76,91 'develop':27 'dismiss':54 'e.g':97 'entri':24 'expos':48 'function':51 'hide':33 'html':23 'html/css':59 'import':42 'inject':16 'javascript':104 'load':4,9,19,46,60,86 'loadingfadeout':50 'manual':53 'mount':37 'path':65 'peer':75 'plugin':2,7,14,56,84 'point':25 'product':29 'regular':89 'replac':99 'requir':67 'ship':80 'support':57 'tool':95 'tsdown':101 'tsup':98 'type':78 'typescript':77,105 'updat':88 'use':39 'v0.4.0':103 'v0.5.4':10 'via':62,81 'virtual':41,43 'vite':1,6,13,68,83 'vite-plugin-app-load':5,82","created_at":"2026-04-27T17:05:55.380661+00:00","updated_at":"2026-04-27T17:05:55.380661+00:00","problems":[{"fix":"Add `\"vite-plugin-app-loading/client\"` to compilerOptions.types in tsconfig.json, or add `/// ` 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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/hooray/vite-plugin-app-loading","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vite-plugin-app-loading","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-18","next_check":"2026-07-26","install_tag":null}}