Daftar Isi

1. Pengantar Laravel 12 & Vue 3
2. Persiapan Lingkungan Pengembangan
3. Membangun API dengan Laravel 12
4. Membangun SPA dengan Vue 3
5. Integrasi Laravel API dengan Vue SPA
6. Deployment dan Best Practices
7. Sumber Belajar dan Source Code

1. Pengantar Laravel 12 & Vue 3

Laravel 12 adalah framework PHP terbaru yang menawarkan kemudahan dalam membangun aplikasi backend yang scalable dan modern. Vue 3 adalah framework JavaScript progresif yang sangat cocok untuk membangun Single Page Application (SPA) dengan performa tinggi dan pengalaman pengguna yang interaktif.

Dalam ebook ini, Anda akan belajar bagaimana menggabungkan kekuatan Laravel 12 sebagai backend API dan Vue 3 sebagai frontend SPA untuk membangun aplikasi modern yang responsif dan mudah dikembangkan.

2. Persiapan Lingkungan Pengembangan

Sebelum memulai, pastikan Anda sudah menyiapkan lingkungan pengembangan yang mendukung Laravel 12 dan Vue 3.

1. Instalasi PHP 8.2+ dan Composer untuk manajemen paket Laravel.
2. Node.js 18+ dan npm/yarn untuk mengelola dependensi frontend Vue 3.
3. Database MySQL atau PostgreSQL untuk menyimpan data aplikasi.
4. Editor kode seperti VSCode dengan ekstensi Laravel dan Vue.

Setelah semua terpasang, Anda dapat membuat project Laravel baru dengan perintah:

composer create-project laravel/laravel:^12.0 kuasa-laravel-vue
      

Untuk Vue 3, Anda bisa menggunakan Vite yang sudah terintegrasi di Laravel 12 secara default.

3. Membangun API dengan Laravel 12

Laravel 12 memudahkan pembuatan API dengan fitur bawaan seperti routing, controller, dan resource API. Berikut langkah-langkah membangun API sederhana:

3.1 Membuat Model dan Migrasi

Contoh membuat model Post dengan migrasi:

php artisan make:model Post -m
      

Edit file migrasi di database/migrations/xxxx_xx_xx_create_posts_table.php :

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

Jalankan migrasi:

php artisan migrate
      

3.2 Membuat Controller API

Buat controller resource API:

php artisan make:controller Api/PostController --api
      

Contoh isi controller app/Http/Controllers/Api/PostController.php :

namespace App\Http\Controllers\Api;

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

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

    public function store(Request $request)
    {
        $validated = $request->validate([
            'title' => 'required|string|max:255',
            'content' => 'required|string',
        ]);
        $post = Post::create($validated);
        return response()->json($post, 201);
    }

    public function show(Post $post)
    {
        return $post;
    }

    public function update(Request $request, Post $post)
    {
        $validated = $request->validate([
            'title' => 'sometimes|required|string|max:255',
            'content' => 'sometimes|required|string',
        ]);
        $post->update($validated);
        return response()->json($post);
    }

    public function destroy(Post $post)
    {
        $post->delete();
        return response()->json(null, 204);
    }
}
      

3.3 Menambahkan Route API

Tambahkan route resource di routes/api.php :

use App\Http\Controllers\Api\PostController;

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

Sekarang API Anda sudah siap untuk diakses melalui endpoint /api/posts .

4. Membangun SPA dengan Vue 3

Vue 3 memungkinkan Anda membangun aplikasi frontend yang dinamis dan responsif. Berikut langkah-langkah membuat SPA sederhana:

4.1 Setup Vue 3 di Laravel dengan Vite

Laravel 12 sudah terintegrasi dengan Vite dan Vue 3. Pastikan Anda sudah menginstall dependensi frontend:

npm install
npm run dev
      

Edit resources/js/app.js untuk mengaktifkan Vue 3:

// resources/js/app.js
import { createApp } from 'vue';
import App from './App.vue';

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

4.2 Membuat Komponen Vue

Contoh komponen utama resources/js/App.vue :

