Instalation Laravel with Vite, Inertia, Vue JS and TailwindCss

Laravel saat ini sudah mencapai version 9, dimana laravel sudah menggunakan metode Vite untuk melakukan compile dan build dari program yang sudah kita buat.

Pertama kita akan mulai dengan melakukan instalasi Laravel terlebih dahulu. Disini saya menggunakan composer

composer global require laravel/installer
laravel new laravel-inertia

Setelah itu kita akan melakukan instalasi Inertia terlebih dahulu

composer require inertiajs/inertia-laravel

Setelah itu instalasi packet dari Node Modules untuk laravel dan juga flowbite karena saya menggunakan flowbite

npm install
npm i flowbite
npm i vue@next vue-loader@next
npm i @vitejs/plugin-vue@3.0.0
npm i @inertiajs/progress
npm i vuex@next --save

Setelah itu kita mulai instalasi Vue JS pada laravel dan juga Ziggy

npm install @inertiajs/inertia @inertiajs/inertia-vue3
composer require tightenco/ziggy

Sekarang buka file vite.config.js untuk kita lakukan editing isi didalam file vite tersebut

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({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

Silahkan buka file di resources/js/app.js lalu edit file tersebut menjadi seperti dibawah ini

import '../css/app.css';
import 'flowbite';
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
import store from '@/store/index'


const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';


createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, app, props, plugin}) {
        return createApp({ render: () => h(app, props), store })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .use(store)
            .mount(el);
    },
});

InertiaProgress.init({ color: '#4B5563' });

Setelah itu buat folder store di dalam resources/js dan buat file index.js

import { createStore } from 'vuex';

const store = createStore({
        state: {
            count:0
        },
        mutations:{
            INCREMENT(state){
                state.count++
            },
            DECREMENT(state){
                state.count--
            }
        }
    })

export default store

Untuk instalasi dan konfigurasi Vue JS sudah selesai, saatnya kita melakukan instalasi pada TailwindCss, silahkan jalankan perintah berikut

npm install -D tailwindcss postcss autoprefixer

Lalu kita generate tailwind dan PostCss file pada tailwind

npx tailwindcss init -p

lalu konfigurasi file tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './node_modules/flowbite-vue/**/*.js',
    './resources/js/**/*.{vue,js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('flowbite/plugin')
  ],
}

Tambahkan konfigurasi tailwind di resources/css/app.css

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

Setelah konfigurasi selesai semua, anda bisa menjalankan perintah berikut untuk menjalankan laravel

php artisan serve
npm run dev

Sekian dari tulisan ini, semoga bermanfaat.