Connecting Laravel 12 API with Nuxt 3: A Beginner-Friendly Full-Stack Guide

In this blog post, we’ll walk through building a simple full-stack app by creating an API with Laravel 12 and consuming it using Nuxt 3—the latest version of the powerful Vue.js framework. Whether you're a Laravel backend developer looking to expand into frontend or a Nuxt user wanting to connect with a robust backend, this guide is for you.

🧱 Tech Stack Overview

• Laravel 12: PHP framework for building APIs and backend logic.
• Nuxt 3: A full-stack framework for building Vue apps with server-side rendering and API support.

🎯 Goal

We'll build a simple Post API using Laravel and display the posts in a Nuxt 3 frontend.

🔧 Step 1: Set Up Laravel 12 Backend

✅ Prerequisites

Make sure the following are installed:

• PHP >= 8.2
• Composer
• MySQL (or SQLite/PostgreSQL)
• Node.js (for frontend builds)

📦 Install Laravel 12

composer create-project --prefer-dist laravel/laravel:^12 laravel-api
cd laravel-api
php artisan install:api

This installs Laravel with API scaffolding, including api.php routes and Laravel Sanctum.

⚙️ Configure .env

Set up your database in .env:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_api
DB_USERNAME=root
DB_PASSWORD=

Then run the migrations:

php artisan migrate

🧪 Step 2: Create a Simple API for Posts

🧱 Create Model, Migration, and Factory

php artisan make:model Post -mf

Update the migration file:

Schema::create('posts', function (Blueprint $table) {
    $table->id();
    $table->string('title');
    $table->text('content');
    $table->timestamps();
});

Run the migration:

php artisan migrate

🧰 Create API Controller

php artisan make:controller PostController --api

Update the controller:

use App\Models\Post;

class PostController extends Controller
{
    public function index()
    {
        return Post::all();
    }
}

🌐 Define API Routes

In routes/api.php:

use App\Http\Controllers\PostController;

Route::get('/posts', [PostController::class, 'index']);

You can also use:

Route::apiResource('posts', PostController::class);

🔌 Step 3: Test Laravel API

Run the Laravel dev server:

php artisan serve

Open your browser or Postman and visit:

http://127.0.0.1:8000/api/posts

You should see an empty array or your list of posts.

🌍 Step 4: Set Up Nuxt 3 Frontend

🚀 Install Nuxt 3

npx nuxi init nuxt-app
cd nuxt-app
npm install

This scaffolds a Nuxt 3 project using Vue 3.

🔐 Configure Environment Variables

Create a .env file:

NUXT_PUBLIC_API_BASE_URL=http://127.0.0.1:8000/api

Then update your nuxt.config.ts:

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE_URL
    }
  }
})

📥 Step 5: Fetch Laravel API in Nuxt 3

Create or edit pages/index.vue:

<script setup lang="ts">
const config = useRuntimeConfig()
const posts = await $fetch('/posts', {
  baseURL: config.public.apiBase
})
</script>

<template>
  <div class="p-6">
    <h1 class="text-2xl font-bold mb-4">Posts</h1>
    <ul class="space-y-4">
      <li v-for="post in posts" :key="post.id" class="p-4 border rounded-lg">
        <h2 class="text-xl font-semibold">{{ post.title }}</h2>
        <p>{{ post.content }}</p>
      </li>
    </ul>
  </div>
</template>

✅ Final Result

You now have:

• A Laravel 12 API at http://127.0.0.1:8000/api/posts
• A Nuxt 3 frontend displaying post data from the API

🛠️ Bonus: Using Axios (Optional)

Install Axios:

npm install @nuxtjs/axios

Enable it in nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxtjs/axios'],
  axios: {
    baseURL: process.env.NUXT_PUBLIC_API_BASE_URL
  }
})

Use it in your component:

const posts = await useNuxtApp().$axios.$get('/posts')

🧠 Conclusion

You've just created a clean full-stack app using Laravel 12 for the backend and Nuxt 3 for the frontend.

This setup is perfect for:

• Headless CMS solutions
• Full-stack SaaS apps
• SPAs powered by APIs