npm init vue@latest

cd npm install npm run dev

npm i axios

Dan silahkan tunggu proses installasinya sampai selesai, dan pastikan harus terhubung dengan internet karena axios akan di unduh secara online. Langkah 2 - Installasi Vue Router

Vue Router merupakan library official dari Vue Js untuk membuat sebuah route dengan lebih mudah dan SPA atau Single Page Application. Kita bisa dengan mudah menambahkan library ini di dalam project Vue Js, silahkan jalankan perintah di bawah ini untuk menambahkan Vue Router.

npm i vue-router@next

Langkah 3 - Installasi Bootstrap, jQuery dan Popper.js

Bootstrap merupakan salah satu CSS Framework yang sangat populer dan banyak sekali digunakan oleh para web developer dalam mengembangkan sebuah aplikasi dan website, karena kemudahan dan memiliki banyak component yang di sediakan untuk mempercepat dalam membangun sebuah tampilan website secara responsive.

Jalankan perintah di bawah ini untuk menginstall Bootstrap, jQuery dan Popper.js di dalam project Vue Js kita.

npm i bootstrap jquery popper.js

Langkah 4 - Membuat View

Sebelum kita melakukan konfigurasi Vue Router, sekarang kita akan membuat basic template/view yang akan kita gunakan untuk menampilkan halaman form register, login dan dashboard.

Silahkan buat folder baru dengan nama views di dalam folder src. Kemudian di dalam folder views silahkan buat folder lagi dengan nama auth dan di dalam folder auth silahkan buat 2 file baru, yaitu : Register.vue dan Login.vue.

Kemudian, di dalam folder src/views silahkan buat folder baru lagi dengan nama dashboard dan di dalam folder dashboard silahkan buat file baru dengan nama Index.vue. Kurang lebih struktur foldernya seperti berikut ini :

Sekarang, kita lanjutkan untuk memberikan basic template di masing-masing view di atas. Silahkan buka file src/views/auth/Register.vue, kemudian masukkan kode berikut ini :

Kemudian buka file src/views/auth/Login.vue dan masukkan kode berikut ini :

Terakhir, buka file src/views/dashboard/Index.vue dan masukkan kode berikut ini :

Di atas, kita hanya memberikan sample basic template saja dan kita akan ubah di langkah-langkah selanjutnya. Langkah 5 - Membuat Route

Sekarang, kita akan belajar membuat sebuah route di dalam aplikasi Vue. Silahkan buat folder baru dengan nama router di dalam folder src. Kemudian, silahkan buat file baru di dalam folder router dengan nama index.js. Dan masukkan kode berikut ini :

//import vue router import { createRouter, createWebHistory } from 'vue-router'

//define a routes const routes = [ { path: '/login', name: 'login', component: () => import( / webpackChunkName: "login" / '@/views/auth/Login.vue') }, { path: '/register', name: 'register', component: () => import( / webpackChunkName: "register" / '@/views/auth/Register.vue') }, { path: '/dashboard', name: 'dashboard', component: () => import( / webpackChunkName: "dashboard" / '@/views/dashboard/Index.vue') } ]

//create router const router = createRouter({ history: createWebHistory(), routes // config routes })

export default router

Di atas, pertama kita import createRouter dan createWebHistory dari Vue Router.

//import vue router import { createRouter, createWebHistory } from 'vue-router'

createRouter akan digunakan untuk menginisialisasi konfigurasi dari route yang akan kita buat, sedangkan createWebHistory merupakan mode history dari Vue Router.

Mode history di dalam Vue Router ada 2, yaitu createWebHistory dan createWebHashHistory, perbedaanya kurang lebih seperti berikut ini :

createWebHistory

http://domain.com/post/artikel-1
http://domain.com/post/artikel-2

createWebHashHistory

http://domain.com/#/post/artikel-1
http://domain.com/#/post/artikel-2

Ya, benar. Jika kita menggunakan jenis createWebHashHistory, maka URL akan di tambahkan # di depannya.

Kemudian, kita define 3 route, contohnya seperti ini :

{ path: '/login', name: 'login', component: () => import( / webpackChunkName: "login" / '@/views/auth/Login.vue') }

Dari route di atas, kurang lebih penjelasannya seperti berikut ini :

path - merupakan URL yang akan dibuat, di atas contohnya adalah /login.
name - merupakan nama dari route yang kita buat, ini digunakan agar mempermudah kita dalam memanggil route di dalam component.
component - merupakan view/component yang akan digunakan saat route ini di panggil, di atas contohnya kita akan memanggil file di dalam folder src/views/auth/Login.vue.

