> ## Documentation Index
> Fetch the complete documentation index at: https://docs.go-mizu.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Framework Adapters

> Framework-specific adapters with optimized defaults.

Framework adapters provide framework-specific defaults and optimizations for common frontend frameworks.

## Overview

Adapters are convenience wrappers that apply framework-specific best practices:

```go theme={null}
import "github.com/go-mizu/mizu/frontend/adapters"

// Instead of manual configuration
app.Use(adapters.React(frontend.Options{
    Root: "./dist",
}))
```

## Available Adapters

### React

```go theme={null}
func React(opts frontend.Options) mizu.Middleware
```

Optimized for React applications with Vite.

**Defaults:**

* Manifest: `.vite/manifest.json`
* Output directory: `dist`

**Example:**

```go theme={null}
import "github.com/go-mizu/mizu/frontend/adapters"

app.Use(adapters.React(frontend.Options{
    Root: "./dist",
}))
```

### Vue

```go theme={null}
func Vue(opts frontend.Options) mizu.Middleware
```

Optimized for Vue 3 applications with Vite.

**Defaults:**

* Manifest: `.vite/manifest.json`
* Output directory: `dist`

**Example:**

```go theme={null}
app.Use(adapters.Vue(frontend.Options{
    Root: "./dist",
}))
```

### Svelte

```go theme={null}
func Svelte(opts frontend.Options) mizu.Middleware
```

Optimized for Svelte applications with Vite.

**Defaults:**

* Manifest: `.vite/manifest.json`
* Output directory: `dist`

**Example:**

```go theme={null}
app.Use(adapters.Svelte(frontend.Options{
    Root: "./dist",
}))
```

### SvelteKit

```go theme={null}
func SvelteKit(opts frontend.Options) mizu.Middleware
```

Optimized for SvelteKit with static adapter.

**Defaults:**

* Output directory: `build`
* Index: `index.html`

**Example:**

```go theme={null}
app.Use(adapters.SvelteKit(frontend.Options{
    Root: "./build",
}))
```

### Solid

```go theme={null}
func Solid(opts frontend.Options) mizu.Middleware
```

Optimized for Solid.js with Vite.

**Defaults:**

* Manifest: `.vite/manifest.json`
* Output directory: `dist`

**Example:**

```go theme={null}
app.Use(adapters.Solid(frontend.Options{
    Root: "./dist",
}))
```

### Astro

```go theme={null}
func Astro(opts frontend.Options) mizu.Middleware
```

Optimized for Astro with static output.

**Defaults:**

* Output directory: `dist`
* Index: `index.html`

**Example:**

```go theme={null}
app.Use(adapters.Astro(frontend.Options{
    Root: "./dist",
}))
```

### Angular

```go theme={null}
func Angular(opts frontend.Options) mizu.Middleware
```

Optimized for Angular applications.

**Defaults:**

* Output directory: `dist/app-name/browser`
* Index: `index.html`

**Example:**

```go theme={null}
app.Use(adapters.Angular(frontend.Options{
    Root: "./dist/my-app/browser",
}))
```

## Using Adapters

### Basic Usage

```go theme={null}
package server

import (
    "github.com/go-mizu/mizu"
    "github.com/go-mizu/mizu/frontend"
    "github.com/go-mizu/mizu/frontend/adapters"
)

func New() *mizu.App {
    app := mizu.New()

    // API routes
    app.Get("/api/users", handleUsers)

    // Frontend with adapter
    app.Use(adapters.React(frontend.Options{
        Mode:        frontend.ModeAuto,
        Root:        "./dist",
        DevServer:   "http://localhost:5173",
        IgnorePaths: []string{"/api"},
    }))

    return app
}
```

### With Embedded FS

```go theme={null}
//go:embed all:dist
var distFS embed.FS

func New() *mizu.App {
    app := mizu.New()

    dist, _ := fs.Sub(distFS, "dist")

    app.Use(adapters.Vue(frontend.Options{
        FS:        dist,
        DevServer: "http://localhost:5173",
    }))

    return app
}
```

### Custom Configuration

Adapters still accept all standard options:

```go theme={null}
app.Use(adapters.React(frontend.Options{
    Mode:      frontend.ModeProduction,
    Root:      "./dist",
    Prefix:    "/app",
    InjectEnv: []string{"API_URL"},
    CacheControl: frontend.CacheConfig{
        HashedAssets: 180 * 24 * time.Hour,
    },
}))
```

## When to Use Adapters

**Use adapters when:**

* Using standard framework setup
* Want framework-specific optimizations
* Prefer convention over configuration

**Use `frontend.WithOptions` when:**

* Custom build configuration
* Non-standard directory structure
* Need full control over options

## Creating Custom Adapters

You can create your own adapters:

```go theme={null}
package myadapters

import (
    "github.com/go-mizu/mizu"
    "github.com/go-mizu/mizu/frontend"
)

func Qwik(opts frontend.Options) mizu.Middleware {
    // Apply Qwik-specific defaults
    if opts.Root == "" {
        opts.Root = "./dist"
    }
    if opts.Index == "" {
        opts.Index = "index.html"
    }
    if opts.Manifest == "" {
        opts.Manifest = "q-manifest.json"
    }

    return frontend.WithOptions(opts)
}
```

Use:

```go theme={null}
import "yourmodule/myadapters"

app.Use(myadapters.Qwik(frontend.Options{
    Root: "./dist",
}))
```

## Adapter Comparison

| Adapter   | Build Tool  | Output Dir         | Manifest              | Notes               |
| --------- | ----------- | ------------------ | --------------------- | ------------------- |
| React     | Vite        | `dist`             | `.vite/manifest.json` | Standard Vite setup |
| Vue       | Vite        | `dist`             | `.vite/manifest.json` | Standard Vite setup |
| Svelte    | Vite        | `dist`             | `.vite/manifest.json` | Standard Vite setup |
| SvelteKit | SvelteKit   | `build`            | None                  | Static adapter      |
| Angular   | Angular CLI | `dist/app/browser` | None                  | Production build    |
| Solid     | Vite        | `dist`             | `.vite/manifest.json` | Standard Vite setup |
| Astro     | Astro       | `dist`             | None                  | Static output       |

## Next Steps

<CardGroup cols={2}>
  <Card title="API Reference" href="/frontend/api-reference" icon="book">
    Complete API documentation
  </Card>

  <Card title="Configuration" href="/frontend/configuration" icon="sliders">
    All configuration options
  </Card>

  <Card title="Framework Guides" href="/frontend/react" icon="code">
    Framework-specific guides
  </Card>
</CardGroup>