Laravel Inertia Vue Installation

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 to install PHP, Composer, and the Laravel installer. Create the app and select the Vue starter:

laravel new my-app
cd my-app

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

pnpm install

npm install

yarn 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

pnpx starwind@latest init --framework vue --defaults

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

yarn dlx 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.

Add and Render Button

pnpx starwind@latest add button

npx starwind@latest add button

yarn dlx 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.

<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 and use the paths above. Keep the starter’s Vite plugins and its @ alias to resources/js. Add the stylesheet import to the host CSS entry:

@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 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 for controlled state and Input for form binding. The Styled Image component is Astro-only.