Laravel 12 Frontend Setup with Vue 3 and Bootstrap 5.3

This tutorial guides you through creating a modern, scalable frontend inside a Laravel 12 backend using Vue 3, Vue Router 4, and Bootstrap 5.3, all powered by Vite. This setup is ideal for multi-page apps and future API integration.

Prerequisites

Make sure you have these installed:

Tool	Recommended Version
PHP	8.2 or newer
Composer	2.6+
Node.js	18+
npm	9+
Laravel Installer	Optional

To install Laravel globally:

composer global require laravel/installer

Step 1: Create a New Laravel 12 Project

composer create-project laravel/laravel laravel-vue-app

Step 2: Clean Up Default Frontend Assets

Remove the default CSS and JS Bootstrap files:

rm -rf resources/css
rm resources/js/bootstrap.js

Step 3: Install Vue 3, Vue Router 4, Bootstrap 5.3, and Vite Vue Plugin

Install dependencies via npm:

npm install vue-router@4
npm install --save-dev @vitejs/plugin-vue
npm install bootstrap@5.3.3 @popperjs/core

Step 4: Configure Vite

Create or edit vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'; // If you're using Vue

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue(), // If you're using Vue
    ],
    build: {
        outDir: 'public/build', // This is the default and usually correct
    },
});

Step 5: Create Vue Application Structure

Create folders and files:

mkdir -p resources/js/{components,layouts,pages,router}
touch resources/js/app.js
touch resources/js/App.vue
touch resources/js/pages/Home.vue
touch resources/js/router/index.js

Step 6: Write Vue App Files

6.1 `resources/js/app.js`

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

createApp(App).use(router).mount('#app');

6.2 `resources/js/App.vue`

<template>
  <router-view />
</template>

6.3 `resources/js/router/index.js`

import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/pages/Home.vue';

const routes = [
  { path: '/', name: 'home', component: Home },
  // Add more routes here as needed
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

6.4 `resources/js/pages/Home.vue`

<template>
  <div class="container mt-5">
    <h1 class="text-primary">Welcome to Laravel 12 + Vue 3 + Bootstrap 5.3</h1>
    <p class="lead">This app uses Vue Router for dynamic routing and Bootstrap for styling.</p>
  </div>
</template>

Step 7: Set up Laravel Blade View

Create resources/views/app.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Laravel Vue App</title>
  @vite('resources/js/app.js')
</head>
<body>
  <div id="app"></div>
</body>
</html>

Step 8: Configure Laravel Route

Add the catch-all route to routes/web.php:

Route::get('/{any}', fn () => view('app'))->where('any', '.*');

This allows Laravel to serve your Vue app on every route, enabling Vue Router to handle client-side navigation.

Step 9: Install Node Modules

Run:

npm install

Step 10: Run Development Servers

Start Vite dev server:

npm run dev

Start Laravel backend:

php artisan serve

Step 11: Open Your Browser

Visit http://localhost:8000 to see your Vue-powered frontend inside Laravel!

Recommended Folder Structure

laravel-vue-app/
├── app/
├── bootstrap/
├── config/
├── database/
├── public/
├── resources/
│   ├── js/
│   │   ├── components/         # Reusable Vue components
│   │   │   └── ExampleComponent.vue
│   │   ├── layouts/            # Vue layouts like DefaultLayout.vue
│   │   │   └── DefaultLayout.vue
│   │   ├── pages/              # Vue pages for routing (Home.vue, etc.)
│   │   │   ├── Home.vue
│   │   │   └── Destination.vue
│   │   ├── router/             # Vue Router config files
│   │   │   └── index.js
│   │   ├── app.js              # Vue app bootstrap
│   │   └── App.vue             # Root Vue component with <router-view>
│   ├── views/
│   │   └── app.blade.php       # Laravel blade loading Vue SPA
│   └── css/                    # (Optional) Laravel CSS
├── routes/
│   └── web.php                 # Laravel routes
├── vite.config.js              # Vite config with Vue plugin and alias
├── package.json
├── composer.json
└── ...

What You Have Now

Feature	Status
Laravel 12 backend	✅
Vue 3 frontend	✅
Vue Router 4	✅
Bootstrap 5.3	✅
Vite build tool	✅
SPA routing	✅

Next Steps

Add Axios (npm install axios) for API calls
Build CRUD interfaces connected to the Laravel API
Implement Laravel Sanctum for authentication
Organize Vue components, layouts, and pages for maintainability

If you'd like a full CRUD tutorial or authentication setup, please don't hesitate to ask! I can also help prepare code snippets or markdown ready for your blog.

Happy coding! 🚀

Souy Soeng

Laravel 12 Frontend Setup with Vue 3 and Bootstrap 5.3

Prerequisites

Step 1: Create a New Laravel 12 Project

Step 2: Clean Up Default Frontend Assets

Step 3: Install Vue 3, Vue Router 4, Bootstrap 5.3, and Vite Vue Plugin

Step 4: Configure Vite

Step 5: Create Vue Application Structure

Step 6: Write Vue App Files

6.1 `resources/js/app.js`

6.2 `resources/js/App.vue`

6.3 `resources/js/router/index.js`

6.4 `resources/js/pages/Home.vue`

Step 7: Set up Laravel Blade View

Step 8: Configure Laravel Route

Step 9: Install Node Modules

Step 10: Run Development Servers

Step 11: Open Your Browser

Recommended Folder Structure

What You Have Now

Next Steps

Post a Comment

Souy Soeng

Laravel 12 Frontend Setup with Vue 3 and Bootstrap 5.3

Prerequisites

Step 1: Create a New Laravel 12 Project

Step 2: Clean Up Default Frontend Assets

Step 3: Install Vue 3, Vue Router 4, Bootstrap 5.3, and Vite Vue Plugin

Step 4: Configure Vite

Step 5: Create Vue Application Structure

Step 6: Write Vue App Files

6.1 resources/js/app.js

6.2 resources/js/App.vue

6.3 resources/js/router/index.js

6.4 resources/js/pages/Home.vue

Step 7: Set up Laravel Blade View

Step 8: Configure Laravel Route

Step 9: Install Node Modules

Step 10: Run Development Servers

Step 11: Open Your Browser

Recommended Folder Structure

What You Have Now

Next Steps

Post a Comment

6.1 `resources/js/app.js`

6.2 `resources/js/App.vue`

6.3 `resources/js/router/index.js`

6.4 `resources/js/pages/Home.vue`