### Install dependencies

Source: https://github.com/nksaraf/vinxi/blob/main/docs/guide/a-story.md

Installs the project's dependencies as defined in package.json.

```bash
npm install
```

--------------------------------

### Install Vinxi with bun

Source: https://github.com/nksaraf/vinxi/blob/main/docs/guide/getting-started.md

Use this command to install Vinxi using the bun package manager.

```bash
bun install vinxi
```

--------------------------------

### Start Vinxi Development Server with Custom Config

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/cli.md

Starts the Vinxi development server. Use the `--config` option to specify a custom app configuration file.

```bash
vinxi dev --config path/to/your-app.js
```

--------------------------------

### Client Router Configuration Example

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/router/client.md

This is an example of how to configure the client router, specifying its name, handler, base path, and Vite plugins.

```typescript
{
  name: "client",
  type: "client",
  handler: "./app/client.tsx",
  base: "/_build",
  plugins: () => [ reactRefresh() ],
}
```

--------------------------------

### Example Usage: Getting Client Assets for Hydration

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/manifest.md

Illustrates how to retrieve client-side assets from the manifest, which is typically needed for client-side hydration to match server-rendered content.

```APIDOC
## Example: Getting Client Assets for Hydration

### Description
This example demonstrates fetching the assets from the client manifest, a common requirement for client-side hydration to ensure consistency with server-rendered content.

### Code
```typescript
import { getManifest } from "vinxi/manifest";

const clientManifest = getManifest("client");
const assets = await clientManifest[clientManifest.handler].assets();

// Use the 'assets' array for hydration purposes
```
```

--------------------------------

### Install Vinxi with yarn

Source: https://github.com/nksaraf/vinxi/blob/main/docs/guide/getting-started.md

Use this command to install Vinxi using the yarn package manager.

```bash
yarn add vinxi
```

--------------------------------

### Start Production Server with Custom Preset

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/cli.md

Starts an experimental production server for the Vinxi app. Use the `--preset` option or the SERVER_PRESET environment variable to specify the server preset.

```bash
vinxi start --preset vercel-edge
```

```bash
SERVER_PRESET=vercel-edge vinxi start
```

--------------------------------

### SPA Router Configuration Example

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/router/spa.md

This is an example of how to configure the SPA router. It specifies the router name, type, the handler file, and Vite plugins to use.

```typescript
{
  name: "spa",
  type: "spa",
  handler: "./index.html",
  plugins: () => [tsconfigPaths()],
}
```

--------------------------------

### app.dev()

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/app.md

Starts the development server for the Vinxi app.

```APIDOC
## app.dev()

### Description
Starts the development server for the Vinxi app.

### Method
`await`

### Endpoint
N/A (Method on App instance)

### Parameters
None

### Request Example
```typescript
const app = createApp({ /* config */ });
await app.dev();
```

### Response
#### Success Response (200)
Starts the development server.

#### Response Example
(No specific response body defined, server starts)
```

--------------------------------

### Install Vinxi with npm

Source: https://github.com/nksaraf/vinxi/blob/main/docs/guide/getting-started.md

Use this command to install Vinxi using the npm package manager.

```bash
npm install vinxi
```

--------------------------------

### Install Vinxi with pnpm

Source: https://github.com/nksaraf/vinxi/blob/main/docs/guide/getting-started.md

Use this command to install Vinxi using the pnpm package manager.

```bash
pnpm install vinxi
```

--------------------------------

### HTTP Router Configuration Example

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/router/http.md

An example configuration object for an HTTP router. This demonstrates setting the router's name, type, handler, base path, and enabling worker threads.

```typescript
{
  name: "server",
  type: "http",
  handler: "./app/apiHandler.ts",
  base: "/api",
  worker: true,
  plugins: () => [ reactRefresh() ],
}
```

--------------------------------

### Start development server

Source: https://github.com/nksaraf/vinxi/blob/main/docs/guide/a-story.md

Launches the Vinxi development server, allowing for live reloading and testing of the application.

```bash
npm run dev
```

--------------------------------

### Start Vinxi Development Server on Custom Port

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/cli.md

Starts the Vinxi development server on a specified port. Use the `--port` option to change the default port.

```bash
vinxi dev --port 3001
```

--------------------------------

### Start Development Server

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/app.md

Call the `dev()` method on an App instance to start the development server. This is typically used for local development and testing.

```typescript
import { createApp } from "vinxi";

const app = createApp({
  routers: [
    // ... routers
  ],
});

await app.dev();
```

--------------------------------

### Install Nodemailer

Source: https://github.com/nksaraf/vinxi/blob/main/docs/guide/add-to-existing-vite-app.md

Install the nodemailer package for sending emails. Available for npm, yarn, and pnpm.

```bash
npm install nodemailer
```

```bash
yarn add nodemailer
```

```bash
pnpm add nodemailer
```

--------------------------------

### Install vite-tsconfig-paths plugin

Source: https://github.com/nksaraf/vinxi/blob/main/docs/guide/aliases.md

Install the vite-tsconfig-paths package as a development dependency using different package managers.

```bash
npm install vite-tsconfig-paths -D
```

```bash
yarn add vite-tsconfig-paths -D
```

```bash
pnpm install vite-tsconfig-paths -D
```

```bash
bun install vite-tsconfig-paths -D
```

--------------------------------

### Serve Static Build Preview

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/cli.md

Starts a static file server to preview a production build. Options include directory, host, port, and base URL.

```bash
vinxi serve --dir .output/public --base /my-repo
```

--------------------------------

### Example Route Structure from File System

Source: https://github.com/nksaraf/vinxi/blob/main/docs/guide/file-system-routing.md