INFO :

@ bisa diartikan sebagai folder src

Langkah 6 - Register Router di Main.js

Sekarang, kita lanjutkan untuk proses register vue router agar bisa diakses secara global di dalam project Vue. Silahkan buka file src/main.js kemudian, ubah semua kode-nya menjadi seperti berikut ini :

import { createApp } from 'vue' import App from './App.vue'

//import router import router from './router'

const app = createApp(App)

//use vue router app.use(router)

app.mount('#app')

Di atas, pertama kita import router dari folder router.

//import router import router from './router'

Setelah itu, kita gunakan Router di dalam Vue Js menggunakan plugin use.

//use vue router app.use(router)

Langkah 7 - Konfigurasi Bootstrap di Vue Js

Sekarang, kita lanjutkan untuk mengkonfigurasi Bootstrap agar bisa digunakan di dalam project Vue. Silahkan buka file src/main.js kemudian ubah kode-nya menjadi seperti berikut ini :

import { createApp } from 'vue' import App from './App.vue'

//import router import router from './router'

//import Bootstrap, Popper, jQuery import 'bootstrap/dist/css/bootstrap.css' import 'jquery/dist/jquery.min' import 'popper.js/dist/popper.min' import 'bootstrap/dist/js/bootstrap.min'

const app = createApp(App)

//use vue router app.use(router)

app.mount('#app')

Di atas, kita menambahkan beberapa kode untuk mengimport bootstrap, yaitu :

//import Bootstrap, Popper, jQuery import 'bootstrap/dist/css/bootstrap.css' import 'jquery/dist/jquery.min' import 'popper.js/dist/popper.min' import 'bootstrap/dist/js/bootstrap.min'

Langkah 8 - Konfigurasi App.vue

Terakhir, agar vue router kita dapat di tampilkan di dalam project, maka kita akan menambahkan sintak di dalam file src/App.vue. Silahkan buka file src/App.vue, ubah kode-nya menjadi seperti berikut ini :

LARAVEL PASSPORT + VUE

Di atas, kita menambahkan beberapa element HTML dari bootstrap untuk membuat navigasi menu. Dan kita juga menambahkan kode yang digunakan untuk merender Vue Router.

Sekarang, jika kita jalankan/refresh project Vue, maka tampilannya akan berubah menjadi seperti berikut ini :

Silahkan klik REGISTER dan LOGIN, maka kita akan mendapatkan hasil yang kurang lebih seperti berikut ini :

Di atas, kita sudah berhasil menampilkan halaman menggunakan Vue Router. Di artikel selanjutnya kita semua akan belajar bagaimana cara membuat proses register menggunakan Laravel Passport dan Vue Js.

Langkah 1 - Edit View Register

Sekarang, kita akan melakukan perubahan kode yang ada di dalam view/component registeer. SIlahkan buka file src/views/auth/Register.vue kemudian ubah semua kode-nya menjadi seperti berikut ini :

Di atas, pertama kita import Reactivity API dari Vue, yaitu reactive dan ref, ini akan digunakan untuk membuat sebuah state/variable menjadi reaktif.

mport { reactive, ref } from 'vue'

Setelah itu, kita import hook useRouter dari Vue Router, ini digunakan agar kita dapat menggunakan Vue Router di dalam Composition API.

import { useRouter } from 'vue-router'

Kemudian, kita import Axios, ini akan digunakan untuk melakukan HTTP request ke server / REST API.

import axios from 'axios'

Untuk menginisialisasi Composition API di dalam component, kita menggunakan kode seperti berikut ini :

setup() {

// ...

}

Dengan Composition API, maka semua kode akan di tulis di dalam method setup.

Di dalam Composition API, pertama kita melakukan inisialisasi Vue Router.

//inisialisasi vue router on Composition API const router = useRouter()

Setelah itu, kita buat state user dengan jenis reactive. Ini agak kita gunakan untuk menyimpan input dari from.

//state user const user = reactive({ name: '', email: '', password: '', password_confirmation: '' })

Kemudian, kita buat state lagi untuk validation dan kita gunakan jenis ref.

//state validation const validation = ref([])

CATATAN:

Jika menggunakan reactivity API ref di dalam function setup, maka untuk set dan get data harus menggunakan single objek .value.

Tapi untuk menampilkan di template kita tidak perlu menggunakan single object .value.

Dan untuk proses register, kita menggunakan method register, di daman di dalamnya akan mengirimkan data yang di dapatkan dari state user dan dikirimkan ke server menggunakan Axios.

