We can use inertia.js , but sometimes we just need to keep it simple. This also works for React and others.

Folder Structure

# only an example

resources ├ js │ ├ app.js │ ├ App.vue │ ├ pages │ │ └ Dashboard.vue │ ├ components │ │ └ ui │ └ layouts └ views └ app.blade.php

# Flow

Laravel route ↓ controller returns Blade ↓ Blade sets PAGE + PROPS ↓ Vue loads correct page component ↓ component receives props

Enter fullscreen mode

Exit fullscreen mode

Steps

Installation

# laravel laravel new example-app

# vue npm install vue npm install @vitejs/plugin-vue --save-dev

Enter fullscreen mode

Exit fullscreen mode

Vite

# vite . config .…