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! 🚀