# Laravel Inertia 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 the official Laravel starter with Inertia Vue and Vue 3.5 or newer.

## Create a Laravel Project

Follow the [Laravel starter kit guide](https://laravel.com/docs/starter-kits) to install PHP,
Composer, and the Laravel installer. Create the app and select the Vue starter:

```bash
laravel new my-app
cd my-app
```

Install frontend dependencies with your package manager. Skip project creation for an existing app.

```bash
npm install
```

## Requirements

Use the starter's `resources/js/app.ts` or `.js`, `resources/css/app.css`, and static Vite config.
The CLI checks the Laravel, Inertia, Tailwind, and Vue plugins plus the `@/*` source alias.

## Initialize Starwind

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

Starwind installs the Vue beta adapter and imports its stylesheet from `resources/css/app.css`.
It preserves the host's shared theme foundation when the starter already provides one.

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

## Add and Render Button

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

Add this import and component to an existing Inertia page, such as the starter's welcome page.
Keep its existing page layout and route.

```vue title="resources/js/pages/Welcome.vue"
<script setup lang="ts">
import { Button } from "@/components/starwind/button";
</script>

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

## Framework Wiring

For manual setup, select Vue in the [shared setup](/docs/getting-started/manual-setup/) and use the
paths above. Keep the starter's Vite plugins and its `@` alias to `resources/js`. Add the stylesheet

```css title="resources/css/app.css"
@import "./starwind.css";
```

When the host stylesheet already owns Tailwind, animations, and theme tokens, preserve that
foundation and add Starwind's component styles and missing tokens. The CLI performs this merge for
the supported starter. Follow [Vue dark mode setup](/docs/getting-started/dark-mode/#vue-beta) when
connecting Starwind theme controls to your application.

## Support Boundaries

Automatic setup supports the official Inertia Vue starter with direct plugin calls and static
resource paths. Custom Vite plugin wrappers and resource layouts require manual setup.
Use the Laravel development command from the starter to serve the page.

## 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.