nuxt 3 data fetching using laravel 9 api example

In this section we will connect laravel 9 api with nuxt js 3. We will fetch laravel api in nuxt 3 using useFetch and useAsyncData.


Setup Laravel 9 Api

Create laravel project and connect with database

composer create-project laravel/laravel laravel-api

Create Fake Data and Migrate Seeder

DatabaseSeeder.php

<?php

namespace Database\Seeders;

use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
        \App\Models\User::factory(10)->create();
    }
}


Migrate the database with seeder.

php artisan migrate:fresh --seed  


Create Api Controller and Api Route

Run below command to create user Api controller.

php artisan make:controller Api/UserController


app/Http/Controllers/Api/UserController.php

<?php

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use App\Models\User;
use Illuminate\Http\Request;

class UserController extends Controller
{
    public function index()
    {
        $users = User::all();

        // return $users;
        return response()->json($users);
    }
}


Create users api route.

routes/api.php

<?php

use App\Http\Controllers\Api\UserController;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

Route::middleware(['auth:sanctum'])->get('/user', function (Request $request) {
    return $request->user();
});
Route::get('/users',[UserController::class,'index']);

Run Laravel server and leave it.

php artisan serve


Nuxt 3 Data Fetching Using Laravel 9 Api

Create new nuxt 3 app.

npx nuxi init frontend  

After install follow below instructions

ℹ cloned nuxt/starter#v3 to /Nuxt JS/frontend              15:42:10
                                        15:42:10
 ✨ Your phenomenal Nuxt project is just created! Next steps:

 📁 cd jjj                                   15:42:10

 💿 Install dependencies with npm install or yarn install or pnpm install --shamefully-hoist

 🚀 Start development server with npm run dev or yarn dev or pnpm run dev


Fetch laravel Api data in Nuxt 3

There is two way you can fetch api data in nuxt js 3. You can use useAsyncData or useFetch.

1.Fetch laravel api data using useAsyncData in nuxt 3.

Remove <NuxtWelcome /> in app.vue file.

app.vue

<template>
  <div>
    <h1>Laravel Api with Nuxt 3 Fetch Api Data</h1>
    <ul v-for="user in users" :key="user.id">
      <li>Id: {{ user.id }}</li>
      <li>Name: {{ user.name }}</li>
      <li>Email: {{ user.email }}</li>
    </ul>
  </div>
</template>
<script setup>
const { data: users } = await useAsyncData('users', () =>
  $fetch(`http://localhost:8000/api/users`)
);
</script>


2.Fetch laravel api data using useFetch in nuxt 3.

app.vue

<template>
  <div>
    <h1>Laravel Api with Nuxt 3 Fetch Api Data</h1>
    <ul v-for="user in users" :key="user.id">
      <li>Id: {{ user.id }}</li>
      <li>Name: {{ user.name }}</li>
      <li>Email: {{ user.email }}</li>
    </ul>
  </div>
</template>
<script setup>
const { data: users } = await useFetch(`http://localhost:8000/api/users`);
</script>

http://localhost:3000/

nuxt 3 fetch data with laravel 9 api

nuxt 3 fetch data with laravel 9 api


If data is not showing then restart the nuxt 3 server. and next terminal run laravel app.

npm run dev


Read Also

Laravel 9 Add Simple Sidebar with Tailwind CSS Example

How to Use Carousel Slider in Laravel 9 Example

Laravel 9 Posts with Tags Many to Many Relationships Example

Laravel 9 Insert Category in Posts CRUD Example

How to Use Ckeditor 5 in Laravel 9 Vite with Tailwind CSS

Laravel 9 Simple Image Upload in Ckeditor 5 Example

Laravel 9 Flash Message Timeout and Hide Message Example

Install & Setup Markdown Editor in Laravel 9

Laravel 9 Image Upload with Preview using Tailwind CSS & Alpine JS

Laravel 9 with Tailwind CSS Form Validation Example

Laravel 9 Backend Api Connect with Vue 3 Using Axios Example

Laravel 9 Authentication with Next js Example

Laravel 9 Sanctum Authentication with Nuxt JS Example

Laravel 9 Simple Search with Pagination Example

Laravel 9 Install Setup TALL(Tailwind, Alpinejs, Livewire) Admin Panel

How to Fix and Clean Code Style in laravel 9

Laravel 9 Image File Upload Example

3 Way to Create Slug in Laravel 9 without Package

How to Add Dark Mode in Laravel 9 with Tailwind CSS