• Opsi Styling di Vue
• Inline Style
• Class Binding
• Scoped Style
• Global Style
• Styling dengan Library (Opsional)
• Kesimpulan

Halo teman-teman semuanya, pada artikel sebelumnya kita sudah belajar tentang Custom Composable, bagaimana membuat fungsi reusable untuk mengelola logic di Vue.

Pada artikel kali ini, kita akan membahas tentang Styling di Vue, yaitu cara memberikan gaya (style) pada komponen agar tampilan aplikasi menjadi lebih menarik.

Opsi Styling di Vue

Ada beberapa cara menambahkan style di Vue:

1. Inline Style → langsung di elemen dengan atribut :style.
2. Class Binding → menggunakan :class untuk menambahkan kelas CSS.
3. Scoped Style → menulis CSS di dalam file .vue agar hanya berlaku untuk komponen tersebut.
4. Global Style → menulis CSS di file terpisah (main.css) agar bisa digunakan di seluruh aplikasi.

Inline Style

<template>
  <div :style="{ color: 'red', fontSize: '20px' }">
    Teks ini berwarna merah dengan ukuran 20px
  </div>
</template>

Style langsung ditulis dalam bentuk object JavaScript.

Class Binding

Kita bisa mengikat kelas CSS dengan :class.

<script setup>
import { ref } from "vue"

const isActive = ref(true)
</script>

<template>
  <p :class="{ active: isActive }">Teks ini aktif</p>
</template>

<style>
.active {
  color: green;
  font-weight: bold;
}
</style>

Jika isActive bernilai true, maka kelas .active akan ditambahkan.

Scoped Style

Dengan menambahkan atribut scoped, CSS hanya berlaku di komponen tersebut.

<template>
  <div class="box">Ini kotak biru</div>
</template>

<style scoped>
.box {
  width: 200px;
  height: 100px;
  background: lightblue;
}
</style>

Style ini tidak akan bocor ke komponen lain.

Global Style

Untuk style global, kita bisa membuat file CSS misalnya src/assets/main.css, lalu impor di main.js.

// main.js
import { createApp } from "vue"
import App from "./App.vue"
import "./assets/main.css"

createApp(App).mount("#app")
main.css
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

Styling dengan Library (Opsional)

Selain CSS biasa, Vue juga bisa memakai:

• Tailwind CSS → utility-first framework.
• Bootstrap / Bulma → framework CSS siap pakai.
• CSS-in-JS → styling dengan JavaScript.

Contoh integrasi Tailwind CSS:

<template>
  <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
    Tombol Tailwind
  </button>
</template>

Kesimpulan

Dari pembahasan ini, kita bisa melihat bahwa Vue menyediakan berbagai cara untuk melakukan styling pada komponen, mulai dari inline style, class binding, scoped style, hingga global style.

Kita bahkan bisa memanfaatkan framework CSS seperti Tailwind atau Bootstrap untuk mempercepat pengembangan tampilan.

Pada artikel berikutnya, kita akan belajar tentang Class & Dynamic Class di Vue, sehingga styling bisa dibuat lebih fleksibel dan interaktif.

Terima Kasih