Education Vue Components

Persyaratan Dasar
Intro to Component
Component How To
Single File Components
Intro to Build Tools - Parcel
Let's Demo
Referensi

Persyaratan Dasar

Mengerti dasar penggunaan nodejs
Mengerti dasar penggunaan live-server dan json-server
Mengerti dasar Vue.js, minimal directives dan lifecycle

Intro to Component

Dislcaimer:

Pada pembelajaran ini yang digunakan adalah Vue.js versi 2.x.
Untuk versi 3.x masih dalam tahap pengembangan yah !

Pernahkah kepikiran?

Pada saat sebuah aplikasi sudah menjadi besar, dengan bermacam macam bagian yang ada di aplikasi tersebut, namun semuanya diletakkan di dalam satu file html saja?

Contoh:

Imaginasikan saja, aplikasi e-commerce dari perusahaan yang berwarana hijau ataupun oranye, ataupun biru, hanya dibuat dalam sebuah file html saja?
Bagian NavBar, bagian Login, bagian Card untuk barang belanjaan, dan bagian Card, semuanya ada di dalam satu file html saja
Asumsikan misalnya ada 100 baris kode per bagian, kemudian dalam sebuah aplikasi besar memiliki 100 bagian itu, berarti satu file html nya memiliki total baris kode sebesar 10000 baris. Enak kan bacanya?

Nah pada pembelajaran ini, dengan menggunakan Vue.js, kita akan belajar untuk memecah bagian tersebut menjadi file file yang lebih kecil yang lebih mudah untuk diurus, atau istilah kerennya adalah membuat component dalam Vue.js itu sendiri.

Component How to

Sekarang mari kita mencoba untuk membuat sebuah file component bagian kecil kecilnya tersebut

https://v2.vuejs.org/v2/guide/components.html

Langkah-langkahnya adalah sebagai berikut:

Membuat sebuah folder dengan nama percobaan-1
Membuat sebuah file baru dengan nama index.html di dalam folder tsb.
Menginisialisasi project node dengan menggunakan perintah npm init -y
Menginstall live-server dengan menggunakan perintah npm i -D live-server

Menuliskan kode sebagai berikut dalam file index.html

<!-- File: index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cobain</title>
  </head>
  <body>
    <div id="app">
      <p>{{ message }}</p>

      <!-- 2. Menggunakan component-baru yang dideklarasikan di bawah -->
      <component-baru></component-baru>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script>
      // 1. Membuat component baru
      Vue.component("component-baru", {
        template: "<h1>Selipan baru</h1>",
      });

      new Vue({
        el: "#app",
        data: {
          message: "Halo Dunia",
        },
      });
    </script>
  </body>
</html>

Jalankan kode di atas dengan menggunakan perintah npx live-server .
Selamat sampai di titik ini kita sudah berhasil membuat component pertama di vue !

Namun hal ini masih kurang seru bukan? Masih ada pada satu file yang sama saja nih, bagaimana caranya kita membuat component ini ada pada file yang lainnya?

Untuk itu sekarang kita akan mencoba untuk membuat component lain, dengan meletakkannya pada tempat yang tidak sama dengan index.html yang sudah digunakan

Langkah-langkahnya adalah sebagai berikut:

Membuat sebuah folder baru lagi di dalam folder percobaan-1 dengan nama src/components, di folder inilah tempat dimana component yang dibuat akan diletakkan
Membuat sebuah component baru dengan nama ComponentBaru2.js

Menuliskan kode berikut pada file ComponentBaru2.js

// File: src/components/ComponentBaru2.js

// Deklarasi component baru
Vue.component("component-baru-2", {
  // Template hasil tampilan dituliskan di sini
  // Menggunakan data yang didefinisikan di bawah
  template: "<h1>{{cobaan}}</h1>",
  // PERHATIKAN bahwa penulisan data di dalam component ini sekarang
  // sudah dibuat dalam bentuk FUNCTION
  // bukan hanya sekedar return object saja

  // https://v2.vuejs.org/v2/guide/components.html#data-Must-Be-a-Function
  data: function () {
    return {
      cobaan: "Selipan baru kedua",
    };
  },
});