//method register function register() {

// ...

}

Untuk mengirim data ke server, kita memanggil endpoint API register, kurang lebih seperti berikut ini :

//send server with axios axios.post('http://localhost:8000/api/register', { name, email, password, password_confirmation })

Jika data berhasil di simpan di dalam server, maka kita akan di arahkan ke route yang bernama login.

//redirect ke halaman login return router.push({ name: 'login' })

Jika data gagal disimpan di server, maka akan melakukan assign error response ke dalam state validation, kurang lebih seperti berikut ini :

//set validation dari error response validation.value = error.response.data

Di atas, bisa kita perhatikan, jika ingin melakukan set dan get data di state yang memiliki jenis ref, maka kita perlu menambahkan single object .value.

Terakhir, agar kode di dalam Composition API bisa digunakan, kita perlu melakukan return semua state dan function/method yang ada.

return { user,
// <-- state user validation, // <-- state validation register
// <-- method register }

Dan di dalam template, untuk form action, kita arahkan ke dalam method register yang sudah kita buat di atas.

Langkah 2 - Uji Coba Proses Register

Sekarang, kita akan lakukan uji coba untuk proses register, silahkan buka project Vue Js di localhost:8080/register jika berhasil kurang lebih tampilannya seperti berikut ini :

Silahkan klik REGISTER tanpa memasukkan data apapun, maka kita akan mendapatkan error validation yang dikirim melalui server / REST API.

Sekarang, silahkan isi formnya dan klik REGISTER, jika berhasil, maka kita akan di arahkan ke halaman login. Dan jika teman-teman cek di dalam database, maka data jugaa berhasil masuk.

Sampai disini pembahasan tentang bagaimana cara membuat proses register menggunakan Vue Js dan Laravel Passport. Di artikel selanjutnya kita akan belajar bagaimana cara membuat proses login di Vue Js.

Langkah 1 - Edit View Login

Sekarang, kita akan melakukan perubahan di dalam view/component login. Silahkan buka file src/views/auth/Login.vue dan ubah kode-nya menjadi seperti berikut ini :

Di atas, pertama kita import Reactivity API dari Vue, yaitu reactive dan ref, ini akan digunakan untuk membuat sebuah state/variable menjadi reaktif.

mport { reactive, ref } from 'vue'

Setelah itu, kita import hook useRouter dari Vue Router, ini digunakan agar kita dapat menggunakan Vue Router di dalam Composition API.

import { useRouter } from 'vue-router'

Kemudian, kita import Axios, ini akan digunakan untuk melakukan HTTP request ke server / REST API.

import axios from 'axios'

Untuk menginisialisasi Composition API di dalam component, kita menggunakan kode seperti berikut ini :

setup() {

// ...

}

Dengan Composition API, maka semua kode akan di tulis di dalam method setup.

Di dalam Composition API, pertama kita melakukan inisialisasi Vue Router.

//inisialisasi vue router on Composition API const router = useRouter()

Setelah itu, kita buat state user, ini akan digunakan untuk menampung data yang di masukkan dari form dan state ini menggunakan jenis reactive.

//state user const user = reactive({ email: '', password: '', })

Kemudian, kita juga buat state lagi dengan nama validation dan jenis yang akan kita gunakan dalam state ini adalah ref. State ini akan di assign sebuah response error yang di dapatkan dari server.

//state validation const validation = ref([])

Dan kita juga buat state untuk menampilkan alert jika gagal melakukan proses login.

//state loginFailed const loginFailed = ref(null)

CATATAN:

Jika menggunakan reactivity API ref di dalam function setup, maka untuk set dan get data harus menggunakan single objek .value.

Tapi untuk menampilkan di template kita tidak perlu menggunakan single object .value.

Selanjutnya, kita buat function/method yang bernama login, method ini akan di jalankan ketika kita melakukan submit form login.

//method login function login() {

// ...

}

Di dalam method login kita melakukan send data ke server berupa email dan password.

//send server with axios axios.post('http://localhost:8000/api/login', { email, password, })

Jika data di temukan, maka kita akan membuat localStorage dengan nama token dan isinya kita ambil dari hasil response yang di dapatkan dari REST API. Setelah itu akan di arahkan ke halaman dashboard.

