{"id":22843,"library":"vite-plugin-splash-screen","title":"vite-plugin-splash-screen","description":"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.","status":"active","version":"0.2.2","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","vite","vite-plugin","splash-screen","typescript"],"install":[{"cmd":"npm install vite-plugin-splash-screen","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-splash-screen","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-splash-screen","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Plugin is ESM-only; require() will fail.","wrong":"const splashScreen = require('vite-plugin-splash-screen')","symbol":"splashScreen","correct":"import { splashScreen } from 'vite-plugin-splash-screen'"},{"note":"Runtime export is from a separate subpath to avoid bundling runtime code with the plugin config.","wrong":"import { hideSplashScreen } from 'vite-plugin-splash-screen'","symbol":"hideSplashScreen","correct":"import { hideSplashScreen } from 'vite-plugin-splash-screen/runtime'"}],"quickstart":{"code":"// vite.config.js\nimport { defineConfig } from 'vite';\nimport { splashScreen } from 'vite-plugin-splash-screen';\n\nexport default defineConfig({\n  plugins: [\n    splashScreen({\n      logoSrc: 'logo.svg', // place logo.svg in public/\n      backgroundColor: '#ffffff',\n      title: 'My App',\n      minDurationMs: 500,\n      style: 'line', // or 'default', 'spinner'\n      primaryColor: '#000000',\n    }),\n  ],\n});\n\n// In your app (React example):\n// App.tsx\nimport { useEffect } from 'react';\nimport { hideSplashScreen } from 'vite-plugin-splash-screen/runtime';\n\nfunction App() {\n  useEffect(() => {\n    hideSplashScreen();\n  }, []);\n  return <div>App loaded</div>;\n}\n\nexport default App;","lang":"typescript","description":"Shows how to configure the plugin with all options and hide the splash screen in a React app."},"warnings":[{"fix":"Use an SVG file for the logo, and ensure it is in the publicDir.","message":"Only SVG logos are supported. Non-SVG will cause build errors or broken splash screen.","severity":"breaking","affected_versions":">=0.0.0"},{"fix":"Use 'import { hideSplashScreen } from 'vite-plugin-splash-screen/runtime'.'","message":"The runtime import path is 'vite-plugin-splash-screen/runtime', not the main package.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use import syntax, or if using CommonJS, use dynamic import().","message":"The plugin is ESM-only. Using require() will fail with 'ERR_REQUIRE_ESM'.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Add logoSrc: 'path/to/logo.svg' to the plugin options.","cause":"Missing required 'logoSrc' option when calling splashScreen().","error":"Error: The 'logoSrc' option is required."},{"fix":"Import from 'vite-plugin-splash-screen/runtime'.","cause":"Trying to import { hideSplashScreen } from the main package instead of runtime subpath.","error":"TypeError: Cannot read properties of undefined (reading 'src')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}