This example shows a typical route object generated by a file system router. It includes a `path` and a `$component` field, which specifies the source file and how to import the default export for the route's component.

```typescript
export default [
  {
    path: "/hello",
    $component: {
      src: "app/routes/hello.tsx?pick=default",
      import: async () => {
        return await import("app/routes/hello.tsx?pick=default");
      },
    },
  },
];
```

--------------------------------

### Custom Router Configuration Example

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/router/custom.md

This is an example of how to configure a custom router. It includes the required 'name', 'type' with 'resolveConfig', 'handler', and 'target' properties. The 'resolveConfig' function allows for custom logic during configuration.

```typescript
{
  name: "customRouter",
  type: {
    resolveConfig: (router, app) => {
      // Custom configuration logic
    },
  },
  handler: "./app/customHandler.ts",
  target: "server",
}
```

--------------------------------

### Initialize Vinxi App

Source: https://github.com/nksaraf/vinxi/blob/main/docs/guide/a-story.md

Creates a new Vinxi application instance. This is the basic setup for a Vinxi project.

```typescript
import { createApp } from "vinxi";

export default createApp();
```

--------------------------------

### Start Built Vinxi App

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/app.md

Run the production-ready server file generated by the build process using the `node` command. This command assumes the build output is in `.output/server/index.mjs`.

```bash
node .output/server/index.mjs
```

--------------------------------

### Example Usage: Rendering Page with Preload Links

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/manifest.md

Demonstrates how to use the manifest API to fetch client-side assets and use them for rendering a page with preload links.

```APIDOC
## Example: Rendering Page with Preload Links

### Description
This example shows how to obtain the client manifest, retrieve its associated assets, and use them to render a page, potentially for preloading resources on the client.

### Code
```typescript
import { getManifest } from "vinxi/manifest";
import { eventHandler } from "vinxi/http";

export default eventHandler(async () => {
	const clientManifest = getManifest("client");
	// Assuming 'clientManifest.handler' is the key for the main client handler
	const assets = await clientManifest[clientManifest.handler].assets();

	// Assume renderPageWithPreloadLinks is a function that uses these assets
	return renderPageWithPreloadLinks({
		assets,
	});
});
```
```

--------------------------------

### Build for Bun Runtime

Source: https://github.com/nksaraf/vinxi/blob/main/docs/guide/deployment.md

Use this command to build your Vinxi app specifically for the Bun runtime. Ensure you have Bun installed.

```bash
SERVER_PRESET=bun npm run build
```

--------------------------------

### Import with path alias

Source: https://github.com/nksaraf/vinxi/blob/main/docs/guide/aliases.md

Example of importing a component using a configured path alias.

```typescript
import Button from "@/components/atoms/Button/Button";
```

--------------------------------

### Project package.json

Source: https://github.com/nksaraf/vinxi/blob/main/docs/guide/a-story.md

Defines project metadata, scripts for development, build, and start, and lists Vinxi as a dependency.

```json
{
  "name": "my-app",
  "type": "module",
  "private": true,
  "scripts": {
    "dev": "vinxi dev",
    "build": "vinxi build",
    "start": "vinxi start"
  },
  "dependencies": {
    "vinxi": "0.3.8"
  }
}
```

--------------------------------

### Static Router Configuration Example

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/router/static.md

Configure the static router to serve assets from a local directory. Ensure the 'dir' path is correctly specified relative to the application's root.

```typescript
{
  name: "public",
  type: "static",
  dir: "./public",
}
```

--------------------------------

### getQuery

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/request.md

Get the query parameters from the event.

```APIDOC
## getQuery

### Description
Get the query parameters from the event.

### Signature
```ts
export function getQuery<T, Event extends HTTPEvent = HTTPEvent, _T = Exclude<InferEventInput<"query", Event, T>, undefined>>(
  event: Event
): _T;
```
```

--------------------------------

### getRequestHost

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/request.md

Get the request host.

```APIDOC
## getRequestHost

### Description
Get the request host.

### Signature
```ts
export function getRequestHost(
  event: HTTPEvent,
  opts?: {
    xForwardedHost?: boolean;
  }
): string;
```
```

--------------------------------

### Run Vinxi App with Node CLI

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/app.md

Execute a Vinxi app file using the `node` command. Use flags like `--dev` to start the development server or `--build` to create a production build.

```bash
node app.js
```

```bash
node app.js --dev
```

```bash
node app.js --build
```

--------------------------------

### Install canvas-confetti Library

Source: https://github.com/nksaraf/vinxi/blob/main/docs/guide/a-story.md

Use npm, yarn, or pnpm to add the canvas-confetti library to your project dependencies.

```bash
npm install canvas-confetti
```

```bash
yarn add canvas-confetti
```

```bash
pnpm add canvas-confetti
```

--------------------------------

### Manually Listen for HTTP Requests with Vinxi

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/cli.md

Manually starts an HTTP server listener using `vinxi/listen` and `vinxi/http` for custom server control.

```typescript
import { eventHandler, toNodeListener } from "vinxi/http";
import { listen } from "vinxi/listen";

const handler = eventHandler(async (event) => {
  return {
    body: "Hello World",
  };
});

await listen(toNodeListener(handler), { port: 3000 });
```

--------------------------------

### Use Custom Framework App

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/app.md

Import and use the custom framework app creation function in your main application file. This centralizes app setup and configuration.

```typescript
import { createFrameworkApp } from "framework";

export default createFrameworkApp();
```

--------------------------------

### getWebRequest

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/request.md

Get a Web Fetch API compliant `Request` instance from the `HTTPEvent`.

```APIDOC
## getWebRequest

### Description
Get a Web Fetch API compliant [`Request`][request] instance from the [`HTTPEvent`][httpevent]

### Signature
```ts
export function getWebRequest(event: HTTPEvent): Request;
```
```

