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/
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