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

Keep the starter’s resources/js/app.ts or .js and resources/css/app.css. The CLI also checks that your Vite config includes the Laravel, Inertia, Tailwind, and Vue plugins and the @/* alias.

Install with the CLI

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 package and imports its stylesheet from resources/css/app.css. It keeps the starter’s existing theme styles.

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>

Optional: Set Up Dark Mode

To remember a visitor’s theme choice or follow their system setting, use the Vue dark mode guide. Add the theme script yourself after CLI setup.

Manual Setup

Follow these steps to set up Starwind by hand. You can also use them to check the files changed by the CLI.

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 resources/css/app.css:

@import "./starwind.css";

Keep the starter’s Tailwind and animation imports and existing theme variables. Add Starwind’s component styles and any missing variables from the shared setup guide. The CLI does this for you when you use the official starter. See Vue dark mode setup if you want to use Starwind’s theme controls.

Custom Project Setup

The CLI works with the official Inertia Vue starter’s folders and Vite config. If you moved the files or use custom functions to configure the plugins, follow the manual steps above. Use the Laravel development command from the starter to serve the page.

Next Steps

Choose the Vue tab on a component page to see its examples.