Vite Plugin Setup

Vite Plugin Setup

The Capyseo Vite plugin provides build-time SEO analysis for SvelteKit projects.

Installation

npm install -D @capyseo/adapter-sveltekit

Basic Setup

Add to vite.config.ts:

import { sveltekit } from '@sveltejs/kit/vite'; import { capyseo } from '@capyseo/adapter-sveltekit/vite'; import { defineConfig } from 'vite'; export default defineConfig({ plugins: [ sveltekit(), capyseo(), ], });

Configuration

capyseo({ // Enable/disable (default: true in dev, false in build) enabled: true, // Minimum score for build (fails if below) minScore: 75, // Fail build on SEO errors failOnError: true, // Paths to exclude exclude: ['/admin/*', '/api/*'], // Gemini API key for AI suggestions geminiApiKey: process.env.GEMINI_API_KEY, });

Options

Option Type Default Description
enabled boolean true in dev Toggle analysis
minScore number 0 Min score for build
failOnError boolean false Fail on SEO errors
exclude string[] - Glob patterns to skip
geminiApiKey string env var AI API key

Development Mode

In development, the plugin:

  1. Intercepts HTML responses via middleware
  2. Analyzes asynchronously (non-blocking)
  3. Logs issues to console
  4. Never fails dev server
npm run dev # Console shows SEO analysis for each page

Build Mode

During npm run build:

  1. Analyzes all pages via transformIndexHtml
  2. Checks minimum score if minScore set
  3. Checks for errors if failOnError: true
  4. Fails build if criteria not met
npm run build # Fails if score < minScore or errors exist

Examples

Minimal (Dev Only)

capyseo() // Analyzes in dev, disabled in build

Strict Build Enforcement

capyseo({ minScore: 80, failOnError: true, }) // Build fails if score < 80 or errors exist

With AI Suggestions

capyseo({ geminiApiKey: process.env.GEMINI_API_KEY, }) // AI-generated meta descriptions and alt text

Exclude Paths

capyseo({ exclude: [ '/admin/*', // Admin routes '/api/*', // API routes '/auth/*', // Auth routes '/__data.json', // SvelteKit data ], })

Path Matching

Uses picomatch for glob patterns:

exclude: [ '/admin/*', // /admin/users, /admin/settings '/api/**', // /api/v1/users/123 '**/draft/*', // Any draft path '/preview?', // /preview, /preview1 ]

Console Output

[capyseo] /about - Score: 85/100 x [meta-description] Missing meta description Add <meta name="description" content="..."> ! [heading-hierarchy] Skipped heading level Use sequential heading levels i [open-graph] Missing og:image Add <meta property="og:image" content="...">

CI Integration

# GitHub Actions - name: Build run: npm run build env: GEMINI_API_KEY: ${{ secrets.GEMINI_API_KEY }}

If minScore or failOnError is set, the build step will fail on SEO issues.

Combining with CLI

Use the plugin for development, CLI for detailed reports:

{ "scripts": { "dev": "vite dev", "build": "vite build", "seo:report": "capyseo analyze build --format html -o seo-report.html" } }

Troubleshooting

Plugin Not Running

Check order in vite.config.ts:

plugins: [ sveltekit(), // First capyseo(), // After SvelteKit ]

No Analysis in Build

Ensure enabled is not false:

capyseo({ enabled: true, // Explicit enable for build })

Too Many Warnings

Exclude noisy paths:

capyseo({ exclude: ['/api/*', '/__data.json'], })