How to Use Laravel 12 API with Vue.js 3

Laravel and Vue.js are a powerful combination for building modern web applications. Laravel 12 is a PHP framework that excels at building robust backends, while Vue.js 3 is a progressive JavaScript framework that allows you to build interactive, dynamic front-end applications.

In this tutorial, we will show you how to use Laravel 12 to create an API backend and then use Vue.js 3 to interact with that API. This setup will allow you to create a full-stack application, where the frontend (Vue.js) interacts with the backend (Laravel API) seamlessly.

Step-by-Step Guide to Using Laravel 12 API with Vue.js 3

Step 1: Install Laravel 12

First, create a new Laravel project if you haven’t already.

composer create-project --prefer-dist laravel/laravel laravel-vue-api

Step 2: Set Up Database and .env File

Configure your database settings in the .env file. For example:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database_name
DB_USERNAME=your_database_username
DB_PASSWORD=your_database_password

Step 3: Set Up API Routes in Laravel

Next, you will need to create the API routes in Laravel. Open routes/api.php and add a simple API route. For example:

use App\Http\Controllers\TaskController;

Route::get('tasks', [TaskController::class, 'index']);
Route::post('tasks', [TaskController::class, 'store']);

Here, we are setting up two routes:

GET /tasks: To get a list of tasks.
POST /tasks: To create a new task.

Step 4: Create TaskController

Now, let's create a controller that will handle the API requests. Run the following Artisan command to generate the TaskController

php artisan make:controller TaskController

In TaskController.php, implement the index and store methods as follows:

namespace App\Http\Controllers;

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

class TaskController extends Controller
{
    // Get all tasks
    public function index()
    {
        return Task::all();
    }

    // Store a new task
    public function store(Request $request)
    {
        $task = Task::create([
            'name' => $request->name,
            'description' => $request->description,
        ]);
        return response()->json($task, 201);
    }
}

Make sure the Task model and migration file exist. For this example, a simple tasks table with name and description will suffice.

Run the migration:

php artisan make:model Task -m

In the migration file (database/migrations/xxxx_xx_xx_create_tasks_table.php), define the schema:

public function up()
{
    Schema::create('tasks', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->text('description');
        $table->timestamps();
    });
}

Step 5: Install Vue.js 3

To get started with Vue.js in your Laravel project, you need to install Vue 3.

Install the required NPM packages for Vue.js:

npm install vue@next vue-loader@next @vitejs/plugin-vue

Install Laravel Vite to manage frontend assets. Run:

composer require innologica/laravel-vite

Then, publish the Vite configuration:

php artisan vendor:publish --provider="InnoVait\Vite\ViteServiceProvider"

Install NPM dependencies:

npm install

Step 6: Set Up Vue.js Component

Create a Vue component for managing tasks. Start by creating a new Vue component file.

Create a file at resources/js/components/TaskComponent.vue:

<template>
  <div>
    <h2>Task List</h2>
    <ul>
      <li v-for="task in tasks" :key="task.id">
        {{ task.name }} - {{ task.description }}
      </li>
    </ul>
    <form @submit.prevent="addTask">
      <input v-model="taskName" placeholder="Task name" required>
      <input v-model="taskDescription" placeholder="Task description" required>
      <button type="submit">Add Task</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tasks: [],
      taskName: '',
      taskDescription: ''
    };
  },
  mounted() {
    this.fetchTasks();
  },
  methods: {
    fetchTasks() {
      fetch('http://localhost/api/tasks')
        .then((response) => response.json())
        .then((data) => {
          this.tasks = data;
        });
    },
    addTask() {
      const task = {
        name: this.taskName,
        description: this.taskDescription,
      };

      fetch('http://localhost/api/tasks', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(task),
      })
        .then((response) => response.json())
        .then((data) => {
          this.tasks.push(data);
          this.taskName = '';
          this.taskDescription = '';
        });
    }
  }
};
</script>

Step 7: Use Vue Component in Laravel

Now, use the Vue component in the main Laravel view.

Open resources/js/app.js and add the following to import and register the TaskComponent:

import { createApp } from 'vue';
import TaskComponent from './components/TaskComponent.vue';

createApp(TaskComponent).mount('#app');

In resources/views/welcome.blade.php, add the following to mount the Vue component:

<div id="app"></div>
<script src="{{ mix('js/app.js') }}"></script>

Step 8: Compile Assets

Compile your Vue components with the following command:

npm run dev

Now, visit http://localhost and you should see your Vue.js 3 frontend displaying a list of tasks from the Laravel API. You can add tasks through the form, and they will be displayed in real-time.

Conclusion

In this tutorial, we have demonstrated how to set up a Laravel 12 API and connect it to a Vue.js 3 frontend. We used Laravel to build a simple API with CRUD operations and then built a Vue component to interact with the API.

This combination allows you to build modern web applications that have a powerful backend and a dynamic frontend, providing a smooth user experience.