16 artikel terstruktur dari nol sampai mahir — dipandu, berurutan, dan siap langsung dipraktikkan.
📚 Lihat Daftar Isi Seri →Pernah nggak kamu buka proyek web lama dan bingung — "HTML-nya di mana? CSS-nya di file mana? JavaScript-nya kok terpisah?" Lalu kamu kelimpungan buka 5 file sekaligus hanya untuk memahami satu tombol. Nah, kalau kamu belajar komponen Vue 3, kamu akan menemukan solusi elegan untuk masalah klasik ini: semuanya dalam satu file. Konsep ini disebut Single File Component (SFC) — dan inilah yang membuat Vue digemari jutaan developer di seluruh dunia.
Di artikel keempat dari seri Vue from Zero to Zorro ini, kita akan bedah tuntas apa itu SFC, bagaimana strukturnya, dan kenapa cara ini jauh lebih rapi dibanding pendekatan konvensional. Siap? Mari kita mulai.
🧩 Apa Itu Single File Component Vue? (Dan Kenapa Kamu Bakal Suka)
Bayangkan kamu sedang merakit lemari IKEA. Biasanya semua komponen — papan kayu, baut, engsel, laci — dikemas dalam satu kotak per unit. Kamu tidak perlu ke 3 gudang berbeda untuk mencari bagian dari lemari yang sama, kan?
Nah, itulah filosofi Single File Component Vue alias SFC. Setiap komponen dikemas rapi dalam satu file berekstensi .vue yang terdiri dari tiga blok utama:
File berekstensi .vue yang menggabungkan tiga blok dalam satu tempat: <template> (HTML/struktur), <script> (logika JavaScript), dan <style> (tampilan CSS). Inilah unit terkecil dari antarmuka Vue yang bisa dipakai ulang (reusable).
Vue adalah satu-satunya framework JavaScript mainstream yang mempopulerkan konsep SFC sejak versi pertamanya. Konsep ini sekarang diadopsi luas — bahkan Svelte dan Angular pun terinspirasi dari pendekatan serupa!
🏗️ Anatomi Komponen Vue 3 — Bedah File .vue dari Atas ke Bawah
Sekarang kita bedah satu per satu. Anggap sebuah komponen Vue seperti sebuah kartu nama profesional: ada nama (template), ada latar belakang profesi (script), dan ada desain visualnya (style). Semuanya satu paket, mencerminkan satu identitas.
<template> — Wajah Komponen
Di sinilah kamu tulis HTML yang akan muncul di browser. Template di Vue mendukung sintaks khusus Vue seperti v-if, v-for, dan double curly braces {{ }} untuk menampilkan data. Vue 3 mengizinkan lebih dari satu root element — nggak perlu lagi bungkus semua dalam satu div!
<template>
<div class="profile-card">
<h2>{{ nama }}</h2>
<p>{{ jabatan }}</p>
<button @click="sapa">Sapa!</button>
</div>
</template><script setup> — Otak Komponen
Ini tempat kamu mendefinisikan data, fungsi, dan logika komponen. Atribut setup adalah cara modern Vue 3 — lebih ringkas, lebih clean, dan semua yang dideklarasikan di sini otomatis bisa dipakai di template tanpa perlu export manual.
<script setup>
import { ref } from 'vue'
const nama = ref('Budi Santoso')
const jabatan = ref('Frontend Developer')
function sapa() {
alert(`Halo, aku ${nama.value}!`)
}
</script>
Selalu gunakan <script setup>, bukan <script> biasa. Ini adalah syntax sugar resmi Vue 3 yang membuat kode lebih ringkas dan performanya lebih optimal. Dokumentasi resmi Vue pun merekomendasikan ini untuk proyek baru!
<style scoped> — Penampilan Komponen
Blok ini berisi CSS untuk styling komponen. Kata kunci scoped adalah fitur ajaib Vue: style hanya berlaku untuk komponen ini saja, jadi tidak akan bocor ke komponen lain. Kamu tidak perlu lagi khawatir naming conflict CSS!
<style scoped>
.profile-card {
background: #ffffff;
border-radius: 16px;
padding: 24px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
button {
background: #6366f1;
color: white;
border: none;
padding: 8px 20px;
border-radius: 8px;
cursor: pointer;
}
</style>🚀 Cara Membuat dan Memakai Komponen Vue 3 Pertamamu
Teori sudah, sekarang praktik. Mari buat komponen sederhana dari nol dan pasang ke halaman utama. Ikuti langkah-langkah berikut:
Buat file baru di folder src/components/
Beri nama yang deskriptif dan menggunakan PascalCase. Contoh: ProfileCard.vue, NavBar.vue, UserAvatar.vue.
Tulis ketiga blok dalam file tersebut
Mulai dari <template>, lanjut <script setup>, dan akhiri dengan <style scoped>. Urutan ini adalah konvensi umum yang dipakai komunitas Vue.
Import dan gunakan di komponen lain
Dengan <script setup>, cukup import saja — komponen langsung tersedia di template tanpa perlu didaftarkan manual.
Jalankan dev server dan lihat hasilnya
Jalankan npm run dev, buka browser, dan komponen kamu sudah tampil. Selamat, kamu sudah membuat komponen Vue pertamamu!
<template>
<div class="app">
<!-- Pakai komponen layaknya HTML tag biasa -->
<ProfileCard />
<ProfileCard />
<ProfileCard />
</div>
</template>
<script setup>
import ProfileCard from './components/ProfileCard.vue'
</script>
Perhatikan baris <ProfileCard /> bisa dipakai tiga kali! Inilah kekuatan nyata komponen Vue 3 — tulis sekali, pakai berkali-kali tanpa duplikasi kode. Ini yang disebut prinsip reusability.
⚖️ SFC vs Cara Lama: Kenapa Single File Component Menang?
Mungkin kamu bertanya: "Kenapa nggak bikin file HTML, CSS, JS terpisah saja seperti biasa?" Pertanyaan bagus. Mari kita bandingkan secara jujur.
- CSS global bisa saling tabrakan
- Harus buka 3 file untuk 1 komponen
- Susah tahu mana CSS milik mana
- Refactoring jadi mimpi buruk
- Tidak ada enkapsulasi bawaan
- CSS terisolasi dengan
scoped - Semua dalam satu file, mudah navigasi
- Kode lebih mudah dibaca & dipahami
- Refactoring dan testing lebih mudah
- Dukungan tooling kelas dunia (VSCode)
File .vue tidak bisa langsung dibuka di browser biasa — ia perlu diproses oleh build tool seperti Vite atau Webpack. Itulah kenapa kamu perlu setup proyek Vue terlebih dahulu (sudah dibahas di artikel sebelumnya!).
Pasang ekstensi Volar (Vue Official) di VS Code untuk pengalaman terbaik menulis single file component vue. Kamu akan dapat fitur autocomplete, syntax highlighting, dan type checking yang membuat coding jadi jauh lebih nyaman!
Kesimpulan: Satu File, Satu Kekuatan
Di artikel ini kamu sudah mempelajari:
- Apa itu komponen Vue 3 dan mengapa SFC adalah cara terbaik membangunnya
- Tiga blok utama dalam single file component vue:
<template>,<script setup>, dan<style scoped> - Cara membuat dan menggunakan komponen di dalam komponen lain
- Keunggulan SFC dibanding pendekatan file terpisah klasik
SFC bukan sekadar fitur — ini adalah cara berpikir tentang antarmuka sebagai kumpulan blok kecil yang mandiri dan bisa dipakai ulang. Semakin kamu terbiasa, semakin kamu akan menghargai betapa elegannya desain Vue.
💬 Punya pertanyaan atau kebingungan soal SFC? Tinggalkan di kolom komentar! Dan kalau artikel ini membantu, bagikan ke teman yang juga lagi belajar Vue 3 — siapa tau bisa belajar bareng! 🚀
Artikel ini adalah bagian dari seri 16 Artikel Belajar Vue: Vue from Zero to Zorro — panduan terstruktur dari nol sampai mahir.
No comments:
Post a Comment