Inisialisasi Proyek Vue.js x TypeScript Menggunakan Vite dan Bun di Windows 11 (Edisi 2026)


Bismillahirrohmaanirrohiim. Alhamdulillahi Robbil 'Alamiin. Allahumma Sholli 'Alaa Sayyidinaa Muhammad. 

Vue.js merupakan frontend framework yang memiliki ekosistem internal yang solid. Tim pengembang dari Vue.js juga mengembangkan beberapa hal yang kemungkinan kita butuhkan. Misal:

  • Vue Router untuk routing
  • Pinia untuk state management
  • Nuxt untuk mengembangkan aplikasi fullstack
  • Vite untuk build tool
  • Dan masih banyak lagi

Itu adalah salah satu keunggulan Vue.js, setidaknya menurut saya pribadi.

Kali ini, kita akan coba membuat proyek Vue.js berbasis TypeScript menggunakan Vite dan Bun di Windows 11. 

Persiapan

Saya melakukan tutorial ini menggunakan beberapa hal berikut.

  1. Bun v1.2.5 (Lihat petunjuk instalasi di sini)
  2. Visual Studio Code v1.109.5 (Unduh di sini)

Saya juga mengaktifkan beberapa ekstensi Visual Studio Code berikut.

  1. Vue (Official)
  2. Prettier - Code formatter 

Anda bisa menyesuaikan dengan perangkat yang Anda gunakan. 

Inisialisasi Project 

Pertama, mulai inisialisasi dengan menjalankan perintah berikut.

bun create vite@latest

Kita bisa menjalankannya menggunakan PowerShell pada direktori yang kita inginkan. Pada contoh kali ini, saya menggunakan direktori P:\CONTENT\VUEJS.


Ketikkan nama proyek sesuai keinginan kita pada dialog Project name, misal coba.


Kemudian, pilih Vue pada dialog Select a framework.


Selanjutnya, pilih Typescript pada dialog Select a variant. 


Pada dialog Use Vite 8 beta (Experimental), pilih No. Mengingat ada keterangan 'Experimental' di sini, mungkin Anda akan menemui tampilan yang berbeda. Bahkan, mungkin sudah tidak ada ketika Anda mencobanya sendiri.


Kemudian, pilih Yes pada dialog Install with bun and start now?.


Tunggu proses inisialisasi hingga selesai.


Setelah selesai, server development akan berjalan.


Tahan tombol Ctrl dan klik link yang diberikan untuk membukanya di browser.


Selamat! Anda berhasil menginisialisasi proyek Vue.js di perangkat Anda. 

Sedikit Modifikasi

Mari kita coba modifikasi sedikit. Hentikan server development dengan menekan kombinasi tombol Ctrl + C.


Buka direktori proyek menggunakan Visual Studio Code. Pertama, ketikkan perintah berikut kemudian tekan Enter untuk membuka direktori coba.

cd coba


Kemudian, ketikkan perintah berikut kemudian tekan Enter untuk membuka Visual Studio Code pada direktori yang sedang kita buka di PowerShell.

code .


Jika muncul dialog Do you trust the authors of the files in this folder?, klik Yes, I trust the authors.


Buka src/App.vue. Mari kita modifikasi bagian msg dari kode berikut.

<HelloWorld msg="Vite + Vue" />


Misalnya di sini, saya menggantinya dengan "Muslim Aswaja" seperti ini.

<HelloWorld msg="Muslim Aswaja" />


Buka terminal di Visual Studio Code. Kita bisa menekan kombinasi tombol Ctrl + ` untuk membukanya. Backtick (`) bisa kita temukan di sebelah kiri tombol angka 1 dan di bawah tombol Esc.


Jalankan perintah berikut untuk menjalankan development server dari Vite.

bun dev


Lihat perubahannya di browser. 

Berhasil! Sekarang, kita bisa mulai mengembangkan aplikasi atau web apa saja menggunakan Vue.js.

Penutup 

Jika Anda merasa ada bagian yang kurang jelas atau ada yang perlu ditanyakan, silakan tinggalkan pertanyaan di kolom komentar.

Semoga bermanfaat. 

