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-inertiaSetelah itu kita akan melakukan instalasi Inertia terlebih dahulu
composer require inertiajs/inertia-laravelSetelah 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 --saveSetelah itu kita mulai instalasi Vue JS pada laravel dan juga Ziggy
npm install @inertiajs/inertia @inertiajs/inertia-vue3
composer require tightenco/ziggySekarang 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 storeUntuk instalasi dan konfigurasi Vue JS sudah selesai, saatnya kita melakukan instalasi pada TailwindCss, silahkan jalankan perintah berikut
npm install -D tailwindcss postcss autoprefixerLalu kita generate tailwind dan PostCss file pada tailwind
npx tailwindcss init -plalu 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 devSekian dari tulisan ini, semoga bermanfaat.
SAPUTRA SITE 