Tutorial Laravel 12 Inertia Vue dan Tailwind CSS #3 Slicing Argon Dashboard Tailwind CSS Template

Pada tutorial ini, kita akan belajar bersama bagaimana membangun aplikasi web modern menggunakan Laravel 12, Inertia.js, Vue.js, dan Tailwind CSS. Kita akan memulai dari konsep dasar, menghubungkan komponen backend Laravel dengan frontend Vue melalui Inertia, serta memanfaatkan kekuatan Tailwind untuk mempercantik tampilan aplikasi.

Kurnia Andi Nugroho

✅ Telah dilihat 852 kali

Rating: 5.00 ⭐

06 July 2025, 17:03

Slicing Argon Template Laravel Inertia, Vue 3, dan Tailwind CSS

Seperti yang tercantum pada judul, pada kesempatan kali ini kita akan membahas penggunaan CSS berbasis Tailwind CSS. Namun, berbeda dengan pendekatan sebelumnya yang bersifat manual, kali ini kita akan memanfaatkan template yang telah tersedia secara gratis. Salah satu template yang akan kita gunakan adalah Argon Dashboard 2 Tailwind.

Template ini tersedia dalam versi gratis dan sudah mencakup beberapa halaman penting yang umum digunakan, seperti halaman dashboard, authentication, serta tabel data. Dengan menggunakan template ini, kita dapat lebih fokus pada pengembangan logika aplikasi tanpa perlu membangun antarmuka dari nol.

Bagi yang ingin mengeksplorasi lebih lanjut, silakan kunjungi tautan resmi berikut:

https://www.creative-tim.com/product/argon-dashboard-tailwind

Download

Silakan teman-teman download template tersebut dengan cara seperti pada gambar berikut ini:

Ekstrak File

Jika sudah ebrhasil mengunduhnya, silakan teman-teman pindahkan assetsnya kedalam folder public/assets, Sehingga akan tampak seperti berikut ini:

Konfigurasi URL untuk Asset dan Script

Langkah berikutnya yang perlu kita lakukan adalah mengatur URL untuk assets serta script yang dibutuhkan oleh tampilan antarmuka. Silakan buka file app.blade.php yang berada di dalam direktori resources/views, kemudian ubah isinya menjadi seperti berikut:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title inertia>{{ config('app.name', 'Laravel') }}</title>

    <!-- Apple touch icon & favicon -->
    <link rel="apple-touch-icon" sizes="76x76" href="{{ asset('assets/img/apple-icon.png') }}" />
    <link rel="icon" type="image/png" href="{{ asset('assets/img/favicon.png') }}" />

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net" />
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

    <!-- Google Fonts Open Sans -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />

    <!-- Font Awesome Icons -->
    <script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous" defer></script>

    <!-- Nucleo Icons CSS -->
    <link href="{{ asset('assets/css/nucleo-icons.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/css/nucleo-svg.css') }}" rel="stylesheet" />

    <!-- Main Argon Dashboard CSS -->
    <link href="{{ asset('assets/css/argon-dashboard-tailwind.css?v=1.0.1') }}" rel="stylesheet" />

    <!-- Scripts Laravel & Inertia -->
    @routes
    @vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
    @inertiaHead
</head>
<body class="font-sans antialiased">
    @inertia

    <!-- Popper.js -->
    <script src="https://unpkg.com/@popperjs/core@2" defer></script>

    <!-- Plugin for charts -->
    <script src="{{ asset('assets/js/plugins/chartjs.min.js') }}" async></script>

    <!-- Plugin for scrollbar -->
    <script src="{{ asset('assets/js/plugins/perfect-scrollbar.min.js') }}" async></script>

    <!-- Main Argon Dashboard JS -->
    <script src="{{ asset('assets/js/argon-dashboard-tailwind.js?v=1.0.1') }}" async></script>
</body>
</html>

Konfigurasi di atas bertujuan untuk memastikan bahwa seluruh file CSS dan JavaScript yang diperlukan oleh template Argon Dashboard Tailwind dapat dimuat dengan benar oleh Laravel. Kita memanfaatkan helper asset() untuk mengarahkan ke folder publik, serta @vite dan @inertia untuk mendukung integrasi dengan Inertia.js. Pada materi berikutnya, kita akan mulai melakukan slicing halaman authentication dengan menggunakan template Argon Dashboard Tailwind.