--------------------------------

### Managing Response Headers

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/response.md

Functions for getting and setting response headers.

```APIDOC
## getResponseHeaders

### Description
Retrieves all response headers.

### Method
`getResponseHeaders(event)`

## getResponseHeader

### Description
Retrieves a specific response header by name.

### Method
`getResponseHeader(event, name)`

## setResponseHeaders

### Description
Sets multiple response headers at once.

### Method
`setResponseHeaders(event, headers)` (alias: `setHeaders`)

## setResponseHeader

### Description
Sets a single response header.

### Method
`setResponseHeader(event, name, value)` (alias: `setHeader`)

## appendResponseHeaders

### Description
Appends multiple response headers.

### Method
`appendResponseHeaders(event, headers)` (alias: `appendHeaders`)

## appendResponseHeader

### Description
Appends a single response header.

### Method
`appendResponseHeader(event, name, value)` (alias: `appendHeader`)
```

--------------------------------

### Configure vite-tsconfig-paths in app.config.js

Source: https://github.com/nksaraf/vinxi/blob/main/docs/guide/aliases.md

Integrate the vite-tsconfig-paths plugin into the Vinxi app configuration for a basic setup.

```typescript
import { createApp } from "vinxi";
import tsconfigPaths from "vite-tsconfig-paths";

export default createApp({
  routers: [
    {
      base: "/",
      name: "server",
      type: "http",
      plugins: () => [tsconfigPaths()],
    },
  ],
});
```

--------------------------------

### Response Header Utilities

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/response.md

Functions for getting, setting, and appending response headers.

```APIDOC
## Response Header Utilities

### Description
Utilities for getting, setting, and appending response headers.

### Functions

#### `getResponseHeaders(event?: HTTPEvent): ReturnType<HTTPEvent["res"]["getHeaders"]>`
Gets all response headers.

#### `getResponseHeader(event: HTTPEvent, name: HTTPHeaderName): ReturnType<HTTPEvent["res"]["getHeader"]>`
Gets a specific response header by name.

#### `setResponseHeaders(event: HTTPEvent, headers: Record<HTTPHeaderName, Parameters<OutgoingMessage["setHeader"]>[1]>): void`
Sets multiple response headers.

#### `setResponseHeader(event: HTTPEvent, name: HTTPHeaderName, value: Parameters<OutgoingMessage["setHeader"]>[1]): void`
Sets a single response header.

#### `appendResponseHeaders(event: HTTPEvent, headers: Record<string, string>): void`
Appends response headers.

### Aliases

- `setHeaders` is an alias for `setResponseHeaders`.
- `setHeader` is an alias for `setResponseHeader`.
```

--------------------------------

### getRequestProtocol

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/request.md

Get the request protocol, whether its `http` or `https`.

```APIDOC
## getRequestProtocol

### Description
Get the request protocol, whether its `http` or `https`.

### Signature
```ts
export function getRequestProtocol(
  event: HTTPEvent,
  opts?: {
    xForwardedProto?: boolean;
  }
): "https" | "http";
```
```

--------------------------------

### Create Vinxi App with Routers

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/router.md

Demonstrates how to create a Vinxi application by defining multiple routers, including a static router for public assets and an http router for an API. This setup is useful for organizing different types of routes within a single application.

```typescript
import {
  createApp
} from 'vinxi';

export default createApp({
  routers: [
    // A static router serving files from the `public` directory
    {
      name: 'public',
      type: 'static',
      dir: './public',
      base: '/',
    },
    // A http router for an api
    {
      name: 'api',
      type: 'http',
      handler: './app/api.ts',
      base: '/api',
      plugins: () => [
        // Vite plugins applying to exclusively to `http` router
      ]
    }
  ],
});
```

--------------------------------

### Solid SSR Configuration

Source: https://github.com/nksaraf/vinxi/blob/main/README.md

Configure a Solid SSR application with Vinxi. This setup includes client and server routers, with Solid's SSR plugin enabled.

```typescript
import { createApp } from "vinxi";
import solid from "vite-plugin-solid";

export default createApp({
  routers: [
    {
      name: "public",
      type: "static",
      dir: "./public",
    },
    {
      name: "client",
      type: "client",
      handler: "./app/client.tsx",
      target: "browser",
      plugins: () => [solid({ ssr: true })],
      base: "/_build",
    },
    {
      name: "ssr",
      type: "http",
      handler: "./app/server.tsx",
      target: "server",
      plugins: () => [solid({ ssr: true })],
    },
  ],
});
```

--------------------------------

### Solid SSR App Configuration

Source: https://github.com/nksaraf/vinxi/blob/main/docs/guide/create-your-first-app.md

Configure a Solid Server-Side Rendering (SSR) application using Vinxi. This snippet includes setup for static, client, and SSR routers with Solid-specific plugins.

```typescript
import { createApp } from "vinxi";
import solid from "vite-plugin-solid";

export default createApp({
  routers: [
    {
      name: "public",
      type: "static",
      dir: "./public",
    },
    {
      name: "client",
      type: "client",
      handler: "./app/client.tsx",
      plugins: () => [solid({ ssr: true })],
      base: "/_build",
    },
    {
      name: "ssr",
      type: "http",
      handler: "./app/server.tsx",
      plugins: () => [solid({ ssr: true })],
    },
  ],
});
```

--------------------------------

### Export HTTP Event Handler for Vinxi Runtime

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/cli.md

Exports an HTTP event handler using `vinxi/http` that `vinxi run` will automatically start a server for.

```typescript
import { eventHandler } from "vinxi/http";

export default eventHandler(async (event) => {
  return {
    body: "Hello World",
  };
});
```

