Vite plugin for transforming webmanifest
npm install @budarin/vite-plugin-webmanifestA Vite plugin that processes Web App Manifest files, automatically emitting all referenced assets (icons, screenshots, shortcut icons) with content hashes and updating paths in the manifest.
- 🚀 High-performance parallel processing of manifest assets
- 📦 Automatic hashing of icons, screenshots, and shortcut icons
- 🔄 Updates manifest paths and adjusts scope/start_url based on Vite's base
- 📍 Always emits manifest to the root of the build output
- 🔌 Zero configuration required
``shellnpm
npm i -D @budarin/vite-plugin-webmanifest
Usage
Add the plugin to your
vite.config.ts:`ts
import { defineConfig } from 'vite';
import { webmanifestPlugin } from '@budarin/vite-plugin-webmanifest';export default defineConfig({
plugins: [webmanifestPlugin()],
});
`Link your manifest in
index.html:`html
`Configuration
The plugin works out of the box with zero configuration required. The manifest file is always emitted to the root of the build output directory.
$3
The plugin automatically:
- Discovers the manifest file from your
index.html
- Processes all referenced assets in parallel
- Updates paths with content hashes for optimal caching
- Always places the manifest file in the root of the build output
- Adjusts scope and start_url based on Vite's base` config