cuplikan Terbaik: Kembangkan Aplikasi SPA dengan Laravel 12 dan Vue 3

1. Pengantar SPA dengan Laravel 12 dan Vue 3

Single Page Application (SPA) adalah aplikasi web yang memuat satu halaman HTML dan memperbarui konten secara dinamis tanpa reload halaman penuh. Laravel 12 sebagai backend modern dan Vue 3 sebagai frontend reactive framework sangat cocok untuk membangun SPA yang cepat dan responsif.

Laravel 12 menyediakan API yang kuat dan mudah dikembangkan, sementara Vue 3 menawarkan komposisi API dan performa tinggi untuk membangun UI yang interaktif.

Diagram arsitektur SPA menggunakan Laravel 12 sebagai backend API dan Vue 3 sebagai frontend reactive framework

2. Persiapan Lingkungan Pengembangan

Sebelum mulai membangun aplikasi, siapkan tools berikut:

PHP 8.2+ dan Composer untuk Laravel 12, unduh dari getcomposer.org
Laravel Installer dengan perintah: composer global require laravel/installer
Node.js dan npm untuk Vue 3, unduh dari nodejs.org
Vite sebagai build tool modern yang sudah default di Laravel 12
Editor kode seperti VS Code dengan ekstensi PHP dan Vue

Setelah semua terpasang, kita siap membuat proyek Laravel dan Vue.

3. Membangun Backend dengan Laravel 12

Langkah-langkah membuat backend API dengan Laravel 12:

Membuat Proyek Laravel Baru
Jalankan perintah di terminal:
```
laravel new laravel-spa-api
```
Menjalankan Server Laravel
Masuk ke folder proyek dan jalankan:
```
cd laravel-spa-api
php artisan serve
```
Server berjalan di http://localhost:8000 secara default.

Membuat Model dan Migrasi
Contoh membuat model Product dengan migrasi:

php artisan make:model Product -m

Edit file migrasi di


       database/migrations/xxxx_xx_xx_create_products_table.php

:

public function up()
{
    Schema::create('products', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->decimal('price', 15, 2);
        $table->timestamps();
    });
}

Jalankan migrasi:

php artisan migrate

Membuat Controller API
Buat controller resource:

php artisan make:controller Api/ProductController --api

Edit


       app/Http/Controllers/Api/ProductController.php

:

namespace App\Http\Controllers\Api;

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

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

    public function store(Request $request)
    {
        $validated = $request->validate([
            'name' => 'required|string|max:255',
            'price' => 'required|numeric',
        ]);
        $product = Product::create($validated);
        return response()->json($product, 201);
    }

    public function show(Product $product)
    {
        return $product;
    }

    public function update(Request $request, Product $product)
    {
        $validated = $request->validate([
            'name' => 'sometimes|required|string|max:255',
            'price' => 'sometimes|required|numeric',
        ]);
        $product->update($validated);
        return response()->json($product);
    }

    public function destroy(Product $product)
    {
        $product->delete();
        return response()->noContent();
    }
}

Menambahkan Route API
Edit file


       routes/api.php

:

use App\Http\Controllers\Api\ProductController;

Route::apiResource('products', ProductController::class);

Testing API
Gunakan Postman atau browser untuk mengakses endpoint: http://localhost:8000/api/products dan coba operasi CRUD.

Ilustrasi pengembangan backend Laravel 12 dengan kode di layar laptop

4. Membangun Frontend dengan Vue 3

Kita akan membuat frontend SPA menggunakan Vue 3 dan Vite yang sudah terintegrasi dengan Laravel 12.

Membuat Proyek Vue 3 dengan Vite
Di dalam folder Laravel, jalankan:
```
npm create vite@latest frontend -- --template vue
```
Masuk ke folder frontend dan install dependencies:
```
cd frontend
npm install
```
Menjalankan Server Development Vue
Jalankan:
```
npm run dev
```
Aplikasi akan berjalan di http://localhost:5173 (default Vite).

Membuat Service API dengan Axios
Install Axios:

npm install axios

Buat file


       src/services/productService.js

:

import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'http://localhost:8000/api',
  headers: {
    'Content-Type': 'application/json',
  },
});

export default {
  getProducts() {
    return apiClient.get('/products');
  },
  getProduct(id) {
    return apiClient.get(`/products/${id}`);
  },
  addProduct(product) {
    return apiClient.post('/products', product);
  },
  updateProduct(id, product) {
    return apiClient.put(`/products/${id}`, product);
  },
  deleteProduct(id) {
    return apiClient.delete(`/products/${id}`);
  },
};

Membuat Komponen Daftar Produk
Buat file


       src/components/ProductList.vue

:

<template>
  <div class="p-4">
    <h3 class="text-2xl font-semibold mb-4 text-green-700">Daftar Produk</h3>

    <div v-if="loading" class="text-green-600">Memuat data...</div>
    <div v-if="error" class="text-red-600">{{ error }}</div>

    <ul v-if="!loading && !error" class="space-y-3">
      <li
        v-for="product in products"
        :key="product.id"
        class="border rounded p-3 bg-white shadow-sm flex justify-between items-center"
      >
        <div>
          <h4 class="font-semibold text-lg">{{ product.name }}</h4>
          <p class="text-gray-600">Harga: Rp {{ product.price.toLocaleString() }}</p>
        </div>
        <button
          @click="deleteProduct(product.id)"
          class="text-red-600 hover:text-red-800"
          title="Hapus Produk"
        >
          <i class="fas fa-trash-alt"></i>
        </button>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import productService from '../services/productService';

const products = ref([]);
const loading = ref(true);
const error = ref('');

const loadProducts = async () => {
  loading.value = true;
  error.value = '';
  try {
    const response = await productService.getProducts();
    products.value = response.data;
  } catch (e) {
    error.value = 'Gagal memuat data produk.';
  } finally {
    loading.value = false;
  }
};

const deleteProduct = async (id) => {
  try {
    await productService.deleteProduct(id);
    products.value = products.value.filter((p) => p.id !== id);
  } catch (e) {
    alert('Gagal menghapus produk.');
  }
};

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

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

Menambahkan Komponen ke App.vue
Edit


       src/App.vue

:

<template>
  <div class="min-h-screen bg-gray-50">
    <ProductList />
  </div>
</template>

<script setup>
import ProductList from './components/ProductList.vue';
</script>

<style>
/* Global styles jika perlu */
</style>

Ilustrasi pengembangan frontend Vue 3 dengan kode dan tampilan daftar produk di layar laptop

5. Integrasi Backend dan Frontend SPA

Agar frontend Vue 3 dapat berkomunikasi dengan backend Laravel 12, pastikan:

Konfigurasi CORS di Laravel
Edit file app/Http/Middleware/HandleCors.php atau gunakan package fruitcake/laravel-cors dan atur agar http://localhost:5173 (alamat Vite dev server) diizinkan.
Pastikan Base URL API di Axios
Di src/services/productService.js , baseURL harus mengarah ke http://localhost:8000/api .
Menjalankan Kedua Server
Jalankan backend Laravel dengan php artisan serve dan frontend Vue dengan npm run dev . Frontend akan mengambil data dari backend secara real-time.

Ilustrasi integrasi antara backend Laravel dan frontend Vue 3 dengan panah koneksi data

6. Deployment Aplikasi SPA Laravel & Vue

Setelah aplikasi selesai, berikut beberapa opsi deployment:

Deployment Backend Laravel
Gunakan layanan hosting seperti Laravel Forge, DigitalOcean, atau shared- hosting yang mendukung PHP 8.2+.
Deployment Frontend Vue
Build frontend dengan npm run build lalu deploy folder dist/ ke hosting statis seperti Netlify, Vercel, atau layanan CDN.
Deployment Terpadu
Anda juga bisa menggabungkan frontend ke dalam Laravel dengan menyalin hasil build Vue ke folder public/ Laravel dan mengatur routing agar SPA berjalan lancar.