--------------------------------

### Get Request URL

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/response.md

Constructs the full request URL, optionally considering X-Forwarded-Host and X-Forwarded-Proto headers.

```typescript
export function getRequestURL(
	event: HTTPEvent,
	ops?: {
		xForwardedHost?: boolean;
		xForwardedProto?: boolean;
	},
): URL;
export function getRequestURL(
	ops?: {
		xForwardedHost?: boolean;
		xForwardedProto?: boolean;
	},
): URL;
```

--------------------------------

### Retrieving Client Assets for Hydration

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/manifest.md

Shows how to get the client manifest and its assets, which are typically needed to match server-rendered content on the client during the hydration process.

```typescript
import { getManifest } from "vinxi/manifest";

const clientManifest = getManifest("client");
const assets = await clientManifest[clientManifest.handler].assets();

// use assets in hydration
```

--------------------------------

### Get Specific Cookie

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/response.md

Retrieves the value of a specific cookie by its name. Usage example provided.

```typescript
/**
 * Get a cookie value by name.
 * @param event {HTTPEvent} H3 event or req passed by h3 handler
 * @param name Name of the cookie to get
 * @returns {*} Value of the cookie (String or undefined)
 * ```ts
 * const authorization = getCookie(request, 'Authorization')
 * ```
 */
export function getCookie(event: HTTPEvent, name: string): string | undefined;
export function getCookie(name: string): string | undefined;
```

--------------------------------

### Import with long relative path

Source: https://github.com/nksaraf/vinxi/blob/main/docs/guide/aliases.md

Example of importing a component using a long relative path before alias configuration.

```typescript
import Button from "../../../../components/atoms/Button/Button";
```

--------------------------------

### Configure Vinxi Routers for SPA and Static Files

Source: https://github.com/nksaraf/vinxi/blob/main/docs/guide/a-story.md

Defines routers for serving static assets and a single-page application using Vite. This setup allows for automatic module resolution and hot reloading.

```typescript
import {
  createApp
} from "vinxi";

export default createApp({
  routers: [
    {
      name: "public",
      type: "static",
      dir: "./public",
      base: "/",
    },
    {
      name: "app",
      type: "spa",
      file: "./index.html",
      base: "/",
    },
  ],
});
```

--------------------------------

### Handle Button Click Event

Source: https://github.com/nksaraf/vinxi/blob/main/docs/guide/a-story.md

Attach an event listener to a button to execute a function when it is clicked. This example logs a message to the console.

```typescript
document.getElementById("my-button").addEventListener("click", () => {
  console.log("Hello World");
});
```

--------------------------------

### Route Object with Multiple Dependencies

Source: https://github.com/nksaraf/vinxi/blob/main/docs/guide/file-system-routing.md

An example of a route object that includes multiple file dependencies. It specifies a component, configuration, and data fetching logic, each with its own source file and import/require strategy.

```typescript
import * as mod from "app/routes/hello.tsx?pick=config";

export default [
  {
    path: "/hello",
    $component: {
      src: "app/routes/hello.tsx?pick=default",
      import: async () => {
        return await import("app/routes/hello.tsx?pick=default");
      },
    },
    $$config: {
      src: "app/routes/hello.tsx?pick=config",
      require: () => {
        return mod;
      },
    },
    $data: {
      src: "app/routes/hello.data.ts?pick=default",
      import: async () => {
        return await import("app/routes/hello.data.ts?pick=default");
      },
    }
  }
];
```

--------------------------------

### React SSR Configuration

Source: https://github.com/nksaraf/vinxi/blob/main/README.md

Configure a React SSR application with Vinxi. This setup includes client and server routers, along with necessary Vite plugins.

```typescript
import reactRefresh from "@vitejs/plugin-react";
import { createApp } from "vinxi";

export default createApp({
  routers: [
    {
      name: "public",
      type: "static",
      dir: "./public",
    },
    {
      name: "client",
      type: "client",
      handler: "./app/client.tsx",
      target: "browser",
      plugins: () => [reactRefresh()],
      base: "/_build",
    },
    {
      name: "ssr",
      type: "http",
      handler: "./app/server.tsx",
      target: "server",
    },
  ],
});
```

--------------------------------

### Session Utilities

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/response.md

Utilities for managing session data, including clearing, unsealing, getting, sealing, updating, and using sessions.

```APIDOC
## Session Utilities

### Description
Utilities for managing session data.

### Functions

#### `clearSession(event: HTTPEvent, config: Partial<SessionConfig>): Promise<void>`
Clears the session.

#### `unsealSession(event: HTTPEvent, config: SessionConfig, sealed: string): Promise<Partial<Session<SessionDataT>>>`
Unseals a session.

#### `getSession<T extends SessionDataT = SessionDataT>(event: HTTPEvent, config: SessionConfig): Promise<Session<T>>`
Gets the session data.

#### `sealSession(event: HTTPEvent, config: SessionConfig): void`
Seals the session.

#### `updateSession<T extends SessionDataT = SessionDataT>(event: HTTPEvent, config: SessionConfig, update?: SessionUpdate<T>): Promise<Session<T>>`
Updates the session data.

#### `useSession<T extends SessionDataT = SessionDataT>(event: HTTPEvent, config: SessionConfig): Promise<{ readonly id: string | undefined; readonly data: T; update: (update: SessionUpdate<T>) => Promise<any>; clear: () => Promise<any>; }>`
Provides session hooks for accessing and manipulating session data.
```

--------------------------------

### Get Request Host

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/request.md

Use `getRequestHost` to retrieve the host of the incoming request. It can optionally consider the `X-Forwarded-Host` header.

