Laravel 12 Frontend Setup with Vue 3 and Bootstrap 5.3

This guide walks you through installing and configuring Laravel 12 with Vue 3 and Bootstrap 5.3 using Vite, in a modular and scalable way — perfect for multi-page apps and future API integration.

Prerequisites

Ensure you have the following:

Tool	Recommended Version
PHP	8.2 or newer
Composer	2.6+
Node.js	18+
npm	9+
Laravel CLI	`composer global require laravel/installer`

Step 1: Create a Laravel 12 Project

composer create-project laravel/laravel laravel12-vue-bootstrap

Step 2: Clean Default Installation

Delete default resources/css and resources/js/bootstrap.js:

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

Step 3: Install Vue 3 and Bootstrap

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

Step 4: Configure Vite

`vite.config.js`

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'resources/js'),
        },
    },
    server: {
        host: 'localhost',
        port: 5173,
    },
});

Step 5: Set up Dynamic Vue App Structure

Folder Structure

resources/
├── js/
│   ├── components/
│   │   └── ExampleComponent.vue
│   ├── layouts/
│   │   └── DefaultLayout.vue
│   ├── pages/
│   │   └── Home.vue
│   ├── router/
│   │   └── index.js
│   ├── app.js
│   └── App.vue

`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');

`resources/js/App.vue`

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

`resources/js/router/index.js`

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

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
];

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

export default router;

`resources/js/pages/Home.vue`

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

Step 6: Blade View Setup

`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>

Update Route

In routes/web.php:

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

Step 7: Build and Run

npm install
npm run dev
php artisan serve

Visit http://localhost:8000
You now have:

Laravel 12 backend
Vue 3 frontend
Vue Router enabled
Bootstrap 5.3 styling

Optional: Enable Vue Devtools

Add this to vite.config.js For better debugging:

define: {
  __VUE_OPTIONS_API__: true,
  __VUE_PROD_DEVTOOLS__: true
}

Summary

Feature	Enabled
Vue 3	✅
Vue Router	✅
Bootstrap 5.3	✅
Laravel 12 API	Ready to add
Vite Build Tool	✅
Dynamic Routing	✅

Next Steps

Add Axios for API integration
Implement CRUD with Laravel API
Set up Laravel Sanctum authentication

Let me know if you want a version that includes full CRUD functionality!

Souy Soeng

Laravel 12 Frontend Setup with Vue 3 and Bootstrap 5.3

Laravel 12 Frontend Setup with Vue 3 and Bootstrap 5.3

Prerequisites

Step 1: Create a Laravel 12 Project

Step 2: Clean Default Installation

Step 3: Install Vue 3 and Bootstrap

Step 4: Configure Vite

`vite.config.js`

Step 5: Set up Dynamic Vue App Structure

Folder Structure

`resources/js/app.js`

`resources/js/App.vue`

`resources/js/router/index.js`

`resources/js/pages/Home.vue`

Step 6: Blade View Setup

`resources/views/app.blade.php`

Update Route

Step 7: Build and Run

Optional: Enable Vue Devtools

Summary

Next Steps

Post a Comment

Souy Soeng