if(response.data.success) {

//set token localStorage.setItem('token', response.data.token)

//redirect ke halaman dashboard return router.push({ name: 'dashboard' }) }

Jika data tidak ditemukan di server, maka kita akan mengubah nilai state loginFailed menjadi true.

//set state loggedIn to true loginFailed.value = true

Dan untuk menampilkanya di dalam template, kita menggunakan kode seperti berikut ini :

Dan terakhir, jangan lupa untuk melakukan return semua state dan function/method yang ada di dalam Composition API.

return { user, // <-- state user validation, // <-- state validation loginFailed, // <-- state loggedIn login // <-- method login }

Langkah 2 - Uji Coba Proses Login

Sekarang, kita akan uji coba proses login, silahkan buka di localhost:8080/login jika berhasil maka tampilannya seperti berikut ini :

Sekarang, silahkan klik LOGIN tanpa mengisi data apapun, maka kita akan mendapatkan error validasi message seperti berikut ini :

Dan jika kita masukkan email dan password yang tidak tersedia di database, maka kita akan mendapatkan message login failed, kurang lebih seperti berikut ini :

Sekarang, kita coba memasukkan email dan password yang ada di dalam database, maka kita akan di arahkan ke halaman dashboard.

Dan jika kita cek pada tab Application > Local Storage, maka data token kita berhasil di simpan.

Di atas, kita sudah berhasil melakukan proses login di dalam Vue Js. Di artikel selanjutnya kita akan belajar untuk mengubah halaman dashboard dan membuat fungsi logout.

Langkah 1 - Edit View Dashboard

Sekarang, silahkan buka file src/views/dashbaord/Index.vue kemudian ubah kode-nya menjadi seperti berikut ini :

Di atas, pertama kita import hook onMounted dan Reactivity API ref.

import { onMounted, ref } from 'vue'

Kemudian, kita import hook useRouter dari Vue Router.

import { useRouter } from 'vue-router'

Karena kita akan menampilkan data dari server, maka kita akan menggunakan Axios untuk melakukan HTTP request ke dalam server. Oleh sebab itu, maka kita harus mengimportnya terlebih dahulu.

import axios from 'axios'

Kemudian, untuk menginisialisasi Composition APi di dalam Vue Js, kita bisa menggunakan method setup. Kurang lebih seperti berikut ini :

setup() {

// ...

}

Di dalam Composition API, pertama kita buat state yang bernama token di dalam di dalamnya berupa localStorage yang memiliki nama token.

Setelah itu, kita akan menginisialisasi Vue Router menggunakan hook useRouter.

//inisialisasi vue router on Composition API const router = useRouter()

Selanjutnya, kita buat setate baru lagi dengan nama user, state ini akan kita gunakan untuk menampung data user yang di dapatkan dari server nantinya. Dan state ini menggunakan jenis Reactivity ref.

//state user const user = ref('')

Kemudian, kita akan menggunakan hook onMounted untuk melakukan get data user ke dalam server, dan di dalam Axios kita juga parsing token yang kita dapatkan dari locaStorage. Sebelum melakukan get data user, di dalam hook ini kita melakukan check apakah data token ada, jika tidak maka akan di arahkan ke halaman login.

//check Token exist if(!token) { return router.push({ name: 'login' }) }

//get data user axios.defaults.headers.common.Authorization = Bearer ${token} axios.get('localhost:8000/api/user')

Jika data user di temukan, maka akan di assign ke dalam state user.

//console.log(response.data.name) user.value = response.data

Di atas, karena state user menggunakan jenis ref, maka untuk set data kita tambahkan single object .value.

Dan untuk menampilkan data user di dalam template, kita menggunakan kode seperti berikut ini :

{{ user.name }}

Setelah itu, kita juga menambahkan 1 method lagi untuk proses logout. Method ini akan di jalankan ketika kita melakukan klik tombol logout yang berada di dalam template.

LOGOUT

Jika link di atas di klik, maka akan di arahkan ke dalam method logout, yang mana di dalam method logout kita melakukan request ke dalam server untuk menghapus data token.

Jika proses hapus data token di server berhasil, maka kita akan melakukan remove localStorage yang bernama token di dalam browser.

//remove localStorage localStorage.removeItem('token')

Dan kita akan di arahkan ke dalam halaman login.

Terakhir, agar semua state dan method di dalam Composition API dapat digunakan, maka kita harus melakukan return.

return { token, // <-- state token user, // <-- state user logout // <-- method logout }

Langkah 2 - Uji Coba

Sekarang, silahkan refresh / reload halaman dashboard, maka kita akan mendapatkan tampilan seperti berikut ini :

Sekarang, silahkan klik logout, maka kita akan berhasil melakukan proses logout dan di arahkan ke halaman login. Sampai disini pembahasan tentang bagaimana cara membuat Authentication menggunakan Laravel Passport dan Vue Js 3 Composition API.