```typescript
import { eventHandler, getRequestHost } from "vinxi/http";

export default eventHandler(async (event) => {
  const host = getRequestHost(event); // [!code highlight]
});
```

--------------------------------

### Get All Request Headers

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/request.md

Use `getRequestHeaders` to retrieve all headers from the incoming request event. This is useful when you need to inspect all header information.

```typescript
import { eventHandler, getRequestHeaders } from "vinxi/http";

export default eventHandler(async (event) => {
  const headers = getRequestHeaders(event); // [!code highlight]
});
```

--------------------------------

### Build Vinxi App with Custom Preset

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/cli.md

Builds the Vinxi application using a specified server preset. Use the `--preset` option or the SERVER_PRESET environment variable.

```bash
vinxi build --preset vercel-edge
```

```bash
SERVER_PRESET=vercel-edge vinxi build
```

--------------------------------

### Create a Vinxi App with Routers

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/app.md

Use `createApp` to initialize a Vinxi application with a configuration object that defines its routers. This is the primary method for setting up your server's structure.

```typescript
import { createApp } from "vinxi";

export default createApp({
  routers: [
    {
      name: "public",
      type: "static",
      dir: "./public",
    },
    {
      name: "api",
      type: "http",
      handler: "./server.ts",
      target: "server",
    },
    // ... other routers
  ],
});
```

--------------------------------

### app.build()

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/app.md

Builds the Vinxi app for production.

```APIDOC
## app.build()

### Description
Builds the Vinxi app for production.

### Method
`await`

### Endpoint
N/A (Method on App instance)

### Parameters
None

### Request Example
```typescript
const app = createApp({ /* config */ });
await app.build();
```

### Response
#### Success Response (200)
Builds the production artifacts for the app.

#### Response Example
(No specific response body defined, build process completes)
```

--------------------------------

### getRequestURL

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/request.md

Get the request URL.

```APIDOC
## getRequestURL

### Description
Get the request [URL][url]

### Signature
```ts
export function getRequestURL(
  event: HTTPEvent,
  opts?: {
    xForwardedHost?: boolean;
    xForwardedProto?: boolean;
  }
): URL;
```
```

--------------------------------

### getRequestIP

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/request.md

Get the request IP, if visible.

```APIDOC
## getRequestIP

### Description
Get the request IP, if visible.

### Signature
```ts
export function getRequestIP(
  event: HTTPEvent,
  opts?: {
    xForwardedFor?: boolean;
  }
): string | undefined;
```
```

--------------------------------

### getCookie

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/cookies.md

Gets a cookie value by its name.

```APIDOC
## getCookie

### Description
Gets a cookie value by its name.

### Signature
```ts
export function getCookie(event: HTTPEvent, name: string): string | undefined
```
```

--------------------------------

### Log 'Hello World' to Console

Source: https://github.com/nksaraf/vinxi/blob/main/docs/guide/a-story.md

Add this JavaScript file to your public directory to log a message to the browser's console.

```typescript
console.log("Hello World");
```

--------------------------------

### getValidatedQuery

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/request.md

Get and validate the query parameters from the event.

```APIDOC
## getValidatedQuery

### Description
Get and validate the query parameters from the event.

### Signature
```ts
export function getValidatedQuery<T, Event extends HTTPEvent = HTTPEvent, _T = InferEventInput<"query", Event, T>>(
  event: Event,
  validate: ValidateFunction<_T>
): Promise<_T>;
```
```

--------------------------------

### Get Query Parameters

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/response.md

Retrieves query parameters from an HTTP event.

```typescript
export function getQuery<T,
	Event extends HTTPEvent = HTTPEvent,
	_T = Exclude<InferEventInput<"query", Event, T>, undefined>,
>(event: Event): _T;
export function getQuery<T,
	Event extends HTTPEvent = HTTPEvent,
	_T = Exclude<InferEventInput<"query", Event, T>, undefined>,
>(): _T;
```

--------------------------------

### Cookie Management

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/response.md

Functions for parsing, getting, setting, and deleting cookies.

```APIDOC
## parseCookies

### Description
Parses the cookies from the request event.

### Method
`parseCookies(event)`

## getCookie

### Description
Retrieves a specific cookie by name.

### Method
`getCookie(event, name)`

## setCookie

### Description
Sets a cookie with a name, value, and optional options.

### Method
`setCookie(event, name, value, opts?)`

## deleteCookie

### Description
Deletes a cookie by name with optional options.

### Method
`deleteCookie(event, name, opts?)`

## splitCookiesString

### Description
Splits a raw cookie string into individual cookie pairs.

### Method
`splitCookiesString(cookiesString)`
```

--------------------------------

### File System Router with Multiple Dependencies

Source: https://github.com/nksaraf/vinxi/blob/main/docs/guide/file-system-routing.md

Demonstrates how to define multiple file dependencies for a single route. This includes a default handler (`$handler`), configuration (`$$config`), and data fetching logic (`$data`), each potentially pointing to different files or exports.

```typescript
class MyFileSystemRouter extends BaseFileSystemRouter {
  toPath(filePath) {
    return filePath.replace(/\.js$/, "");
  }

  toRoute(filePath) {
    return {
      path: this.toPath(filePath),
      $handler: {
        src: filePath,
        pick: ["default"]
      }
      $$config: {
        src: filePath,
        pick: ["config"]
      }
      $data: {
        src: filePath.replace(/\.js$/, ".data.ts"),
        pick: ["default"]
      }
    };
  }
}


```

--------------------------------

### Get Request Headers

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/response.md

Retrieves all request headers from an HTTP event.

```typescript
export function getRequestHeaders(event: HTTPEvent): RequestHeaders;

```

--------------------------------

### Get Response Headers

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/response.md

