npm package: @flightdev/ui-vue
Description: Vue 3+ SSR adapter for Flight Framework - streaming, hydration, islands
Latest version: 1.1.0

# @flightdev/ui-vue

Vue 3 SSR adapter for Flight Framework. Provides server-side rendering with streaming and hydration support.

## Table of Contents

- [Installation](#installation)
- [Quick Start](#quick-start)
- [SSR Options](#ssr-options)
- [Streaming SSR](#streaming-ssr)
- [Hydration](#hydration)
- [API Reference](#api-reference)
- [License](#license)

---

## Installation

```bash
npm install @flightdev/ui @flightdev/ui-vue
```

Peer dependencies:

```bash
npm install vue
```

---

## Quick Start

```typescript
import { defineUI } from '@flightdev/ui';
import { vue } from '@flightdev/ui-vue';

const ui = defineUI(vue());

const result = await ui.adapter.renderToString({
    component: App,
    props: { title: 'My Page' },
});

console.log(result.html);
```

---

## SSR Options

Configure the Vue adapter with options:

```typescript
import { vue } from '@flightdev/ui-vue';

const adapter = vue({
    streaming: true,
});
```

### Available Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `streaming` | `boolean` | `false` | Enable streaming SSR |

---

## Streaming SSR

Vue 3 supports streaming SSR via `vue/server-renderer`:

```typescript
import { vue } from '@flightdev/ui-vue';

const adapter = vue({ streaming: true });

const { stream, done, abort } = adapter.renderToStream(
    { component: App, props: { data } },
    { url: request.url },
    {
        onShellReady: () => {
            response.writeHead(200, {
                'Content-Type': 'text/html',
            });
        },
    }
);

const reader = stream.getReader();
while (true) {
    const { done: readerDone, value } = await reader.read();
    if (readerDone) break;
    response.write(value);
}
response.end();
```

---

## Hydration

Generate hydration scripts for client-side interactivity:

```typescript
const result = await adapter.renderToString({
    component: App,
    props: { data },
});

const hydrationScript = adapter.getHydrationScript(result);

const html = `
<!DOCTYPE html>
<html>
<body>
    <div id="app">${result.html}</div>
    ${hydrationScript}
</body>
</html>
`;
```

### Client Entry

```typescript
// Client entry
import { createSSRApp } from 'vue';
import App from './App.vue';

const app = createSSRApp(App, window.__FLIGHT_DATA__.props);
app.mount('#app');
```

---

## API Reference

### vue(options?)

Create a Vue adapter instance.

```typescript
function vue(options?: VueAdapterOptions): VueAdapter;
```

### VueAdapter

| Method | Description |
|--------|-------------|
| `renderToString(component, context?)` | Render to HTML string |
| `renderToStream(component, context?, options?)` | Render to readable stream |
| `getHydrationScript(result)` | Generate hydration script |
| `getClientEntry()` | Get client entry code |

### Capabilities

| Capability | Supported |
|------------|-----------|
| Streaming | Yes |
| Partial Hydration | Yes |
| Islands | Yes |
| Resumable | No |
| SSG | Yes |
| CSR | Yes |
| Server Components | No |

---

## License

MIT