Laravel 12 with Bootstrap 5 & Vue.js 3: Beginner-Friendly Tutorial

Want to build modern, responsive, and interactive web apps using Laravel 12, Bootstrap, and Vue.js? You’re in the right place!

This tutorial is designed for absolute beginners, and by the end of this post, you’ll be able to build a simple task manager using Laravel on the backend, Bootstrap for styling, and Vue.js for front-end interactivity.

📌 What You’ll Learn

✅ How to install and set up Laravel 12
✅ How to integrate Bootstrap 5 for beautiful UI
✅ How to use Vue 3 with Laravel and Vite
✅ How to build a simple CRUD Task Manager App

Let’s get started!

🛠️ Prerequisites

Make sure you have the following installed:

PHP 8.2 or higher
Composer (PHP package manager)
Node.js & npm (for front-end tools)
VS Code or any code editor
Basic command line knowledge

🚀 Step 1: Installing Laravel 12

Install Laravel using Composer:

composer global require laravel/installer

Create a new Laravel project:

laravel new laravel-vue-bootstrap
cd laravel-vue-bootstrap

Check Laravel version:

php artisan --version

You should see something like:

Laravel Framework 12.x.x

🎨 Step 2: Installing Bootstrap 5

Bootstrap gives you a ready-made responsive design system.

Install Bootstrap and Popper:

npm install bootstrap@5 @popperjs/core

Add Bootstrap in your JS file:

In resources/js/app.js, add:

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

Compile Assets with Vite:

npm run dev

That’s it! Bootstrap is now ready to use in your Laravel views.

⚙️ Step 3: Adding Vue 3 to Laravel

Laravel 12 works great with Vite and Vue 3.

Install Vue and its Vite plugin:

npm install vue@3 @vitejs/plugin-vue

Update vite.config.js:

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

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/js/app.js'],
      refresh: true,
    }),
    vue(),
  ],
});

Set up Vue in app.js:

import { createApp } from 'vue';
import ExampleComponent from './components/ExampleComponent.vue';

const app = createApp({});
app.component('example-component', ExampleComponent);
app.mount('#app');

Create a Vue Component:

Create resources/js/components/ExampleComponent.vue:

<template>
  <div class="alert alert-info">
    Hello from Vue!
  </div>
</template>

<script>
export default {
  name: 'ExampleComponent',
};
</script>

Use It in Blade View:

In resources/views/welcome.blade.php:

<div id="app">
  <example-component></example-component>
</div>

@vite('resources/js/app.js')

📝 Step 4: Build a Simple CRUD Task Manager

Let’s create a simple task manager where users can add and view tasks.

📄 1. Create the Task Model & Migration

php artisan make:model Task -m

In the migration file (database/migrations/xxxx_create_tasks_table.php):

$table->string('title');
$table->timestamps();

Run the migration:

php artisan migrate

🧠 2. Create Controller & Routes

Generate a controller:

php artisan make:controller TaskController

In routes/web.php:

use App\Http\Controllers\TaskController;

Route::get('/', [TaskController::class, 'index']);
Route::post('/tasks', [TaskController::class, 'store']);

📂 3. Controller Logic

In app/Http/Controllers/TaskController.php:

use App\Models\Task;
use Illuminate\Http\Request;

class TaskController extends Controller
{
    public function index() {
        $tasks = Task::all();
        return view('tasks', compact('tasks'));
    }

    public function store(Request $request) {
        $request->validate(['title' => 'required']);
        Task::create($request->only('title'));
        return redirect('/');
    }
}

💡 4. Blade + Vue Frontend

Create the Blade file: resources/views/tasks.blade.php

<!DOCTYPE html>
<html>
<head>
  <title>Task Manager</title>
  @vite('resources/js/app.js')
</head>
<body class="container py-5">

  <h2 class="mb-4">Vue Task Manager</h2>

  <div id="app">
    <task-app :initial-tasks='@json($tasks)'></task-app>
  </div>

</body>
</html>

🧩 5. Vue TaskApp Component

Create resources/js/components/TaskApp.vue:

<template>
  <div>
    <form @submit.prevent="addTask" class="mb-3">
      <div class="input-group">
        <input v-model="newTask" class="form-control" placeholder="Enter task">
        <button class="btn btn-primary">Add</button>
      </div>
    </form>

    <ul class="list-group">
      <li v-for="task in tasks" :key="task.id" class="list-group-item">
        {{ task.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['initialTasks'],
  data() {
    return {
      tasks: this.initialTasks,
      newTask: '',
    };
  },
  methods: {
    addTask() {
      fetch('/tasks', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({ title: this.newTask })
      })
      .then(() => {
        this.tasks.push({ title: this.newTask });
        this.newTask = '';
      });
    }
  }
};
</script>

Update app.js to register the new component:

import { createApp } from 'vue';
import TaskApp from './components/TaskApp.vue';

createApp({
  components: { TaskApp }
}).mount('#app');

✅ Final Output

Your Laravel app now:

Uses Bootstrap 5 for a beautiful layout
Has Vue 3 for interactivity
Implements basic task management (CRUD)