Vue.js Untuk Pemula #1: Membuat Aplikasi Counter

Vue.js adalah salah satu framework JavaScript yang populer untuk membangun aplikasi web. Dalam tutorial ini, kita akan membuat aplikasi sederhana, yaitu counter, menggunakan Vue.js 3. Aplikasi ini akan memungkinkan pengguna untuk menambah atau mengurangi nilai dari counter.

Persiapan

Sebelum memulai membuat aplikasi counter, ada beberapa hal yang perlu disiapkan:

• Text Editor atau IDE, seperti Visual Studio Code atau WebStorm.
• Pengetahuan dasar tentang HTML, CSS, dan JavaScript.
• Instalasi Node.js dan npm (Node Package Manager) di komputer Anda.
   

Langkah 1: Membuat Proyek Vue menggunakan Vite.js

Untuk membuat proyek Vue dengan Vite.js, kita dapat menggunakan CLI npm. Buka terminal atau Command Prompt dan jalankan perintah berikut:

npm init @vitejs/app my-app
cd my-app

Perintah npm init @vitejs/app my-app akan membuat proyek baru dengan nama "my-app".

Langkah 2: Menambahkan Komponen Counter

Setelah membuat proyek, buka folder proyek dan buat file baru dengan nama Counter.vue di dalam folder src/components. Isikan file tersebut dengan kode berikut:

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    }
  }
};
</script>

<style>
h1 {
  font-size: 2em;
  text-align: center;
}

button {
  padding: 1em;
  font-size: 1.5em;
  margin: 0.5em;
}
</style>

Langkah 3: Menggunakan Komponen Counter

Setelah membuat komponen Counter tersebut, kita perlu meng-import-nya ke dalam komponen src/App.vue seperti ini:

<script setup>
import Counter from './components/Counter.vue';
</script>

<template>
  <Counter />
</template>

Pada kode diatas, yang kita lakukan adalah meng-import komponen Counter dari ./components/Counter.vue dan kemudian menggunakannya pada bagian template dengan syntax <Counter />.  Kita menggunakan syntax script setup, dimana salah satu keuntungannya adalah komponen yang kita import akan otomatis terbaca dibagian template tanpa harus mendeklarasikannya ke bagian components seperti pada syntax Options API.

Langkah 4: Menjalankan Aplikasi

Untuk menjalankan aplikasi, buka terminal atau Command Prompt di folder proyek dan jalankan perintah berikut:

npm run dev

Setelah itu, aplikasi akan tersedia di http://localhost:3000/. Anda dapat membuka alamat tersebut di browser untuk melihat hasil dari aplikasi counter yang dibuat.

Dengan Vite.js, Anda dapat dengan mudah membuat aplikasi counter sederhana dan menikmati kecepatan pengembangan yang lebih baik. Semoga tutorial ini membantu Anda memulai membuat aplikasi dengan Vue.

Demo Aplikasi

Anda juga bisa mencoba demo aplikasi counter yang dibuat melalui Stackblitz disini.