---
title: Vite
description: Learn more about using Vite in your monorepo.
product: turborepo
type: integration
summary: Add and configure Vite applications in your Turborepo monorepo.
related:
  - /docs/guides/frameworks/framework-bindings
  - /docs/guides/microfrontends
  - /docs/guides/frameworks/sveltekit
---

# Vite

[Vite](https://vitejs.dev/) is a build tool that aims to provide a faster and leaner development experience for modern web projects.

Quickstart [#quickstart]

To get started with Vite in a Turborepo quickly, use [the `with-vite` example](https://github.com/vercel/turborepo/tree/main/examples/with-vite):

<PackageManagerTabs>
  <Tab value="pnpm">
    ```bash title="Terminal"
    pnpm dlx create-turbo@latest -e with-vite
    ```
  </Tab>

  <Tab value="yarn">
    ```bash title="Terminal"
    yarn dlx create-turbo@latest -e with-vite
    ```
  </Tab>

  <Tab value="npm">
    ```bash title="Terminal"
    npx create-turbo@latest -e with-vite
    ```
  </Tab>

  <Tab value="bun">
    ```bash title="Terminal"
    bunx create-turbo@latest -e with-vite
    ```
  </Tab>
</PackageManagerTabs>

Adding a Vite application to an existing repository [#adding-a-vite-application-to-an-existing-repository]

<CopyPrompt
  title="Set up Vite in an existing monorepo"
  prompt={
  "Set up a Vite application in this Turborepo.\n1) Create the app\n2) Integrate with the rest of the monorepo\n3) Update turbo.json if needed\n\nWalk me through each step."
}
/>

Use [`npm create vite`](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) to set up a new Vite application in a package. From the root of your repository, run:

<PackageManagerTabs>
  <Tab value="pnpm">
    ```bash title="Terminal"
    pnpm create vite@latest apps/my-app
    ```
  </Tab>

  <Tab value="yarn">
    ```bash title="Terminal"
    yarn create vite@latest apps/my-app
    ```
  </Tab>

  <Tab value="npm">
    ```bash title="Terminal"
    npm create vite@latest apps/my-app
    ```
  </Tab>

  <Tab value="bun">
    ```bash title="Terminal"
    bun create vite@latest apps/my-app
    ```
  </Tab>
</PackageManagerTabs>

Integrating with your repository [#integrating-with-your-repository]

To add [Internal Packages](/docs/core-concepts/internal-packages) to your new application, install them into the app with your package manager:

<PackageManagerTabs>
  <Tab value="pnpm">
    ```diff title="./apps/my-app/package.json"
    {
      "name": "my-app",
      "dependencies": {
    +   "@repo/ui": "workspace:*"
      }
    }
    ```
  </Tab>

  <Tab value="yarn">
    ```diff title="./apps/my-app/package.json"
    {
      "name": "my-app",
      "dependencies": {
    +   "@repo/ui": "*"
      }
    }
    ```
  </Tab>

  <Tab value="npm">
    ```diff title="./apps/my-app/package.json"
    {
     "name": "my-app",
      "dependencies": {
    +   "@repo/ui": "*"
      }
    }
    ```
  </Tab>

  <Tab value="bun">
    ```diff title="./apps/my-app/package.json"
    {
     "name": "my-app",
      "dependencies": {
    +   "@repo/ui": "workspace:*"
      }
    }
    ```
  </Tab>
</PackageManagerTabs>

Make sure to run your package manager's install command. You also may need to update `scripts` in `package.json` to fit your use case in your repository.

Customizing tasks [#customizing-tasks]

By default, the new application will use the tasks defined in the root `turbo.json`. If you'd like to configure tasks differently for the new application, use [Package Configurations](/docs/reference/package-configurations).

Microfrontends [#microfrontends]

When using Vite with [Turborepo's microfrontends](/docs/guides/microfrontends), make sure to set the `base` property for child applications. This ensures the assets like images and CSS will be routed to the correct application.

```ts title="./apps/my-app/vite.config.ts"

export default defineConfig({
  base: "/admin",
});
```

---

[View full sitemap](/sitemap.md)