# Vite Integration and Document Ownership

> How the Vite plugin owns the HTML document, injects Askr-managed head content, and composes the SSR response.

Source: [https://askrjs.com/docs/tooling/vite](https://askrjs.com/docs/tooling/vite)

Status: stable. Packages: @askrjs/vite.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Example

Install the Askr Vite plugin once and keep the HTML document owned by the selected SPA, SSR, or SSG entry instead of generating competing shells.

```tsx
import { askrVitePlugin } from '@askrjs/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [askrVitePlugin()],
});
```

## Askr Vite plugin

askr() from @askrjs/vite is the entry point every Askr app needs in vite.config.ts. It accepts an optional options object with three booleans -- transformJsx, optimizeTemplates, and ssrPrecompile -- and returns a plugin object whose only publicly-typed field is name: 'askr:vite'. That minimal public type is deliberate: keeping Vite's own (recursive, versioned) Plugin type out of the shipped declarations avoids type-identity conflicts when something like vite-plus compares plugin instances across separately-installed Vite versions.

## Browser build

On the client side, the plugin's job is applying Askr's JSX and template transforms so a normal Vite dev server and build pipeline understand Askr syntax without any other configuration. You install it alongside vite and @askrjs/askr (npm install -D @askrjs/vite vite, npm install @askrjs/askr) and add plugins: [askr()] to a standard defineConfig call -- there's no additional loader or babel config required.

## Server entry

askrServer({ entry, exportName?, indexHtml? }), imported from the @askrjs/vite/server subpath, wires up the SSR side: entry points at your server entry module (for example src/server/entry-server.ts), and the plugin composes the app's rendered response against your HTML document template. Like the browser plugin, its published type only exposes name: 'askr:server' publicly, for the same cross-Vite-version type-identity reason.

## Document ownership

Vite is the sole owner of the HTML document at runtime: a server-rendered template must contain exactly one &lt;!--askr-head--&gt; marker inside &lt;head&gt; and one &lt;!--askr-app--&gt; marker inside the app root, and the server plugin validates both are present before it will patch anything. It preserves any application-authored head content you already have, injects only normalized Askr-owned title/meta/link/JSON-LD nodes at the head marker, patches the existing html element's lang and dir attributes, and streams the composed response between the template's prefix and suffix without buffering the full body -- and none of the internal coordination headers it uses for that composition are ever sent to the browser.

## Documentation navigation

[Previous](https://askrjs.com/docs/tooling/skills/index.md) | [Next](https://askrjs.com/docs/guides/index.md)