Laravel Route Link Call with Bootstrap Modal in Vue.js 3 – Step-by-Step Guide

 Learn how to create a dynamic Laravel route link call that opens a Bootstrap modal in Vue.js 3. Step-by-step guide to fetch and display data professionally with Vue 3, Axios, and Bootstrap. Perfect for modern web applications and SEO-friendly development. 

Laravel Route

use App\Models\User;
use Illuminate\Support\Facades\Route;

Route::get('/user/{id}', function ($id) {
    $user = User::find($id);
    if (!$user) return response()->json(['error' => 'User not found'], 404);

    return response()->json($user); // send data as JSON
})->name('user.show');

Vue 3 Component with Bootstrap Modal

<template>
  <div>
    <!-- Example Links -->
    <ul>
      <li v-for="user in users" :key="user.id">
        <a href="#" @click.prevent="showUser(user.id)">
          {{ user.name }}
        </a>
      </li>
    </ul>

    <!-- Bootstrap Modal -->
    <div class="modal fade" id="userModal" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">User Details</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body">
            <p v-if="userData">Name: {{ userData.name }}</p>
            <p v-if="userData">Email: {{ userData.email }}</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { ref } from "vue";

export default {
  setup() {
    const users = ref([
      { id: 1, name: "Milon" },
      { id: 2, name: "Khairul" },
    ]);

    const userData = ref(null);

    const showUser = async (id) => {
      try {
        const response = await axios.get(`/user/${id}`);
        userData.value = response.data;

        // Show Bootstrap Modal
        const modalEl = document.getElementById("userModal");
        const modal = new bootstrap.Modal(modalEl);
        modal.show();
      } catch (error) {
        alert("User not found!");
      }
    };

    return { users, showUser, userData };
  },
};
</script>