Retrieves all response headers from an HTTP event.

```typescript
export function getResponseHeaders(
  event: HTTPEvent,
): ReturnType<HTTPEvent["res"].getHeaders>;

```

--------------------------------

### Basic HTML file

Source: https://github.com/nksaraf/vinxi/blob/main/docs/guide/a-story.md

A simple HTML file to be served by the static file server. Displays a 'Hello World' heading.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>
```

--------------------------------

### Build Vinxi App for Production with Custom Config

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/cli.md

Builds the Vinxi application for production. Use the `--config` option to specify a custom app configuration file.

```bash
vinxi build --config path/to/your-app.js
```

--------------------------------

### Create a Custom Framework App

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/app.md

Wrap `createApp` within a custom function to pre-configure routers and settings for a framework. This allows for reusable app configurations.

```typescript
import { createApp } from "vinxi";

export function createFrameworkApp() {
  return createApp({
    routers: [
      {
        name: "public",
        type: "static",
        dir: "./public",
      },
      {
        name: "api",
        type: "http",
        handler: "./server.ts",
        target: "server",
      },
      // ... other routers
    ],
  });
}
```

--------------------------------

### Get Session Data

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/response.md

Retrieves session data for an HTTP event or a given configuration.

```typescript
export function getSession<T extends SessionDataT = SessionDataT>(
	event: HTTPEvent,
	config: SessionConfig,
): Promise<Session<T>>;
export function getSession<T extends SessionDataT = SessionDataT>(
	config: SessionConfig,
): Promise<Session<T>>;
```

--------------------------------

### Delete Cookie

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/response.md

Removes a cookie by its name, with optional cookie options. Usage example provided.

```typescript
/**
 * Remove a cookie by name.
 * @param event {HTTPEvent} H3 event or res passed by h3 handler
 * @param name Name of the cookie to delete
 * @param serializeOptions {CookieSerializeOptions} Cookie options
 * ```ts
 * deleteCookie(res, 'SessionId')
 * ```
 */
export function deleteCookie(
	event: HTTPEvent,
	name: string,
	serializeOptions?: CookieSerializeOptions,
): void;
export function deleteCookie(
	name: string,
	serializeOptions?: CookieSerializeOptions,
): void;
```

--------------------------------

### Get Router Parameters

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/response.md

Retrieves router parameters from an HTTP event. Optionally decodes the parameters.

```typescript
export function getRouterParams(
	event: HTTPEvent,
	opts?: {
		decode?: boolean;
	},
): NonNullable<HTTPEvent["context"]["params"]>;
export function getRouterParams(
	opts?: {
		decode?: boolean;
	},
): NonNullable<HTTPEvent["context"]["params"]>;
```

--------------------------------

### Build Production App

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/app.md

Use the `build()` method on an App instance to compile the application for production deployment. This prepares your app for a production environment.

```typescript
import { createApp } from "vinxi";

const app = createApp({
  routers: [
    // ... routers
  ],
});

await app.build();
```

--------------------------------

### Get Web Request Object

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/response.md

Retrieves the native Web Request object from an HTTP event.

```typescript
export function getWebRequest(event: HTTPEvent): Request;
export function getWebRequest(): Request;
```

--------------------------------

### Response Headers API

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/response.md

Functions to get, set, append, clear, and remove response headers.

```APIDOC
## getResponseHeaders(event)

### Description
Get all the response headers.

### Method
`getResponseHeaders`

### Parameters
- **event** (HTTPEvent) - The HTTP event object.

### Response
- **ReturnType<HTTPEvent["res"]["getHeaders"]>** - The response headers.

## getResponseHeader(event, name)

### Description
Get a specific response header by its name.

### Method
`getResponseHeader`

### Parameters
- **event** (HTTPEvent) - The HTTP event object.
- **name** (HTTPHeaderName) - The name of the header to retrieve.

### Response
- **ReturnType<HTTPEvent["res"]["getHeader"]>** - The value of the specified response header.

## setResponseHeaders(event, headers)

### Description
Set multiple response headers at once.

### Method
`setResponseHeaders`

### Parameters
- **event** (HTTPEvent) - The HTTP event object.
- **headers** (Record<HTTPHeaderName, Parameters<OutgoingMessage["setHeader"]>[1]>) - An object containing header names and their values.

## setResponseHeader(event, name, value)

### Description
Set a specific response header by its name.

### Method
`setResponseHeader`

### Parameters
- **event** (HTTPEvent) - The HTTP event object.
- **name** (HTTPHeaderName) - The name of the header to set.
- **value** (Parameters<OutgoingMessage["setHeader"]>[1]) - The value of the header.

## appendResponseHeaders(event, headers)

### Description
Append multiple response headers.

### Method
`appendResponseHeaders`

### Parameters
- **event** (HTTPEvent) - The HTTP event object.
- **headers** (Record<string, string>) - An object containing header names and their values to append.

## appendResponseHeader(event, name, value)

### Description
Append a value to an existing response header or set it if it doesn't exist.

### Method
`appendResponseHeader`

### Parameters
- **event** (HTTPEvent) - The HTTP event object.
- **name** (HTTPHeaderName) - The name of the header to append to.
- **value** (string) - The value to append.

## clearResponseHeaders(event, headerNames)

### Description
Clear specified response headers or all if none are specified.

### Method
`clearResponseHeaders`

### Parameters
- **event** (HTTPEvent) - The HTTP event object.
- **headerNames** (string[]) - Optional. An array of header names to clear. If omitted, all headers are cleared.

## removeResponseHeader(event, name)

### Description
Remove a response header by its name.

### Method
`removeResponseHeader`

### Parameters
- **event** (HTTPEvent) - The HTTP event object.
- **name** (HTTPHeaderName) - The name of the header to remove.

