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 . js import { defineConfig } from ' vite ' ; import laravel from ' laravel-vite-plugin ' ; import vue from ' @vitejs/plugin-vue ' import path from ' path ' export default defineConfig ({ plugins : [ laravel ({ input : [ ' resources/css/app.css ' , ' resources/js/app.js ' ], refresh : true , }), vue (), ], }); Enter fullscreen mode Exit fullscreen mode Entry # resources \ js \ app .…