<template>
  <div class="p-6 max-w-3xl mx-auto">
    <h1 class="text-3xl font-bold mb-6 text-indigo-700">Daftar Post</h1>
    <ul>
      <li v-for="post in posts" :key="post.id" class="mb-4 border-b pb-2">
        <h2 class="text-xl font-semibold">{{ post.title }}</h2>
        <p>{{ post.content }}</p>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const posts = ref([]);

async function fetchPosts() {
  const res = await fetch('/api/posts');
  posts.value = await res.json();
}

onMounted(() => {
  fetchPosts();
});
</script>

<style scoped>
/* Tambahkan style jika perlu */
</style>
      

5. Integrasi Laravel API dengan Vue SPA

Setelah backend API dan frontend SPA siap, saatnya mengintegrasikan keduanya agar aplikasi berjalan mulus.

5.1 Konfigurasi CORS

Pastikan konfigurasi CORS di Laravel mengizinkan request dari frontend. Edit app/Http/Middleware/HandleCors.php atau gunakan package fruitcake/laravel-cors .

5.2 Menghubungkan API di Vue

Gunakan fetch API atau axios untuk mengambil data dari Laravel API. Contoh sudah diberikan di komponen Vue sebelumnya.

5.3 Menambahkan Fitur CRUD di Vue

Anda bisa menambahkan form input, tombol edit dan hapus untuk mengelola data post melalui API.

<template>
  <div class="p-6 max-w-3xl mx-auto">
    <h1 class="text-3xl font-bold mb-6 text-indigo-700">Kelola Post</h1>

    <form @submit.prevent="addPost" class="mb-6">
      <input v-model="newTitle" placeholder="Judul" class="border p-2 rounded w-full mb-2" required />
      <textarea v-model="newContent" placeholder="Konten" class="border p-2 rounded w-full mb-2" required></textarea>
      <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700">Tambah Post</button>
    </form>

    <ul>
      <li v-for="post in posts" :key="post.id" class="mb-4 border-b pb-2 flex justify-between items-start">
        <div>
          <h2 class="text-xl font-semibold">{{ post.title }}</h2>
          <p>{{ post.content }}</p>
        </div>
        <button @click="deletePost(post.id)" class="text-red-600 hover:text-red-800">
          <i class="fas fa-trash-alt"></i>
        </button>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const posts = ref([]);
const newTitle = ref('');
const newContent = ref('');

async function fetchPosts() {
  const res = await fetch('/api/posts');
  posts.value = await res.json();
}

async function addPost() {
  const res = await fetch('/api/posts', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ title: newTitle.value, content: newContent.value }),
  });
  if (res.ok) {
    newTitle.value = '';
    newContent.value = '';
    fetchPosts();
  }
}

async function deletePost(id) {
  const res = await fetch(`/api/posts/${id}`, { method: 'DELETE' });
  if (res.ok) {
    fetchPosts();
  }
}

onMounted(() => {
  fetchPosts();
});
</script>
      

6. Deployment dan Best Practices

Setelah aplikasi selesai dikembangkan, berikut beberapa tips deployment dan best practices:

• Optimasi Build: Jalankan npm run build untuk frontend dan php artisan optimize untuk backend.
• Gunakan Environment Variables: Simpan konfigurasi sensitif di .env .
• Keamanan API: Gunakan autentikasi seperti Laravel Sanctum atau Passport untuk mengamankan API.
• Backup Database: Rutin lakukan backup data untuk menghindari kehilangan data.
• Monitoring dan Logging: Gunakan tools monitoring untuk memantau performa aplikasi.

7. Sumber Belajar dan Source Code

Berikut beberapa sumber belajar dan repository source code yang bisa Anda gunakan untuk memperdalam pemahaman:

• Dokumentasi Laravel 12
• Dokumentasi Vue 3
• Dokumentasi Vite
• Repository Laravel Official
• Repository Vue 3 Official
• Source Code Contoh Project (GitHub)
• Channel YouTube Laravel Indonesia
• Channel YouTube Vue Mastery