```

--------------------------------

### Get Request Header by Name

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/response.md

Retrieves a specific request header by its name from an HTTP event.

```typescript
export function getRequestHeader( 
  event: HTTPEvent,
  name: HTTPHeaderName,
): RequestHeaders[string];

```

--------------------------------

### Display Vinxi CLI Version Information

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/cli.md

Shows the version information for Vinxi, Vite, Nitro, and H3.

```bash
vinxi version
```

--------------------------------

### Get Response Header by Name

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/response.md

Retrieves a specific response header by its name from an HTTP event.

```typescript
export function getResponseHeader( 
  event: HTTPEvent,
  name: HTTPHeaderName,
): ReturnType<HTTPEvent["res"].getHeader>;

```

--------------------------------

### Configure static file router

Source: https://github.com/nksaraf/vinxi/blob/main/docs/guide/a-story.md

Adds a static file server router to the Vinxi app, configured to serve files from the './public' directory at the root URL.

```typescript
import { createApp } from "vinxi";

export default createApp({
  routers: [
    {
      name: "public",
      type: "static",
      dir: "./public",
      base: "/",
    },
  ],
});
```

--------------------------------

### Get Response Status

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/response.md

Retrieves the HTTP status code from the response. Can be used with or without an event object.

```typescript
export function getResponseStatus(event: HTTPEvent): number;
export function getResponseStatus(): number;
```

--------------------------------

### Run Custom Framework App via CLI

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/app.md

Integrate the custom framework app into a CLI script. This script can then use `app.dev()` or `app.build()` based on command-line arguments like `--dev` or `--build`.

```typescript
import { createFrameworkApp } from "framework";

const app = createFrameworkApp();
if (process.argv.includes("--dev")) {
  await app.dev();
} else if (process.argv.includes("--build")) {
  await app.build();
}
```

--------------------------------

### Get Request Fingerprint

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/response.md

Generates a fingerprint for the request, potentially using provided options. This is an experimental utility.

```typescript
/** @experimental Behavior of this utility might change in the future versions */
export function getRequestFingerprint(
	event: HTTPEvent,
	ops?: RequestFingerprintOptions,
): Promise<string | null>;
export function getRequestFingerprint(
	ops?: RequestFingerprintOptions,
): Promise<string | null>;
```

--------------------------------

### Accessing Client Manifest and Assets

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/manifest.md

Demonstrates how to retrieve the client manifest and its associated assets within an event handler. This is useful for server-side rendering and preloading.

```typescript
import { getManifest } from "vinxi/manifest";
import { eventHandler } from "vinxi/http"

export default eventHandler(() => {
	const clientManifest = getManifest("client");
	const assets = await clientManifest[clientManifest.handler].assets();

	return renderPageWithPreloadLinks({
		assets,
	});
})
```

--------------------------------

### Get Request Protocol

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/response.md

Determines the request protocol (HTTP or HTTPS), optionally using the X-Forwarded-Proto header.

```typescript
export function getRequestProtocol(
	event: HTTPEvent,
	ops?: {
		xForwardedProto?: boolean;
	},
): "https" | "http";
export function getRequestProtocol(): "https" | "http";
```

--------------------------------

### Create Vinxi App with Routers

Source: https://github.com/nksaraf/vinxi/blob/main/README.md

Defines a Vinxi application with two routers: a static router for serving public assets and an HTTP router for an API. The static router serves files from the './public' directory at the root path. The HTTP router uses './app/api.ts' as its handler and is accessible at the '/api' base path.

```typescript
import {
  createApp
} from "vinxi";

export default createApp({
  routers: [
    // A static router serving files from the `public` directory
    {
      name: "public",
      type: "static",
      dir: "./public",
      base: "/",
    },
    // A http router for an api
    {
      name: "api",
      type: "http",
      handler: "./app/api.ts",
      base: "/api",
      plugins: () => [
        // Vite plugins applying exclusively to `http` router
      ],
    },
  ],
});
```

--------------------------------

### Basic Route Definition

Source: https://github.com/nksaraf/vinxi/blob/main/docs/guide/file-system-routing.md

Defines a simple route based on a file name. Ensure the file is placed in the appropriate routes directory.

```javascript
export default {
  // ... other configurations
  routes: [
    {
      path: '/about',
      component: () => import('@/views/AboutView.vue'),
    },
  ],
};
```

--------------------------------

### Set Cookie

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/response.md

Sets a cookie with a specified name, value, and optional serialization options. Usage example provided.

```typescript
/**
 * Set a cookie value by name.
 * @param event {HTTPEvent} H3 event or res passed by h3 handler
 * @param name Name of the cookie to set
 * @param value Value of the cookie to set
 * @param serializeOptions {CookieSerializeOptions} Options for serializing the cookie
 * ```ts
 * setCookie(res, 'Authorization', '1234567')
 * ```
 */
export function setCookie(
	event: HTTPEvent,
	name: string,
	value: string,
	serializeOptions?: CookieSerializeOptions,
): void;
export function setCookie(
	name: string,
	value: string,
	serializeOptions?: CookieSerializeOptions,
): void;
```

--------------------------------

### Define a Custom File System Router

Source: https://github.com/nksaraf/vinxi/blob/main/docs/guide/file-system-routing.md

Extend `BaseFileSystemRouter` to create a custom router. Implement `toPath` to map file paths to route paths and `toRoute` to define how files are converted into route objects, specifying dependencies like handlers.

```typescript
import { BaseFileSystemRouter } from "vinxi/fs-router";

class MyFileSystemRouter extends BaseFileSystemRouter {
  toPath(filePath) {
    return filePath.replace(/\.js$/, "");
  }