Wallahul muwaafiq ilaa aqwaamith thooriq.  

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Install DBeaver Up-To-Date di Ubuntu 22.04

Gambar
  Bismillahirrohmaanirrohiim. Alhamdulillahi Robbil 'Alamiin. Allahumma Sholli 'Alaa Sayyidinaa Muhammad. Singkatnya, kita bisa menggunakan command sudo apt install dbeaver-ce . Tapi, tentu kita perlu melakukan beberapa hal terlebih dahulu. Mengenal DBeaver DBeaver merupakan aplikasi yang bisa kita gunakan untuk mengelola berbagai macam database . Kita bisa melakukan hal-hal yang biasanya bisa kita lakukan di phpMyAdmin, pgSQL, dan lain sebagainya. Hal yang sangat menarik dari aplikasi ini adalah dia bisa kita gunakan untuk berbagai macam jenis DBMS. Misalnya, kita bisa menyambungkannya dengan MySQL , MariaDB , PostgreSQL , SQL Server , SQLite , dan lain sebagainya. Anda bisa membaca selengkapnya pada website resminya di sini . Hal menarik lainnya adalah dia cross-platform . DBeaver bisa kita gunakan di Ubuntu, Windows, bahkan MacOS. Tentu pada artikel kali ini, kita akan fokus membahas instalasi di Ubuntu. Saya Sudah Mencobanya, Tetapi Tidak Berhasil Apabila Anda langsung ...
Baca selengkapnya

Cara Mengatasi "Access denied for user 'root'@'localhost' (mysqli_real_connect(): (HY000/1698))" di Ubuntu 20.04 LTS

Gambar
Bismillahirrohmaanirrohiim. Alhamdulillahi Robbil 'Alamiin. Allahumma Sholli 'Alaa Sayyidinaa Muhammad. Apakah Anda selalu menjumpai error tersebut ketika melakukan update di Ubuntu Anda? Jika iya, berarti kita mengalami hal yang sama. Saya juga selalu mengalami hal tersebut setiap selesai menjalankan sudo apt upgrade . Well . Sebenarnya tidak selalu. Mungkin lebih tepatnya adalah ketika sistem melakukan update pada MySQL-nya. So , pada artikel kali ini saya menunjukkan cara yang saya lakukan untuk mengatasi error tersebut. Ohiya. Sebenarnya, saya sudah lama menemui error ini dan sudah mengatasinya berulang kali dengan membuka kembali link ke StackOverflow yang pernah saya ceritakan pada artikel terdahulu . Lalu, mengapa saya menulis ini? Agar saya lebih mudah saja melakukannya secara terstruktur tanpa harus klik dan scroll-scroll jawaban di StackOverflow tadi. Baiklah, mari kita mulai saja. Langkah-langkah Mengatasinya Pertama, buka terminal . Buka mysql sebagai root ...
Baca selengkapnya

Petualangan MySQL: Pengelaman Mencari Tahu Penyebab Data Hilang dan Mengembalikannya

Gambar
Bismillahirrohmaanirrohiim. Alhamdulillahi Robbil 'Alamiin. Allahumma Sholli 'Alaa Sayyidinaa Muhammad. Saya baru saja mengalami petualangan yang tidak saya duga dengan database MySQL. Masalah ini cukup serius dan masalah ini bisa saja Anda alami. Photo by Pixabay: https://www.pexels.com/photo/fire-fighter-wearing-black-and-yellow-uniform-pointing-for-something-70573/ Jadi, klien saya ada yang mengalami masalah cukup serius: data pada mayoritas kolom di tabel produknya hilang semua secara tiba-tiba. Entah bagaimana ceritanya, tetapi klien saya memiliki 2 tujuan yang menurut saya jelas: apa penyebab hal ini terjadi dan mengembalikan data produknya seperti sedia kala . Mari saya jelaskan bagaimana saya menanganinya. Mencari Tahu Penyebab Data Hilang Untuk tujuan yang ini, saya pikir kita harus mengecek hal yang akan sangat membantu kita: log . Semua aktivitas yang terjadi dalam database , seharusnya memang dicatat di dalam log . Berhubung database yang digunakan oleh klien say...
Baca selengkapnya