Build a Simple Laravel 12 + Vue 3 + Bootstrap 5 Project with Vue Router (Beginner Friendly)

Are you a beginner trying to combine Laravel, Vue.js, and Bootstrap in a single project? 🤔

You're in the right place! In this guide, we’ll build a small web application using:

✅ Laravel 12 (for backend)
✅ Vue 3 (for frontend)
✅ Bootstrap 5 (for styling)
✅ Vue Router (for navigation)

By the end of this tutorial, you'll have a neat and simple app with two pages — Home and About — and the knowledge to build more!

🔧 What You Need Before Starting

Make sure you have the following installed:

PHP 8.2+
Composer
Node.js (v16 or above)
npm
A code editor (like VS Code)

🛠️ Step 1: Create a New Laravel 12 Project

Let’s get started by creating a new Laravel app.

Open your terminal and run:

composer global require laravel/installer
laravel new laravel-vue-bootstrap
cd laravel-vue-bootstrap

Check the Laravel version:

php artisan --version
# You should see something like Laravel Framework 12.x.x

🎨 Step 2: Install Bootstrap 5

To make our app look nice and responsive, let’s install Bootstrap 5.

Run this command to install Bootstrap and Popper:

npm install bootstrap@5 @popperjs/core

Now, open resources/js/app.js and add:

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

This will include Bootstrap’s CSS and JavaScript.

Let’s compile our assets:

npm install
npm run dev

💡 Tip: You can test it by adding a Bootstrap button inside resources/views/welcome.blade.php.

<button class="btn btn-primary">Hello Bootstrap!</button>

⚙️ Step 3: Set Up Vue 3 with Vite

Laravel 12 uses Vite by default to handle assets, which is perfect for Vue.js.

Install Vue:

npm install vue@3 @vitejs/plugin-vue

Update `vite.config.js`:

Replace the content with this:

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

export default defineConfig({
  plugins: [
    vue(),
    laravel({
      input: ['resources/css/app.css', 'resources/js/app.js'],
      refresh: true,
    }),
  ],
  resolve: {
    alias: {
      vue: 'vue/dist/vue.esm-bundler.js',
    },
  },
});

Update `resources/js/app.js` to use Vue:

import './bootstrap';
import { createApp } from 'vue';
import router from './router'; // We’ll create this next!

const app = createApp({});
app.use(router);
app.mount('#app');

🌐 Step 4: Add Vue Router for Navigation

Let’s add routing to our Vue app so we can navigate between pages.

Install Vue Router:

npm install vue-router@4

Create a new file: `resources/js/router.js`

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('./components/Home.vue'),
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('./components/About.vue'),
  },
  {
    path: '/:pathMatch(.*)*',
    redirect: '/',
  },
];

export default createRouter({
  history: createWebHistory(),
  routes,
});

🧩 Step 5: Create Vue Components

We’ll now create two simple pages: Home and About.

Home.vue

Create a file: resources/js/components/Home.vue

<template>
  <div class="container mt-5">
    <h1 class="text-primary">🏠 Home Page</h1>
    <p>Welcome to our Laravel + Vue 3 project!</p>
    <router-link to="/about" class="btn btn-outline-primary">Go to About</router-link>
  </div>
</template>

<script setup></script>

About.vue

Create a file: resources/js/components/About.vue

<template>
  <div class="container mt-5">
    <h1 class="text-success">ℹ️ About Page</h1>
    <p>This is a demo using Vue Router inside Laravel.</p>
    <router-link to="/" class="btn btn-outline-success">Back to Home</router-link>
  </div>
</template>

<script setup></script>

🧱 Step 6: Connect Vue to Blade Template

Now we need to render our Vue app inside a Laravel Blade file.

Open resources/views/welcome.blade.php and replace everything with:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Laravel + Vue App</title>
  @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
  <div id="app"></div>
</body>
</html>

This will mount your Vue app into the <div id="app"></div>.

🚀 Step 7: Run Your Project

In your terminal, run:

php artisan serve
npm run dev

Now open your browser and go to:

http://localhost:8000

🎉 You should see your Home page with a button to go to the About page!

✅ What You Built

You’ve successfully created:

A Laravel 12 app with Vue 3
Styled using Bootstrap 5
Navigated with Vue Router
Two basic pages: Home and About

📘 What’s Next?

Here are some ideas to take this further:

Connect Laravel API routes and fetch data using Axios
Add more pages or a navbar for navigation
Use Laravel Breeze or Inertia.js for more advanced full-stack setups

💬 Final Words

Learning how Laravel and Vue.js work together gives you the power to build modern web apps easily. You’ve just taken your first step into full-stack development. Keep practicing and building more apps.

If you found this tutorial helpful, don’t forget to share it with your developer friends! 😊

🔧 What You Need Before Starting

🛠️ Step 1: Create a New Laravel 12 Project

🎨 Step 2: Install Bootstrap 5

⚙️ Step 3: Set Up Vue 3 with Vite

Install Vue:

Update `vite.config.js`:

Update `resources/js/app.js` to use Vue:

🌐 Step 4: Add Vue Router for Navigation

Install Vue Router:

Create a new file: `resources/js/router.js`

🧩 Step 5: Create Vue Components

Home.vue

About.vue

🧱 Step 6: Connect Vue to Blade Template

🚀 Step 7: Run Your Project

✅ What You Built

📘 What’s Next?

💬 Final Words

Laravel Mastery
Coaching Class Program

Daily Sessions

Real Projects

Best Practices

Career Support

Enrollment Closes In

Join the Program

Application Submitted!

What happens next?

Tags

Comments

Related Posts

Build a Simple Laravel 12 + Vue 3 + Bootstrap 5 Project with Vue Router (Beginner Friendly)

🔧 What You Need Before Starting

🛠️ Step 1: Create a New Laravel 12 Project

🎨 Step 2: Install Bootstrap 5

⚙️ Step 3: Set Up Vue 3 with Vite

Install Vue:

Update vite.config.js:

Update resources/js/app.js to use Vue:

🌐 Step 4: Add Vue Router for Navigation

Install Vue Router:

Create a new file: resources/js/router.js

🧩 Step 5: Create Vue Components

Home.vue

About.vue

🧱 Step 6: Connect Vue to Blade Template

🚀 Step 7: Run Your Project

✅ What You Built

📘 What’s Next?

💬 Final Words

Laravel Mastery Coaching Class Program

Daily Sessions

Real Projects

Best Practices

Career Support

Enrollment Closes In

Join the Program

Application Submitted!

What happens next?

Tags

Comments

Related Posts

Update `vite.config.js`:

Update `resources/js/app.js` to use Vue:

Create a new file: `resources/js/router.js`

Laravel Mastery
Coaching Class Program