Blog - Queen Bee

Beranda
Coding

Integrasi Plugin Flowbite di Laravel v9 Livewire dan Tailwind

Pelajari cara mengintegrasikan plugin Flowbite dengan Laravel Livewire dan Tailwind CSS untuk meningkatkan antarmuka pengguna web.
Integrasi Plugin Flowbite di Laravel v9 Livewire dan Tailwind

Syarat sudah menginstall Laravel v9, Livewire dan Tailwind , dan tinggal kalian Integrasikan dengan plugin Flowbite.

Dapatkan panduan lengkap tentang implementasi, termasuk langkah-langkah instalasi, konfigurasi, dan contoh kode praktis. Optimalkan proyek Laravel Anda dengan komponen interaktif dan desain responsif yang modern menggunakan kombinasi Flowbite, Livewire, dan Tailwind CSS.

Apa itu Flowbite ?

Flowbite adalah perpustakaan komponen UI berbasis Tailwind CSS yang dirancang untuk membantu pengembang web membuat antarmuka pengguna yang menarik dan responsif dengan cepat. Flowbite menyediakan berbagai komponen pra-desain seperti tombol, kartu, navigasi, modal, dan lainnya, yang dapat disesuaikan sesuai kebutuhan. Dengan menggunakan Flowbite, pengembang dapat menghemat waktu dalam pengembangan frontend dan fokus pada aspek fungsionalitas dan pengalaman pengguna. Flowbite sangat cocok untuk proyek-proyek yang membutuhkan desain modern dan konsisten tanpa harus membuat semuanya dari awal.

Apa itu Vite? Vite merupakan bundler modern yang disarankan oleh Laravel

Untuk mengintegrasikan Flowbite ke dalam Laravel 9 yang sudah memiliki Livewire dan Tailwind CSS menggunakan Vite, Kalian dapat mengikuti langkah-langkah berikut:

1. Instalasi Flowbite Jalankan perintah berikut di terminal untuk menginstal Flowbite melalui npm atau yarn:

Gunakan perintah ini untuk install:

npm install flowbite

atau

yarn add flowbite

2. Konfigurasi Tailwind CSS untuk Flowbite

Tambahkan konfigurasi Flowbite ke dalam file tailwind.config.js untuk memastikan komponen Flowbite di-purge dengan benar:

module.exports = {
  content: [
    './resources/views/**/*.blade.php',
    './resources/js/**/*.js',
    './resources/css/**/*.css',
    'node_modules/flowbite/**/*.js'
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('flowbite/plugin')
  ],
}

3. Impor Flowbite ke Proyek Kalian Tambahkan impor Flowbite ke file CSS utama Kalian

misalnya di resources/css/app.css:

@import 'flowbite';

Tambahkan juga impor ke file JavaScript utama Kalian, misalnya di resources/js/app.js:

import 'flowbite';

4. Konfigurasi Vite Pastikan Kalian memiliki konfigurasi Vite yang benar

Jika belum ada, buat atau modifikasi file vite.config.js di root proyek Kalian seperti berikut:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

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

5. Gunakan Komponen Flowbite di Blade Templates Sekarang Kalian dapat menggunakan komponen Flowbite di dalam Blade template Kalian.

Berikut contoh penggunaan komponen button dari Flowbite:

<!-- resources/views/welcome.blade.php -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    @vite('resources/css/app.css')
</head>
<body>
    <div class="container mx-auto">
        <button class="btn btn-primary">Button</button>
    </div>
    @vite('resources/js/app.js')
</body>
</html>

6. Jalankan Vite Setelah semua konfigurasi selesai

jalankan Vite untuk memproses file CSS dan JavaScript Kalian:

npm run dev

atau untuk mode produksi:

npm run build

Dengan langkah-langkah di atas, Kalian seharusnya sudah bisa menggunakan Flowbite dengan Laravel 9 dan Vite.