# Vite Vue Installation

> **Info:** Vue 3.5 support is in public beta. It includes Primitive adapters and editable Styled components.
APIs can change during the `0.x` release series. Report beta issues through the
[Starwind UI issue tracker](https://github.com/starwind-ui/starwind-ui/issues).

This guide covers Vue 3.5 or newer in a Vite application.

## Requirements

Use the official Vue Vite plugin, an object-form `defineConfig({ ... })` config, `src/App.vue`,
and a `src/main.ts` or `src/main.js` entry. Follow the starter's Node.js requirements.

## Create a Vite Vue Project

Use the [official Vue starter](https://vuejs.org/guide/quick-start.html). Choose TypeScript and
name the project `my-app`. Skip this step for an existing project.

```bash
npm create vue@latest
```

Enter the project and install its dependencies:

```bash
cd my-app
npm install
```

## Initialize Starwind

```bash
npx starwind@latest init --framework vue --defaults
```

Starwind installs the Vue beta adapter and configures Tailwind, the `@/*` alias, and a stylesheet

| Purpose | Path |
| --- | --- |
| Styled components | `src/components/starwind` |
| Shared utilities | `src/lib/utils` |
| Starwind stylesheet | `src/styles/starwind.css` |

## Add and Render Button

```bash
npx starwind@latest add button
```

```vue title="src/App.vue"
<script setup lang="ts">
import { Button } from "@/components/starwind/button";
</script>

<template>
  <Button>Hello from Vue</Button>
</template>
```

## Framework Wiring

For manual setup, complete the [shared setup](/docs/getting-started/manual-setup/) with the Vue
adapter. Preserve any existing plugins when adding Tailwind and the alias:

```ts title="vite.config.ts"
import { fileURLToPath } from "node:url";
import tailwindcss from "@tailwindcss/vite";
import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [vue(), tailwindcss()],
  resolve: {
    alias: { "@": fileURLToPath(new URL("./src", import.meta.url)) },
  },
});
```

Add the matching `"@/*": ["./src/*"]` paths entry in `tsconfig.app.json` and import the stylesheet:

```ts title="src/main.ts"
import "./styles/starwind.css";
```

Follow [Vue dark mode setup](/docs/getting-started/dark-mode/#vue-beta) to apply the saved theme
before paint and connect the theme controller.

## Support Boundaries

Automatic setup expects a static Vite config with a plugins array. Follow the manual wiring above
when a custom config needs edits. Vue Router within a Vite app uses this guide.

## Next Steps

Select the Vue tab on component examples. See [Dialog](/docs/components/dialog/) for controlled
state and [Input](/docs/components/input/) for form binding. The Styled Image component is Astro-only.