Bagian ini tidak berkaitan secara langsung dengan framework. Styling pada dasarnya mengikuti struktur dan susunan komponen yang digunakan.

Dokumentasi ini membahas implementasi komponen menggunakan Laravel, Inertia, Tailwind CSS, dan Vue.js.

Sebelum memulai, pastikan seluruh environment dan dependensi yang dibutuhkan telah terpasang dengan benar.

npm install chart.js vee-validate vue-chartjs yup
        

Pastikan package @inertiajs/vue3 telah terpasang sebagai bagian dari setup Laravel + Inertia.

Letakkan font Poppins pada direktori public/assets/fonts.

Letakkan file logo pada public/assets/images/logo.svg.

Selanjutnya, sesuaikan file resources/css/app.css dengan menyalin CSS yang disediakan di bawah ini.

Kemudian, buat struktur folder berikut untuk menempatkan file komponen yang akan digunakan:

resources/js/
├── Components/
│   ├── Common/
│   └── Utils/
└── Layouts/
    └── Components/
        

File layout utama ditempatkan di resources/js/Layouts.

Komponen seperti BottomNav, Section, Footer, Header, dan Sidebar ditempatkan di resources/js/Layouts/Components.

File formatText.js ditempatkan di resources/js/Components/Utils.

Seluruh file lainnya dapat ditempatkan di resources/js/Components/Common.