---
title: 'Vite Plugin'
description: 'Run Ecopages alongside Vite dev server transforms and plugin ecosystem.'
order: 3
---

import { CodeTabs } from '@/components/code-tabs';

# Vite Plugin

`@ecopages/vite-plugin` integrates Ecopages with [Vite](https://vite.dev/) so you can use Vite's dev server, transforms, and plugin ecosystem alongside Ecopages routing and rendering.

The plugin is **private to the monorepo** today but documents the host-side integration pattern used with Vite and Nitro-style deployments.

## Installation

<CodeTabs
	name="vite-plugin-install"
	tabs={[
		{ id: 'npm', label: 'npm', code: 'npm install -D vite @ecopages/vite-plugin @ecopages/core' },
		{ id: 'pnpm', label: 'pnpm', code: 'pnpm add -D vite @ecopages/vite-plugin @ecopages/core' },
		{ id: 'bun', label: 'bun', code: 'bun add -d vite @ecopages/vite-plugin @ecopages/core' },
	]}
	defaultSelectedKey="npm"
/>

Configure your project using `defineConfig` in `eco.config.ts` (see [Configuration](/docs/getting-started/configuration)).

## Usage

```typescript
import { defineConfig } from 'vite';
import { ecopages } from '@ecopages/vite-plugin';

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

`ecopages()` automatically loads and finalizes `eco.config.ts` asynchronously (using `buildOwnership: 'vite-host'`). You can also specify an alternate config path with `ecopages({ configFile: 'custom.config.ts' })` or supply a pre-finalized `appConfig` in tests.

Register `ecopages()` **before** framework plugins such as `@vitejs/plugin-react` or Tailwind when those plugins also transform JSX or CSS.

## What the plugin provides

- Vite config merging for Ecopages defaults (aliases, `optimizeDeps`, `ssr.noExternal`)
- [Ecopages source transforms](/docs/plugins/source-transforms) as Vite plugins
- Virtual modules for integration manifests
- Ecopages-aware HMR and dev-server bridging to `app.fetch()`

## CLI vs Vite host

The `ecopages` CLI runs apps through Bun or Node (`tsx`) directly. Use this plugin when you want Ecopages to run **inside** a Vite host for dev and build orchestration.

See [Build and Host](/docs/core/build-and-host) for how this fits the Rolldown and Vite-host build model.