Memodifikasi file index.html untuk dapat menggunakan ComponentBaru2.js

<!-- File: index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cobain</title>
  </head>
  <body>
    <div id="app">
      <p>{{ message }}</p>

      <!-- 2. Menggunakan component-baru yang dideklarasikan di bawah -->
      <component-baru></component-baru>
      <!-- 4. Menggunakan component-baru-2 yang dideklarasikan dari file lain -->
      <component-baru-2></component-baru-2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <!-- 3. Mendeklarasikan / import ComponentBaru2.js -->
    <script src="./src/components/ComponentBaru2.js"></script>
    <script>
      // 1. Membuat component baru
      Vue.component("component-baru", {
        template: "<h1>Selipan baru</h1>",
      });

      new Vue({
        el: "#app",
        data: {
          message: "Halo Dunia",
        },
      });
    </script>
  </body>
</html>

Menjalankan kembali live-server kemudian lihatlah perubahan kode yang terjadi

Voila ! sampai di titik ini kita sudah berhasil memecah file yang cukup panjang menjadi beberapa file dan tetap terhubung, mantap bukan !

Namun, dalam menuliskan kode ini, kita masih mengalami beberapa kendala:

Template ini masih berupa "satu warna saja" atau dianggap menjadi "string" di dalam code yang dituliskan, sehingga terasa malah jadi sulit
Adanya repetisi pada penulisan kode (Vue.component blablabla)

Nah bagaimanakah kita menyelesaikan hal tersebut?

Untuk menyelesaikan masalah ini kita harus mengetahui apa itu Single File Components dan Bundler terlebih dahulu.

Single File Components

Seperti yang sudah kita coba di atas, atau di dalam Vue.js ini disebut dengan Global Components dimana component didefinisikan dengan Vue.component, memiliki keterbatasan sebagai berikut:

Setiap nama komponen WAJIB unik
Template dibuat dalam bentuk string sehingga susah karena tidak ada syntax highlighting
Tidak adanya CSS support dalam component
Tidak ada build step sehingga hanya membatasi kode dalam bentuk HTML dan JS saja, dan tidak bisa adanya preprocessor (seperti scss, pug, dsb) dan Babel

Semua permasalahan di atas ini bisa diselesaikan dengan cara menggunakan Single File Components dengan sebuah file yang memiliki ektensi .vue,

Single File Components (SFC) a.k.a file *.vue adalah sebuah file spesial di dalam Vue.js yang memperbolehkan kita untuk membungkus template, logic, dan style dari sebuah Component Vue di DALAM SEBUAH FILE.

Contoh struktur file dengan ekstensi .vue

<template>
  ...
</template>

<script>
  ...
</script>

<style scoped>
  ...
</style>

Akan tetapi, di balik kespesialan hal yang disebutkan di atas, SFC ini HARUS diproses lagi menjadi javascript umumnya dengan menggunakan build tools seperti Webpack atau Browserify atau yang lain lain untuk menjadi file yang bisa dibaca oleh browser.

Nah dikarenakan Webpack maupun Browserify ini cukup sulit untuk melakukan konfigurasi awalnya, maka dalam pembelajaran ini kita akan menggunakan build tools yang cukup mudah bernama Parcel

Intro to Build Tools - Parcel

Disclaimer:

Parcel yang digunakan di pembelajaran ini adalah menggunakan Parcel v1 yang sudah deprecated
Parcel v2 tidak support SFC untuk Vue.js v2.x

Dikutip dari web Parcel nya langsung, adalah suatu bundler aplikasi web yang tidak membutuhkan konfigurasi sama sekali. Berbeda dengan Webpack ataupun Browserify yang membutuhkan konfigurasi yang cukup ekstensif pada awal penggunaannya.

Langkah-langkah untuk menggunakan Parcel supaya bisa menggunakan Vue SFC adalah sebagai berikut:

Menginstall parcel secara global dengan menggunakan perintah npm i -g parcel-bundler
Membuat sebuah folder baru dengan nama percobaan-2
Membuat sebuah file baru dengan nama index.html di dalam folder tsb.
Menginisialisasi project node dengan menggunakan perintah npm init -y
Menginstall package Vue v2 dengan menggunakan perintah npm i vue@2

