Needle Engine plugins for Vite

Plugins include hot reload support, meta tags, defines, build pipeline, PWA, and more.

Using PWA

How to add PWA support to your vite project:

1. Install the vite pwa plugin: npm install vite-plugin-pwa --save-dev
2. Add the following to your vite.config.js: You first pass the PWAOptions to the needlePlugins function, then you pass the same PWAOptions to the VitePWA plugin. You can use also add a .webmanifest file to your web project and edit the PWA manifest settings there.

export default defineConfig(async ({ command }) => {
   // @type {import("vite-plugin-pwa").VitePWAOptions}
   const PWAOptions = {};
   ...
   return {
       plugins: [
           ...
           needlePlugins(command, needleConfig, { pwaOptions: PWAOptions }),
           VitePWA(PWAOptions),
       ],
   }
Copy

When used without arguments (e.g. in a SvelteKit defineConfig({}) plain object), the command is resolved automatically from Vite's configResolved hook.

// SvelteKit — no command needed:
export default defineConfig({ plugins: [sveltekit(), needlePlugins()] });
Copy