Adminlte Laravel 9 Vue 3

6 min read Jun 28, 2024

Membangun Aplikasi Laravel 9 dengan AdminLTE, Vue 3, dan Tailwind CSS

Artikel ini akan memandu Anda melalui proses membangun sebuah aplikasi web modern dengan Laravel 9, menggunakan AdminLTE sebagai template desain, Vue 3 untuk komponen frontend, dan Tailwind CSS untuk styling yang lebih cepat dan mudah.

1. Persiapan

Langkah 1: Instalasi Laravel

Buat sebuah proyek Laravel baru dengan perintah berikut:

composer create-project laravel/laravel my-admin-app

Ganti my-admin-app dengan nama project yang Anda inginkan.

Langkah 2: Instalasi AdminLTE

AdminLTE tersedia sebagai paket NPM. Jalankan perintah berikut:

npm install admin-lte --save

Langkah 3: Instalasi Vue 3 dan Tailwind CSS

Buat sebuah file vite.config.js di root project Anda:

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

export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': './resources/js'
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "./resources/sass/app.scss";',
      }
    }
  }
});

Selanjutnya, jalankan perintah berikut untuk menginstal Vue 3 dan Tailwind CSS:

npm install vite vue@3 tailwindcss autoprefixer postcss
npx tailwindcss init -p

Langkah 4: Konfigurasi Tailwind CSS

Buka file tailwind.config.js dan pastikan bagian content menyertakan semua file CSS yang Anda inginkan:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. Integrasi AdminLTE

Langkah 1: Salin File AdminLTE

Salin semua file dari folder node_modules/admin-lte/dist ke folder public/vendor/adminlte dalam project Anda.

Langkah 2: Sesuaikan File CSS

Buat file resources/sass/app.scss dan tambahkan kode berikut:

@import "~admin-lte/dist/css/adminlte.min.css";
@import "~admin-lte/plugins/fontawesome-free/css/all.min.css";
@import "~admin-lte/plugins/overlayScrollbars/css/OverlayScrollbars.min.css";
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Langkah 3: Menambahkan JavaScript

Tambahkan kode berikut ke file resources/js/app.js:

import "./bootstrap";
import * as bootstrap from 'bootstrap';

window.bootstrap = bootstrap;

import "~admin-lte/dist/js/adminlte.min.js";
import "~admin-lte/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js";

3. Mengintegrasikan Vue 3

Langkah 1: Buat Komponen Vue

Buat file resources/js/components/ExampleComponent.vue dengan kode berikut:

Langkah 2: Gunakan Komponen Vue dalam Blade

Buka file resources/views/welcome.blade.php dan tambahkan kode berikut:




    
    

    Laravel

4. Jalankan Aplikasi

Jalankan server development dengan perintah:

npm run dev

Anda dapat mengakses aplikasi Anda di alamat http://localhost:5173/.

Kesimpulan

Anda telah berhasil membangun sebuah aplikasi Laravel 9 dengan AdminLTE, Vue 3, dan Tailwind CSS. Dengan kombinasi ini, Anda memiliki dasar yang kuat untuk mengembangkan aplikasi web yang menarik dan responsif.

Tips Tambahan

Gunakan axios untuk komunikasi API antara Vue dan Laravel.
Gunakan vuex untuk manajemen state dalam aplikasi Vue Anda.
Manfaatkan laravel-mix untuk mengelola aset seperti CSS, JavaScript, dan gambar.
Pelajari cara menggunakan Vue Router untuk navigasi antar halaman dalam aplikasi Vue Anda.

Dengan pengetahuan dasar ini, Anda dapat membangun aplikasi web yang lebih kompleks dengan berbagai fitur dan fungsionalitas. Selamat mencoba!