Menuliskan kode pada index.html sebagai berikut

<!-- File: index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Percobaan Kedua</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- import file javascript yang akan digunakan sebagai Vue -->
    <script src="src/main.js"></script>
  </body>
</html>

Membuat folder baru di dalam folder percobaan-2 dengan nama src
Membuat file baru dengan nama main.js dan App.vue pada folder src tersebut

Menuliskan kode pada file App.vue sebagai berikut

<!-- File: src/App.vue -->

<template>
  <div>
    {{ iniDariData }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      iniDariData: "Halo Dunia",
    };
  },
  // memberikan nama dari Component-nya menjadi App
  // Bisa di-trace di Vue devtools
  name: "App",
};
</script>

<style></style>

Menuliskan kode pada file main.js sebagai berikut

// File: src/main.js

import Vue from "vue";
import App from "./App.vue";

// Ini adalah instance vue yang digunakan
new Vue({
  // Fungsi untuk render template
  render: (createElement) => createElement(App),
})
  // inject ke element html yang mana
  .$mount("#app");

Perhatikan dalam file main.js dan App.vue syntax penulisan sudah menggunakan syntax ES Modules, BUKAN CommonJS lagi.
- require() digantikan dengan import X from 'y';
- module.exports digantikan dengan exports default
Menjalankan kode yang sudah dibuat ini dengan menggunakan parcel index.html

Selamat sampai dengan tahap ini kita sudah berhasil membuat file SFC pada Vue.js dengan menggunakan parcel sebagai bundler / build toolsnya !

Let's Demo

Setelah selesai mempelajari ini semua, mari kita coba untuk melakukan pemecahan menjadi components dalam Aplikasi yang sudah dibuat:

Aplikasi yang sudah dibuat merupakan sebuah aplikasi sederhana yang menembak data langsung dari json-server yang sudah ada.
Aplikasi ini masih berupa sebuah file index.html yang sangat besar

Langkah 1 - Inisialisasi Server

Membuka folder server yang sudah disediakan
Menginstall package yang dibutuhkan dengan menggunakan perintah npm i
Menjalankan server dengan menggunakan perintah npx json-server db.json

Langkah 2 - Inisiaslisasi Client

Membuka folder client yang sudah disediakan
Menginisialisasi project dengan menggunakan npm init -y
Menginstall package Vue v2 dengan menggunakan perintah npm i vue@2
Membuat sebuah folder baru dengan nama src
Membuat 2 buah file baru dengan nama App.vue dan main.js di dalam folder src yang dibuat sebelumnya

Membuka file App.vue dan menuliskan kode sebagai berikut

<!-- File: src/App.vue -->

<template>
  <div>
    <!-- Langkah selanjutnya akan diletakkan di dalam sini ! -->
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style></style>

Memindahkan seluruh isi section di dalam body index.html dari line 18 s.d. line 270 (Comment section 1 s.d. section 5) ke dalam template div yang ada pada file src/App.vue
Perhatikan pada index.html, pada bagian const app = new Vue({ ... }) yang sudah dideklarasikan, pindahkan property data, methods, created, computed yang ada di dalam index.html ke dalam file src/App.vue

Modifikasi data yang ada di dalam file src/App.vue yang baru sekarang ini menjadi bentuk function

// sebelumnya
data: {
  ...
}

// menjadi
data() {
  return {
    ...
  }
}

Menuliskan kode pada file main.js menjadi sebagai berikut

// File: src/main.js

import Vue from "vue";
import App from "./App.vue";

new Vue({
  render: (createElement) => createElement(App),
}).$mount("#app");

Memodifikasi file index.html untuk menghilangkan bagian script src vue dan custom script yang sudah dibuat dan menambahkan script src yang mengarah ke src/main.js

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link
      href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
      rel="stylesheet"
    />

    <title>ToDo VueJS v2</title>
  </head>

  <body>
    <div id="app"></div>

    <!-- Script section -->
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.js"
      integrity="sha512-otOZr2EcknK9a5aa3BbMR9XOjYKtxxscwyRHN6zmdXuRfJ5uApkHB7cz1laWk2g8RKLzV9qv/fl3RPwfCuoxHQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

    <script src="./src/main.js"></script>
  </body>
