Basic Component pada Vue JS

Perkenalan

Vue adalah progresif framework javascript yang memungkinkan kalian menulis kode dengan efisien dan cepat dibandingkan tanpa Framework sama sekali, oleh karena itu di Vue JS menerapkan sistem Component. Note: This article is intended for Indonesians

Di vue js terdapat banyak component seperti: Component Basic, Component Props, Component Emit, Component Slot, Component Provide, Component Inject. Artikel ini akan membahas Component Basic pada Vue JS Note: Pastikan kalian paham tentang Vue dan Javascript Dasar

Component Basic

🚀 Konfigurasi pada Vue CLI

1. Pertama kita buat file (Nama.vue) biasanya di simpan pada direktori src/components/

// src/components/Nama.vue
<template>
  <h3>
    Ini Dipanggil Dari Component Nama.vue
  </h3>
</template>

Kalian bebas menentukan nama filenya. Lalu didalam filenya kalian tuliskan elemen html seperti biasa, seperti pada contoh diatas.


2.Tentukan dimana kalian akan merender Component tersebut contoh saya ingin render di src/App.vue

<template>
  <div class="container">
    <Nama />
  </div>
</template>

<script>
/* eslint-disable */
import Nama from "path/ke/FileVueKalian"
export default {
  components: {
    Nama,
    'nama-component': Nama, // Jika ingin kebab-case
  },
};
</script>

Otomatis elemen h3 dengan tulisan Ini Dipanggil Dari Component Nama.vue akan langsung di render pada File App.vue. Hanya dengan begitu saja kalian sudah bisa membuat Component Dasar pada Vue JS