Registry / web-framework / vite-plugin-splash-screen

vite-plugin-splash-screen

JSON →
library0.2.2jsnpmunverified

A Vite plugin that inlines a customizable splash screen (logo, colors, loading indicator) into the HTML output to prevent blank screens during SPA asset loading. Version 0.2.2, actively maintained, framework-agnostic, and lightweight. Differentiators: inlined at build time for instant display, framework-agnostic, full developer control via runtime hiding.

npm install vite-plugin-splash-screen
INSTALL
IMPORT
SIG · VITE-PLUGIN-SPLASH
V
vite-plugin-splash-screen
web-frameworkjavascriptv0.2.2
Install
Import
Disk
Pass rate
0/ 6
Env Coverage0 / 6
glibc
1822
musl
1822
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18223 runs
build_error
glibc
node 18223 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

splashScreen
import { splashScreen } from 'vite-plugin-splash-screen'
const splashScreen = require('vite-plugin-splash-screen')
Plugin is ESM-only; require() will fail.
hideSplashScreen
import { hideSplashScreen } from 'vite-plugin-splash-screen/runtime'
import { hideSplashScreen } from 'vite-plugin-splash-screen'
Runtime export is from a separate subpath to avoid bundling runtime code with the plugin config.

Shows how to configure the plugin with all options and hide the splash screen in a React app.

// vite.config.js import { defineConfig } from 'vite'; import { splashScreen } from 'vite-plugin-splash-screen'; export default defineConfig({ plugins: [ splashScreen({ logoSrc: 'logo.svg', // place logo.svg in public/ backgroundColor: '#ffffff', title: 'My App', minDurationMs: 500, style: 'line', // or 'default', 'spinner' primaryColor: '#000000', }), ], }); // In your app (React example): // App.tsx import { useEffect } from 'react'; import { hideSplashScreen } from 'vite-plugin-splash-screen/runtime'; function App() { useEffect(() => { hideSplashScreen(); }, []); return <div>App loaded</div>; } export default App;
Debug
Known issues
breakingOnly SVG logos are supported. Non-SVG will cause build errors or broken splash screen.
fix
Use an SVG file for the logo, and ensure it is in the publicDir.
affects: >=0.0.0
gotchaThe runtime import path is 'vite-plugin-splash-screen/runtime', not the main package.
fix
Use 'import { hideSplashScreen } from 'vite-plugin-splash-screen/runtime'.'
affects: >=0.0.0
gotchaThe plugin is ESM-only. Using require() will fail with 'ERR_REQUIRE_ESM'.
fix
Use import syntax, or if using CommonJS, use dynamic import().
affects: >=0.0.0
Errors
Common errors & fixes
Error: The 'logoSrc' option is required.
Missing required 'logoSrc' option when calling splashScreen().
fix
Add logoSrc: 'path/to/logo.svg' to the plugin options.
TypeError: Cannot read properties of undefined (reading 'src')
Trying to import { hideSplashScreen } from the main package instead of runtime subpath.
fix
Import from 'vite-plugin-splash-screen/runtime'.
Upgrade
Version history
0.2.2latest on npm
Audit
Dependencies

No dependency data recorded yet.

Agent activity
9 hits · last 30 days
node
6
Bingbot
1
OpenAI (training)
1
Resources
vite-plugin-splash-screen — npm install vite-plugin-splash-screen · libregistry