Pada kesempatan kali ini, kita akan belajar tentang membuat aplikasi e-commerce di framework laravel dengan bantuan Inertia Js dan VueJS. 

Langkah 1: Setup Proyek E-Commerce Laravel dengan Inertia.js dan Vue.js

1.1. Instalasi Laravel

Pastikan Composer sudah terinstall.

Jalankan perintah untuk membuat proyek Laravel:

composer create-project laravel/laravel ecommerce-inertia

Setelah itu, masuk ke direktori proyek:

cd ecommerce-inertia

1.2. Instalasi Inertia.js

Tambahkan package Inertia untuk Laravel:

composer require inertiajs/inertia-laravel

Tambahkan package Vue.js dan Inertia Client:

npm install @inertiajs/vue3

1.3. Konfigurasi Vue.js

Instal Vue.js dan dependencies lainnya:

npm install vue@3

Edit file vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue(),
    ],
});

Install plugin vue:

npm install @vitejs/plugin-vue

Buat file resources/js/app.js:

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';

createInertiaApp({
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .mount(el);
    },
});

Tambahkan file Vue.js pertama Anda di resources/js/Pages/Welcome.vue:

<template>
    <div>
        <h1>Welcome to E-Commerce App</h1>
    </div>
</template>

1.4. Instalasi Tailwind CSS

Tambahkan Tailwind ke proyek:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Konfigurasi file tailwind.config.js:

module.exports = {
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};

Tambahkan Tailwind di resources/css/app.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Untuk versi terbaru, sudah default tidak perlu ditambahkan. 

1.5. Jalankan Proyek

Compile file CSS dan JS:

npm install && npm run dev

Jalankan server Laravel:

php artisan serve

Akses aplikasi di browser: http://localhost:8000. Anda akan melihat halaman Welcome yang dibuat menggunakan Vue.js.

Laravel VueJS Inertia

Selamat Mencoba!!!!