# Vite Plugin (@ovineko/spa-guard-vite)
> Vite plugin for spa-guard — injects the runtime inline script and loading spinner into your SPA's HTML at build time.
# @ovineko/spa-guard-vite
Vite plugin for spa-guard — injects the runtime inline script and loading spinner into your SPA's HTML at build time.
## Install
```bash
pnpm add -D @ovineko/spa-guard-vite
pnpm add @ovineko/spa-guard
```
```bash
npm install --save-dev @ovineko/spa-guard-vite
npm install @ovineko/spa-guard
```
```bash
yarn add -D @ovineko/spa-guard-vite
yarn add @ovineko/spa-guard
```
```bash
bun add -d @ovineko/spa-guard-vite
bun add @ovineko/spa-guard
```
```bash
deno add npm:@ovineko/spa-guard-vite npm:@ovineko/spa-guard
```
## Usage
Add the plugin to your `vite.config.ts`:
```ts
export default defineConfig({
plugins: [spaGuardVitePlugin()],
});
```
With options:
```ts
export default defineConfig({
plugins: [
spaGuardVitePlugin({
version: "1.0.0",
reloadDelays: [1000, 3000, 10000],
html: { spinner: { background: "#f5f5f5" } },
}),
],
});
```
Disable the spinner:
```ts
spaGuardVitePlugin({ html: { spinner: { disabled: true } } });
```
Enable trace mode (logs extra debug info at runtime):
```ts
spaGuardVitePlugin({ trace: true });
```
Use external script mode to write a content-hashed `.js` file instead of inlining the script:
```ts
spaGuardVitePlugin({
mode: "external",
externalScriptDir: "dist/assets",
publicPath: "/assets",
});
// Injects