</html>

Menjalankan kode dengan menggunakan perintah parcel index.html

Sampai dengan tahap ini kita sudah berhasil menginisialisasi project yang sudah dibuat sebelumnya, namun sudah menggunakan versi parcel ! Selamat !

Langkah selanjutnya kita akan mulai menggunakan cara import untuk mengurangi script src pada index.html yang dibuat

Langkah 3 - Modifikasi Axios dan SweetAlert

Membuka kembali file src/App.vue

Memodifikasi kode di dalam tag <script> dengan menambahkan import axios dan sweetalert sebagai berikut

// File: src/App.vue

<script>
  // Lakukan import axios di sini
  import axios from "axios";
  // Lakukan import sweetalert di sini
  import Swal from "sweetalert2";

  export default {
    ...
  }
</script>

Membuka kembali file index.html

Menghapus bagian script import sweetalert dan axios pada index.html sehingga menjadi sebagai berikut

<!-- File: index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link
      href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
      rel="stylesheet"
    />

    <title>ToDo VueJS v2</title>
  </head>

  <body>
    <div id="app"></div>
    <script src="./src/main.js"></script>
  </body>
</html>

File index.html menjadi lebih ramping bukan?

Sampai di langkah ini kita sudah masuk ke dalam penggunaan import yang lebih memanjakan kita yah, selanjutnya kita akan mulai masuk ke dalam pemecahan komponen yang lebih kecil lagi !

Langkah 4 - Pecah Komponen Bagian Footer

Membuat sebuah folder baru di dalam src dengan nama components. Folder ini akan berisi seluruh component yang telah dipecah-pecah.
Membuat sebuah file baru dengan nama CustomFooter.vue pada folder components

Masukkan kode berikut ke dalam CustomFooter.vue

<template></template>

<script>
export default {
  name: "CustomFooter",
};
</script>

<style></style>

Memindahkan Section 5 - Footer yang ada pada file src/App.vue ke dalam src/components/CustomFooter.vue sehingga menjadi sebagai berikut

<template>
  <!-- Section 5 - Footer -->
  <section class="text-gray-700 bg-white body-font">
    <div
      class="container flex flex-col items-center px-8 py-8 mx-auto max-w-7xl sm:flex-row"
    >
      <!-- Left Side -->
      <a
        href="#_"
        class="text-xl font-black leading-none text-gray-900 select-none logo"
        >ToDo VueJS v2</a
      >

      <!-- Right Side -->
      <span
        class="inline-flex justify-center mt-4 space-x-5 sm:ml-auto sm:mt-0 sm:justify-start"
      >
        <p
          class="mt-4 text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l sm:border-gray-200 sm:mt-0"
        >
          © Tailwindcss Page Builder x withered-flowers
        </p>
      </span>
    </div>
  </section>
</template>

<script>
export default {
  name: "CustomFooter",
};
</script>

<style></style>

Membuka kembali file src/App.vue, pada tag <script>, lakukan import untuk CustomFooter.vue

<script>
// Lakukan import axios di sini
import axios from "axios";
// Lakukan import sweetalert di sini
import Swal from "sweetalert2";

// Import CustomFooter.vue di sini
import CustomFooter from "./components/CustomFooter.vue";

...
</script>

Masih pada file yang sama, pada tag script, di dalam export default, tambahkan registrasi components

export default {
  name: "App",
  components: {
    CustomFooter
  },
  ...
}

Masih pada file yang sama, pada tag template, sebelum penutup div, kita akan memanggil component CustomFooter tersebut
```
<template>
  ...
    <CustomFooter></CustomFooter>
  </div>
</template>
```

Langkah 5 - Pecah Komponen Bagian NavBar

Langkah 6 - Pecah Komponen Bagian Login Page

Referensi

(Single File Components)

(Parcel)

https://v1.parceljs.org/vue.html

(Vetur Extension)

https://marketplace.visualstudio.com/items?itemName=octref.vetur

withered-flowers / education-vue-components Goto Github PK