  toRoute(filePath) {
    return {
      path: this.toPath(filePath),
      $handler: {
        src: filePath,
        pick: ["default"],
      },
    };
  }
}

export default createApp({
  routers: [
    {
      routes: (router, app) => {
        return new MyFileSystemRouter(
          {
            dir: path.join(__dirname, "app/routes"),
            extensions: ["jsx", "js", "tsx", "ts"],
          },
          router,
          app,
        );
      },
    },
  ],
});
```

--------------------------------

### Get Response Status Text

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/response.md

Retrieves the status text for the HTTP response. Works with or without an event object.

```typescript
export function getResponseStatusText(event: HTTPEvent): string;
export function getResponseStatusText(): string;
```

--------------------------------

### Get Validated Query Parameters

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/response.md

Retrieves and validates query parameters from an HTTP event using a validation function.

```typescript
export function getValidatedQuery<T,
	Event extends HTTPEvent = HTTPEvent,
	_T = InferEventInput<"query", Event, T>,
>(event: Event, validate: ValidateFunction<_T>): Promise<_T>;
export function getValidatedQuery<T,
	Event extends HTTPEvent = HTTPEvent,
	_T = InferEventInput<"query", Event, T>,
>(validate: ValidateFunction<_T>): Promise<_T>;
```

--------------------------------

### Get Router Param

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/response.md

Retrieves a specific router parameter by name from an HTTP event. Optionally decodes the parameter.

```typescript
export function getRouterParam(
	event: HTTPEvent,
	name: string,
	opts?: {
		decode?: boolean;
	},
): string | undefined;
export function getRouterParam(
	name: string,
	opts?: {
		decode?: boolean;
	},
): string | undefined;
```

--------------------------------

### Early Hints

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/response.md

Function for sending early hints with links.

```APIDOC
## writeEarlyHints

### Description
Sends early hints with specified links and a callback.

### Method
`writeEarlyHints(event, links, callback)`
```

--------------------------------

### writeEarlyHints

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/response.md

Writes early hints to the client before the main response is sent.

```APIDOC
## writeEarlyHints

### Description
Writes early hints to the client. This can be used to provide performance optimizations like preloading resources.

### Method
Not applicable (function call)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
* **event** (HTTPEvent) - Optional - The H3 event object.
* **hints** (string | string[] | Record<string, string | string[]>) - Required - The early hints to send. Can be a string, an array of strings, or an object mapping header names to values or arrays of values.
* **cb** (() => void) - Optional - A callback function to be executed after the hints are sent.

### Request Example
```javascript
// Send a single hint
writeEarlyHints('103 Early Hints');

// Send multiple hints
writeEarlyHints([
  'Link: </style.css>; rel=preload; as=style',
  'Link: </script.js>; rel=preload; as=script'
]);

// Send hints as an object
writeEarlyHints({
  'Link': [
    '</style.css>; rel=preload; as=style',
    '</script.js>; rel=preload; as=script'
  ]
});
```

### Response
None (void function)

#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### parseCookies

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/cookies.md

Parses the request to get the HTTP Cookie header string and returns an object of all cookie name-value pairs.

```APIDOC
## parseCookies

### Description
Parses the request to get the HTTP Cookie header string and returns an object of all cookie name-value pairs.

### Signature
```ts
export function parseCookies(event: HTTPEvent): Record<string, string>
```
```

--------------------------------

### Write Early Hints

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/response.md

Writes early hints for an HTTP event. This is useful for sending informational responses before the main response is ready.

```typescript
export function writeEarlyHints( 
  event: HTTPEvent,
  hints: string | string[] | Record<string, string | string[]>,
  cb?: () => void,
): void;

```

--------------------------------

### Import CSS and Use Client-Side Libraries

Source: https://github.com/nksaraf/vinxi/blob/main/docs/guide/a-story.md

Demonstrates importing CSS and client-side JavaScript libraries like 'canvas-confetti' within an application. Changes to CSS are reflected instantly without a page refresh.

```typescript
import confetti from "canvas-confetti";

import "./app.css";

document.getElementById("my-button").addEventListener("click", () => {
  confetti();
});
```

--------------------------------

### React SSR App Configuration

Source: https://github.com/nksaraf/vinxi/blob/main/docs/guide/create-your-first-app.md

Configure a React Server-Side Rendering (SSR) application using Vinxi. This snippet sets up static, client, and SSR routers.

```typescript
import reactRefresh from "@vitejs/plugin-react";
import { createApp } from "vinxi";

export default createApp({
  routers: [
    {
      name: "public",
      type: "static",
      dir: "./public",
    },
    {
      name: "client",
      type: "client",
      handler: "./app/client.tsx",
      plugins: () => [reactRefresh()],
      base: "/_build",
    },
    {
      name: "ssr",
      type: "http",
      handler: "./app/server.tsx",
    },
  ],
});
```

--------------------------------

### Get Query Parameters

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/response.md

Retrieves query parameters from the request URL. This function is generic and can infer the type of query parameters.

```typescript
function getQuery< 
    T, 
    Event extends H3Event<EventHandlerRequest> = H3Event<EventHandlerRequest>, 
    _T = Exclude<InferEventInput<'query', Event, T>, undefined>
>( 
    event: Event 
) => _T;

```

--------------------------------

### Get Request Protocol

Source: https://github.com/nksaraf/vinxi/blob/main/docs/api/server/request.md

Use `getRequestProtocol` to determine if the request was made over `http` or `https`. It can optionally use the `X-Forwarded-Proto` header.

```typescript
import { eventHandler, getRequestProtocol } from "vinxi/http";

export default eventHandler(async (event) => {
  const protocol = getRequestProtocol(event); // [!code highlight]
});
```