Using Vue in Laravel Without Inertia

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 Steps Installation # laravel laravel new example-app # vue npm install vue npm install @vitejs/plugin-vue --save-dev 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(),