Halo teman-teman semuanya, pada seri artikel kali ini kita semua akan belajar bagaimana cara mengimplementasikan login menggunakan Google di project berbasis Vue.
Pada seri sebelumnya, saya sudah membahas bagaimana membuat proses login dengan Google di React dan pada kesempatan kali ini, kita akan menggunakan Vue.
INFO : Login dengan Google di React
Langkah 1 - Installasi Node.js
Pertama, kita perlu menginstall Node.js di dalam komputer terlebih dahulu, jika teman-teman belum menginstall-nya, maka silahkan diinstall terlebih dahulu.
Untuk langkah-langkah installasi Node.js, teman-teman bisa ikuti dari situs resminya di https://nodejs.org/en/download dan untuk memastikan, apakah Node.js sudah berhasil terinstall, silahkan jalankan perintah berikut ini di dalam terminal/CMD.
node --version
npm --version
Langkah 2 - Membuat Project React (Vite)
Sekarang kita akan lanjutkan belajar membuat project Vue menggunakan Vite. Silahkan teman-teman masuk ke dalam folder dimana akan menyimpan project-nya, kemudian jalankan perintah berikut ini di dalam terminal/CMD.
npm create vite@5.2.3 vue-google -- --template vue
Perintah di atas, digunakan untuk mengenerate template project Vue menggunakan Vite dan nama project-nya adalah vue-google.
Langkah 3 - Menjalankan Project React
Setelah berhasil membuat template project Vue dengan Vite, maka kita akan lanjutkan untuk melakukan installasi dependensi yang dibutuhkan.
Silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD.
cd vue-google
Perintah di atas, digunakan untuk masuk ke dalam folder project yang sudah kita buat sebelumnya.
Setelah itu, silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan sudah berada di dalam project-nya.
npm install
Silahkan ditunggu proses installasinya sampai selesai dan pastikan teman-teman terhubung dengan internet.
Setelah selesai, sekarang kita akan belajar bagaimana cara menjalankan project-nya, silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam project-nya.
npm run dev
Jika berhasil, project akan dijalankan di dalam localhost dengan port 5173. Teman-teman bisa mengaksesnya di browser dengan mengetikkan http://localhost:5173.
Langkah 4 - Menambahkan CSS Bootstrap
Agar nanti tampilkan project lebih bagus, maka kita akan integrasikan dengan Bootstrap. Silahkan teman-teman buka file index.html yang ada di dalam project, kemudian ubah semua kode-nya menjadi seperti berikut ini.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Google Sign In - SantriKoding.com</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: lightgray;
}
</style>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script type="module" src="/src/main.js"></script>
</body>
</html>
Dari perubahan kode di atas, kita melakukan load Css dan Js dari Bootstrap secara online (CDN).
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
Kesimpulan
Pada artikel ini, kita semua telah belajar bagaimana cara membuat project Vue menggunakan Vite, menjalankan project Vue dan mengintegrasikan project Vue dengan Bootstrap.
Pada artikel selanjutnya, kita semua akan belajar bagaimana cara konfigurasi OAuth Google di dalam project Vue.
Terima Kasih