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

Ajay Yadav

Transforming Ideas Into Digital Solutions

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

Ajay Yadav

Transforming Ideas Into Digital Solutions

Tags

Comments

Related Posts

Update `vite.config.js`:

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

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