Laravel 12 & Vue3 Integration: How to Build API Calls for Dynamic Output

In this beginner-friendly guide, we'll walk through setting up a new Laravel 12 project with Vue 3 and create a simple API call. Perfect for developers starting their full-stack journey!

Prerequisites

PHP 8.2+
Node.js 18+
Composer installed
Basic knowledge of PHP and JavaScript

Step 1: Install Laravel 12

Create a new Laravel project using Composer:

composer create-project --prefer-dist laravel/laravel laravel-vue-demo
cd laravel-vue-demo

Step 2: Install Vue 3

Install Vue 3 and its dependencies via npm:

npm install vue@next @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/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

Step 3: Create Vue Component

Create resources/js/components/PostList.vue:

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const posts = ref([]);

onMounted(async () => {
    try {
        const response = await axios.get('/api/posts');
        posts.value = response.data;
    } catch (error) {
        console.error('Error fetching posts:', error);
    }
});
</script>

<template>
    <div>
        <h2>Latest Posts</h2>
        <ul v-if="posts.length">
            <li v-for="post in posts" :key="post.id">
                {{ post.title }}
            </li>
        </ul>
        <p v-else>Loading posts...</p>
    </div>
</template>

Step 4: Set Up Laravel API Route

Add a test route in routes/api.php:

<?php

use Illuminate\Support\Facades\Route;

Route::get('/posts', function () {
    return response()->json([
        ['id' => 1, 'title' => 'Hello Vue!'],
        ['id' => 2, 'title' => 'Welcome to Laravel!'],
    ]);
});

Step 5: Integrate Vue with Laravel

1. Update resources/js/app.js:

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

const app = createApp({});
app.component('PostList', PostList);
app.mount('#app');

2. Modify resources/views/welcome.blade.php:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Laravel + Vue 3 Demo</title>
    @vite(['resources/js/app.js'])
</head>
<body>
    <div id="app">
        <h1>Laravel + Vue 3 Demo</h1>
        <post-list></post-list>
    </div>
</body>
</html>

Step 6: Run the Application

Start both servers in separate terminals:

For Laravel: php artisan serve (defaults to http://localhost:8000).
For Vue/Vite: npm run serve in the front-end directory (defaults to http://localhost:8080).

Visit http://localhost:8080 in your browser. You should see the list of posts (initially empty) and your Vue component making an API call!

Troubleshooting Tips

Ensure CORS is configured if accessing external APIs.
Check your browser console for errors.
Run npm install if dependencies are missing.
Clear cache with php artisan optimize:clear if changes are not appearing.

Next Steps

Add loading states to your components.
Implement robust error handling.
Create a database-driven API for posts.
Explore Vue Router for single-page application features.

Congratulations! You've just created your first Laravel + Vue 3 application with API integration. Happy coding! 🚀