How do I set up a REST API in Laravel for Vue.js components

Step 1: Install Laravel

1. Install Laravel using Composer:

bash
composer create-project --prefer-dist laravel/laravel project-name

Step 2: Create API Routes

1. Create a new file in the `routes/api.php` directory:

php
// routes/api.php

use Illuminate\Http\Request;
use App\Http\Controllers\ProductController;

Route::get('/products', [ProductController::class, 'index']);
Route::get('/products/{id}', [ProductController::class, 'show']);
Route::post('/products', [ProductController::class, 'store']);
Route::put('/products/{id}', [ProductController::class, 'update']);
Route::delete('/products/{id}', [ProductController::class, 'destroy']);

Step 3: Create API Controller

1. Create a new controller in the `app/Http/Controllers` directory:

php
// app/Http/Controllers/ProductController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Product;

class ProductController extends Controller
{
    public function index()
    {
        return Product::all();
    }

    public function show($id)
    {
        return Product::find($id);
    }

    public function store(Request $request)
    {
        $product = Product::create($request->all());
        return response()->json($product, 201);
    }

    public function update(Request $request, $id)
    {
        $product = Product::find($id);
        $product->update($request->all());
        return response()->json($product);
    }

    public function destroy($id)
    {
        Product::destroy($id);
        return response()->json(null, 204);
    }
}

Step 4: Create API Model

1. Create a new model in the `app/Models` directory:

php
// app/Models/Product.php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    protected $fillable = [
        'name',
        'description',
    ];
}

Step 5: Configure Axios in Vue.js

1. In your Vue.js component, import Axios and configure it to use the Laravel API:

javascript
// resources/assets/js/components/ProductList.vue

import axios from 'axios';

export default {
    props: ['resource'],
    data() {
        return {
            products: []
        }
    },
    created() {
        axios.get(this.resource)
            .then(response => {
                this.products = response.data;
            })
            .catch(error => {
                console.error(error);
            });
    }
}

Step 6: Use the API in Vue.js Component

1. Use the API in your Vue.js component to fetch data and display it:

javascript
// resources/assets/js/components/ProductList.vue

<template>
    <ul>
        <li v-for="product in products" v-text="product.name"></li>
    </ul>
</template>

<script>
    export default {
        props: ['resource'],
        data() {
            return {
                products: []
            }
        },
        created() {
            axios.get(this.resource)
                .then(response => {
                    this.products = response.data;
                })
                .catch(error => {
                    console.error(error);
                });
        }
    }
</script>

Step 7: Use the Component in Blade View

1. Use the Vue.js component in your Blade view:

php
// resources/views/welcome.blade.php

@extends('layouts.app')

@section('content')
    <div id="app">
        <product-list resource="{{ route('api.products') }}"></product-list>
    </div>
@endsection

By following these steps, you can set up a REST API in Laravel for Vue.js components.