Modul Praktikum Workshop Pemrograman Web 8

Politeknik Elektronika Negeri Surabaya
Praktikum Workshop Pemrograman Web

SPA dengan Vue Router

2023
Daftar Isi:
1
1.1 Instalasi Vue Router

1.2 Pembuatan Navigasi Halaman sederhana
1.3 Pembuatan Nested Route
1.4 Pembuatan Rute Dinamis
2
1.1 Instalasi Vue Router

Berikut langkah-langkah dari percobaan ini :
1. Buat sebuah project vue vite dengan nama
“vuep8”(langkah-langkah seperti pertemuan 1)
2. Jika sudah buka project yang telah dibuat di IDE

(VSCode)
3. Selanjutnya masuk ke folder vuep8 di terminal

IDE dan buat folder di dalam src dengan folder
router.
3
4. Selanjutnya di folder router di vuep8 ini buat

sebuah file js dengan nama index.js
5. Selanjutnya buka file “index.js” kita membuat

router dengan sintak sbb:
import { createWebHistory, createRouter } from "vue-router";
const routes = [
{
path: "",
name: "",
component: ,
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
Sintak diatas merupakan template default dalam

mendefinisikan rute pada vue js 3. Yang perlu
4
diperhatikan adalah const routes, dimana rute yang

akan kita daftarkan akan kita tulis di sini.
Penjelasan 3 bagian diatas adalah sbb:
path - jalur URL tempat rute ini dapat ditemukan.
name - Nama opsional untuk digunakan saat kita
menautkan ke rute ini.
component - Komponen mana yang akan dimuat saat
rute ini dipanggil.
6. Tahap selanjutnya kita akan import dan memakai
library vue router yang sudah kita install
sebelumnya. Masuk ke file main.js lalu tambahkan
sintak berikut:
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
7. Selanjutnya kita akan membuat dua halaman vue baru

untuk mencoba cara penggunaan dua direktif vue router
yaitu <router-view> dan <router-link>
Yang pertama kita membuat halaman home.vue dan
about.vue kita buat di folder component
5
Jika sudah membuat dua halaman vue masing-masing

kita isi tulisan sederhana sbb:
Untuk Home.vue
<template>
Ini Halaman Home
</template>
Untuk About.vue
<template>
Ini Halaman About
</template>
8. Selanjutnya kita membuat route 2 halaman ini, buka
folder routes dan buka halaman index.js lalu tambahkan
sintak berikut:
import Home from '../components/Home.vue'
import About from '../components/About.vue'
const routes = [
{
path: "/",
name: "home",
component: Home,
},
{
path: "/about",
name: "about",
component: About,
},
];
6
routes,
});
Jika dilihat di dalam kotak menunjukkan untuk route masing-
masing halaman di deklarasikan di dalam array “const
routes” isikan path, name, dan component masing-masing
sesuai kebutuhan. Sebelum isi array ini kita harus
mengimport komponen halaman Home.vue dan About.vue.
9. Selanjutnya kita akan memanggil halaman route yang
dibuat yaitu “/”yang menunjukkan halaman Home.vue dan
“/about” menunjukkan halaman About.vue. Kita buka halaman
App.vue pertama yang kita lakukan hapus semua isi App.vue
dan ubah dengan sintak berikut:

<template>
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view />
</template>
Jika dilihat ada dua direktif yang bisa digunakan , untuk
<router-link to=””></router-link> digunakan untuk
mengganti <a href></a> sedangkan untuk <router-view /> akan
menampilkan path “/”yang kita deklarasikan dimana di
dalam percobaan ini adalah halaman Home.vue:

{
path: "/",
name: "home",
7
component: Home,
},
10. Setelah semua sudah di lakukan simpan dan coba jalankan
projecy vuep8 : npm run dev. Hasil akan sbb:
Jika kita klik Home maka hasil sbb:
Jika kita klik About maka hasil sbb:
Jika sudah muncul seperti diatas maka percobaan penggunaan
route sederhana sudah berhasil kita lakukan.
8
1.2 Pembuatan Navigasi Halaman Sederhana

Berikut langkah-langkah dari percobaan ini :
1. Masih di dalam project vuep8, kita akan membuat
sebuah halaman vue yang menujukkan contoh pembuatan
sebuah navigasi halaman. Kita buat sebuah halaman
vue dengan nama AppNav.vue yang kita letakkan di
dalam folder /components.
2. Jika sudah dibuat kita masukkan sintak pembuatan

navigasi halaman sbb:
<template>
<nav
class="navbar navbar-light bg-white navbar-expand-lg bg-light border-bottom"
>
<div class="container">
<a class="navbar-brand" href="#"> VueCommerce </a>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<router-link class="nav-link" to="/"
>Home</router-link
>
</li>
<router-link class="nav-link" :to="{ name: 'about' }"
9
>About</router-link
>
</li>
</ul>
</div>
</nav>
<router-view></router-view>
</template>
Pada sintak diatas ada 2 menu navigasi yang kita

buat yaitu menu home dan about. Dalam menu navigasi
ini kita memanfaatkan dua halaman sebelumnya yang
kita buat.
3. Setelah kita membuat halaman AppNav.vue
selanjutnya kita import dan coba jalankan
AppNav.vue dengan cara edit main.js menjadi sbb:
import AppNav from './components/AppNav.vue'
createApp(AppNav).use(router).mount('#app')
4. Dalam project ini kita akan menggunakan beberapa

class dan style dalam tampilan agar tampilan lebih
bagus, untuk itu di dalam halaman index.html kita
tambahkan import untuk library bootstrap sbb:
<!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" />
10
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfID
Pvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
integrity="sha384-
B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVI
U" crossorigin="anonymous">
<title>Vite + Vue</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
5. Selanjutnya jalankan project vuep8 dengan

mengetikan npm run dev maka hasilnya akan sebagai
berikut:
Jika kita klik 2 menu navigasi diatas maka akan

muncul sebagai berikut:
- Untuk Home
11
- Untuk About
Jika diperhatikan pada tampilan diatas jika kita

memilih menu menu yang sedang dipilih tidak
terlihat sehingga kurang membantu user dalam akses
menu. Untuk mempermudah user sebaiknya kita
menambah properti linkActiveClass: "active". Kita akan
menambahkan properti bawaan vue ini kedalam halaman
index.js di folder /routes sbb:
12
Sintak yang dilakukan adalah sebagai berikut:

import Home from '../components/Home.vue'
import About from '../components/About.vue'
const routes = [
{
path: "/",
name: "home",
component: Home,
},
{
path: "/about",
name: "about",
component: About,
},
];
routes,
linkActiveClass: "active",
});
Tambahkan properti yang didalam kotak ke halaman

index.js dan simpan. Setelah itu kita kembali lagi
ke halaman AppNav.vue lalu coba ketik menu navigasi
kembali. Jika halaman menjadi sbb maka percobaan
yang kita lakukan sukses.
13
14
1.3 Pembuatan Nested Ruote

Dalam percobaan nested route kita kan membuat dua
halaman vue baru. Berikut langkah-langkah
percobaan:
1. Masih di dalam project vuep8, kita buat satu
folder baru yaitu folder auth dan tiga halaman vue
dengan nama AuthView.vue, LoginForm.vue dan
RegistrasiForm.vue yang kita letakkan di dalam
folder /components sbb:
2. Jika sudah dibuat tiga halaman kita isi masing-

masing halaman vue yang dibuat dengan sintak
berikut ini. Untuk AuthView.vue kita tulis sintak
sbb:
<template>
<div class="auth-wrapper d-flex">
<div class="col-md-10 m-auto">
<div class="bg-white shadow-sm">
</div>
</div>
</div>
</template>
<style scoped>
.auth-wrapper {
15
min-height: 90vh;
}
</style>
LoginForm.vue kita tulis sintak sbb:

<template>
<h1 class="text-center p-4 border-bottom text-uppercase">Login Form</h1>
<div class="px-4 pt-4">

<form @submit.prevent="handleSubmit">
<base-input
label="Email"
v-model="user.email"
:error="errors['email']"
></base-input>
<base-input
label="Password"
v-model="user.password"
type="password"
:error="errors['password']"
></base-input>
<div class="mt-4 mb-2">
<button class="btn btn-block btn-primary">Login</button>
</div>
</form>
</div>
</template>
<script>
export default {
data() {
return {
user: {
email: "",
password: "",
},
errors: {},
};
},
methods: {
handleSubmit() {
this.$router.push({ name: "products" });
this.errors = {
email: ["The email field is required"],
password: ["The password field is required"],
16
};
},
},
};
</script>
Untuk RegisterForm.vue kita tulis sbb:

<template>
<h1 class="text-center p-4 border-bottom text-uppercase">Register Form</h1>
<div class="px-4 pt-4">

<form @submit.prevent="handleSubmit">
<base-input
label="Name"
v-model="user.name"
:error="errors['name']"
></base-input>
<base-input
label="Email"
v-model="user.email"
:error="errors['email']"
></base-input>
<base-input
label="Password"
v-model="user.password"
type="password"
:error="errors['password']"
></base-input>
<base-input
label="Password Confirmation"
v-model="user.password_confirm"
type="password"
:error="errors['password_confirm']"
></base-input>
<div class="mt-4 mb-2">
<button class="btn btn-block btn-primary">Register</button>
</div>
</form>
</div>
</template>
<script>
export default {
data() {
return {
17
user: {
name: "",
email: "",
password: "",
password_confirm: "",
},
errors: {},
};
},
methods: {
handleSubmit() {
this.errors = {
email: ["The email field is required"],
password: ["The password field is required"],
};
},
},
};
</script>
3. Jika kita lihat pada halaman LoginForm.vue dan

RegisterForm.vue memakai komponen
<base-input></base-input> untuk membuat form input
untuk itu kita buat halaman BaseInput.vue kita
taruh di folder form yang kita buat terlebih dahulu
di dalam folder /src sbb:
18
Jika sudah membuat folder dan halaman BaseInput.vue

selanjutnya kita membuat rusable komponen input
sbb:
<template>
<div class="form-group">
<label v-bind="labelFor">{{ label }}</label>
<input
class="form-control"
:class="{ 'is-invalid': getError }"
v-bind="$attrs"
:value="modelValue"
@input="handleInput"
/>
<div class="invalid-feedback" v-if="getError">{{ getError }}</div>
</div>
</template>
<script>
export default {
inheritAttrs: false,
props: {
label: {
type: String,
required: true,
},
modelValue: {
type: [String, Number],
default: null,
},
modelModifiers: {
default: () => ({}),
},
error: {
type: [Array, String],
default: null,
},
},
methods: {
handleInput(event) {
let value = event.target.value;
if (this.modelModifiers.number) {
19
value = Number(value);
}
if (this.modelModifiers.trim) {
value = value.trim();
}
this.$emit("update:modelValue", value);
},
},
computed: {
labelFor() {
return this.$attrs.id ? { for: this.$attrs.id } : {};
},
getError() {
return Array.isArray(this.error) ? this.error.join(", ") : this.error;
},
},
};
</script>
4. Jika sudah kita daftarkan komponen BaseInput

sebagai komponen global, untuk itu kita ke halaman
main.js dan sesuaikan sintak sbb:
import AppNav from './components/AppNav.vue'
import BaseInput from "./components/form/BaseInput.vue"
// createApp(AppNav).use(router).mount('#app')
const app = createApp(AppNav);
app.use(router);
app.component("base-input", BaseInput);
app.mount('#app');
5. Selanjutnya kita akan menambahkan halaman

LoginForm.vue serta AboutForm.vue ke halaman
AppNav.vue. Selanjutnya Buka AppNav.vue kita hapus
sintak lama yang ada dengan sintak baru sbb:
20
<template>
<nav
>
<router-link class="nav-link" to="/">Home</router-link>
</li>
>About</router-link
>
</li>
</ul>
<div class="form-inline mt-4 mt-md-0">

<router-link to="/auth/login"
class="btn btn-outline-secondary color-danger mr-2"
>Login</router-link
>
<router-link :to="{ name: 'auth.register' }" class="btn btn-success"
>Register</router-link
>
</div>
</div>
</nav>
</template>
6. Selanjutnya kita akan membuat nested route pada

halaman index.js di folder /routes.
21
7. Sealanjutnya kita tambahkan sintak berikut untuk

nested route halaman login dan register sbb:
import Home from "../components/Home.vue";
import About from "../components/About.vue";
import AuthView from "../components/auth/AuthView.vue";
import LoginForm from "../components/auth/LoginForm.vue";
import RegisterForm from "../components/auth/RegisterForm.vue";
const routes = [
{
path: "/",
name: "home",
component: Home,
},
{
path: "/about",
name: "about",
component: About,
},
{
path: "/auth",
component: AuthView,
children: [
{
path: "login",
component: LoginForm,
name: "auth.login",
},
{
path: "register",
22
component: RegisterForm,
name: "auth.register",
},
],
},
];

routes,
});
8. Jika sudah diedit dan simpan selanjutnya kita

buka browser, seharusnya muncul tampilan sbb:
9. Selanjutnya untuk membuktikan route berhasil

kita coba tekan tombol login dan register yang ada.
Jika kita ingat kembali untuk pemanggilan nested
route di AppNav.vue sbb:
23
Untuk pemanggilan link anak yakni

to=”/auth/login” dan :to=”{name:
‘auth.register’}”
Hasil ketika kita klik tombol adalah sbb untuk
tombol login:
24
untuk tombol register sbb:
25
10. Jika sudah muncul tampilan sbb dan tidak ada

eror maka percobaan sudah sukses.
26
1.4 Pembuatan Rute Dinamis

Berikut langkah-langkah dari percobaan ini:
1. Masih di project vuep8 kita akan mencoba membuat
sebuah rute untuk proses edit. Karena di project
ini belum ada halaman untuk menampilkan list data
dan untuk halaman edit oleh karena itu kita akan
membuat beberapa halaman yang bisa menunjukkan list
data dan untuk halaman edit data tersebut. Pertama
kita akan membuat beberapa halaman vue.
2. Selanjutnya kita akan membuat data list product

untuk percobaan ini, kita akan menggunakan library
axios dengan fake api json-server. Untuk itu
install (axios dan json-server) terlebih dahulu
sbb:
- npm install axios
- npm install json-server
27
3. Setelah install selesai kita buat file json baru

yaitu demo.json
4. Selanjutnya masuk ke demo.json isi dengan data

sbb:
{
"products": [
{
"id": 1,
"name": "Intelligent Granite Table",
"categoryId": 17,
"category": "Tools",
"price": 787
},
{
"id": 2,
"name": "Handcrafted Rubber Hat",
"category": "Games",
"categoryId": 6,
"price": 232
},
{
"id": 3,
"name": "Rustic Concrete Salad",
"category": "Jewelery",
28
"categoryId": 12,
"price": 115
},
{
"id": 4,
"name": "Gorgeous Concrete Pizza",
"category": "Garden",
"categoryId": 7,
"price": 250
},
{
"id": 5,
"name": "Refined Plastic Shoes",
"category": "Health",
"categoryId": 9,
"price": 844
},
{
"id": 6,
"name": "Awesome Metal Soap",
"categoryId": 17,
"category": "Tools",
"price": 326
},
{
"id": 7,
"name": "Intelligent Fresh Mouse",
"category": "Home",
"categoryId": 10,
"price": 783
},
{
"id": 8,
"name": "Licensed Soft Keyboard",
"category": "Music",
"categoryId": 15,
"price": 361
},
{
"id": 9,
"name": "Fantastic Rubber Pants",
"category": "Garden",
"categoryId": 7,
"price": 786
29
},
{
"id": 10,
"name": "Awesome Rubber Ball",
"category": "Automotive",
"categoryId": 1,
"price": 696
}
]
}
Selanjutnya jalankan demo.json pada folder src,

masuk ke folder src (jika diletakkan di dalam
folder src) setelah itu jalankan sintak ini : json-
server --watch demo.json
5. Selanjutnya kita kembali ke folder product, kita
akan mengisi dua halaman vue terkait product
(ProductForm, Product List dan ProductView).
Untuk ProductForm.vue kita isi sbb:
<template>Coba Route Dinamis {{ id }}</template>
<script>
export default {
props: {
show: {
type: Boolean,
default: false,
},
id: {
type: [String, Number],
default: null,
},
},
};
</script>
Untuk ProductList.vue kita isi sbb:

<template>
30
<div>
<table border="1">
<tr>
<th>No</th>
<th>Name</th>
<th>Category</th>
<th>Price</th>
<th>Action</th>
</tr>
<tr v-for="(product, index) in products">
<td>{{ index + 1 }}</td>
<td>{{ product.name }}</td>
<td>{{ product.category }}</td>
<td>{{ product.price }}</td>
<td><router-link
class="btn btn-sm btn-info"
:to="{ name: 'products.edit', params: { id: product.id } }"
>Edit</router-link
></td>
</tr>
</table>
</div>
</template>
<script>
/* Ambil data json dengan axios*/
import axios from "axios";
export default {
data() {
return {
form: {
id: "",
name: "",
},
products: [],
updateSubmit: false,
};
},
mounted() {
this.load();
},
methods: {
load() {
axios
.get("http://localhost:3000/products")
31
.then((res) => {
this.products = res.data; //respon dari rest api dimasukan ke products
})
.catch((err) => {
console.log(err);
});
},
},
};
</script>
Untuk ProductView.vue kita isi sbb:

<template>
</template>
6. Selanjutnya kita ke halaman index.js pada folder

routes untuk mendaftarkan rute dinamis halaman
product ini. Berikut adalah sintak lengkap index.js
pada folder routes:
import Home from "../components/Home.vue";
import About from "../components/About.vue";
import AuthView from "../components/auth/AuthView.vue";
import LoginForm from "../components/auth/LoginForm.vue";
import RegisterForm from "../components/auth/RegisterForm.vue";
import ProductList from "../components/product/ProductList.vue";
import ProductsView from "../components/product/ProductView.vue";
import ProductForm from "../components/product/ProductForm.vue";
const routes = [
{
path: "/home",
name: "home",
component: Home,
},
{
path: "/about",
name: "about",
component: About,
},
32
{
path: "/products",
component: ProductsView,
children: [
{
path: "",
component: ProductList,
name: "products",
},
{
path: ":id/edit",
name: "products.edit",
component:ProductForm,
props: true,
},
],
},
{
path: "/auth",
component: AuthView,
children: [
{
path: "login",
component: LoginForm,
name: "auth.login",
},
{
path: "register",
component: RegisterForm,
name: "auth.register",
},
],
},
];
routes,
});
33
7. Jika sudah disimpan kita ke halaman “main”

yaitu halaman AppNav.vue untuk menambahkan rute
halaman product yang sudah kita buat.
<template>
<nav
>
<router-link class="nav-link" to="/home">Home</router-link>
</li>
>About</router-link
>
</li>
<router-link class="nav-link" to="/products">Product</router-link>
</li>
</ul>
<div class="form-inline mt-4 mt-md-0">
<router-link
to="/auth/login"
class="btn btn-outline-secondary color-danger mr-2"
>Login</router-link
>
<router-link :to="{ name: 'auth.register' }" class="btn btn-success"
>Register</router-link
>
</div>
</div>
</nav>
</template>
8. Selanjutnya kita jalankan project vuep8 kembali

(jika sudah ditutup halaman browser) dengan sintak
34
npm run dev. Namun jika belum di tutup kita cek

kembali browser yang sedang menjalankan project
vuep8 sebelumnya.
9. Jika sudah berhasil running maka akan muncul
tampilan berikut:
10. Selanjutnya coba klik tombol Product , jika

sukses maka muncul tampilan sbb:
35
11. Lalu untuk coba rute dinamis kita coba cek link
di tombol edit dengan cara klik kanan pointer mouse
lalu klik “inspect element” atau “inspect”.
12. Lalu perhatikan tampilan di kolom elements :
Jika kita lihat ada link <a

href=”/product/1/edit”></a>di kolom elemen. Ini
merupakan contoh penggunakan rute dinamis karena
jika kita mengeklik tombol edit lain maka pada link
itu id akan mengikuti list data yang dipilih.
36
13. Untuk pembuktian coba pilih tombol pada 2 atau

3 list data maka cek masing2 elemen seharusnya dia
akan berubah linknya sesuai dengan id list data
yang dipilih.
37
- SELESAI -
38
Tugas Praktikum
1. Lanjutkan proyek yang sudah dibuat sebelumnya dengan
menambahkan proses route yang ada di dalam materi ini.
2. Kerjakan secara kelompok minimal 10 orang
3. Tugas berupa video/laporan (pilih salah satu) tentang
penjelasan singkat masing-masing halaman yang dibuat dan
source code dalam bentuk zip / link repository (github/gitlab/
aplikasi sejenis).
4. Upload tugas secara kelompok di link
https://pens.id/tugasMKPermogramanWeb2023.
Untuk pengisian gform tugas 1 kelompok mengupload 1 tugas
39
Untuk NRP dan nama lengkap bisa diisi nama kelompok.
Jangan lupa untuk makalah disertakan nama dan nrp masing-
masing mahasiswa pada sampul makalah.
5. Selamat Mengerjakan Semoga Sukses
40

Modul Praktikum Workshop Pemrograman Web 8

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Praktikum Workshop Pemrograman Web 8

Diunggah oleh

Hak Cipta:

Format Tersedia

Politeknik Elektronika Negeri Surabaya

Praktikum Workshop Pemrograman Web

Politeknik Elektronika Negeri Surabaya

1.1 Instalasi Vue Router

1.1 Instalasi Vue Router

2. Jika sudah buka project yang telah dibuat di IDE

3. Selanjutnya masuk ke folder vuep8 di terminal

4. Selanjutnya di folder router di vuep8 ini buat

5. Selanjutnya buka file “index.js” kita membuat

Sintak diatas merupakan template default dalam

diperhatikan adalah const routes, dimana rute yang

7. Selanjutnya kita akan membuat dua halaman vue baru

Jika sudah membuat dua halaman vue masing-masing

8. Selanjutnya kita membuat route 2 halaman ini, buka

folder routes dan buka halaman index.js lalu tambahkan

Jika dilihat di dalam kotak menunjukkan untuk route masing-

masing halaman di deklarasikan di dalam array “const

routes” isikan path, name, dan component masing-masing

sesuai kebutuhan. Sebelum isi array ini kita harus

mengimport komponen halaman Home.vue dan About.vue.

9. Selanjutnya kita akan memanggil halaman route yang

dibuat yaitu “/”yang menunjukkan halaman Home.vue dan

“/about” menunjukkan halaman About.vue. Kita buka halaman

App.vue pertama yang kita lakukan hapus semua isi App.vue

dan ubah dengan sintak berikut:

Jika dilihat ada dua direktif yang bisa digunakan , untuk

<router-link to=””></router-link> digunakan untuk

mengganti <a href></a> sedangkan untuk <router-view /> akan

menampilkan path “/”yang kita deklarasikan dimana di

dalam percobaan ini adalah halaman Home.vue:

10. Setelah semua sudah di lakukan simpan dan coba jalankan

projecy vuep8 : npm run dev. Hasil akan sbb:

Jika kita klik Home maka hasil sbb:

Jika kita klik About maka hasil sbb:

Jika sudah muncul seperti diatas maka percobaan penggunaan

route sederhana sudah berhasil kita lakukan.

1.2 Pembuatan Navigasi Halaman Sederhana

2. Jika sudah dibuat kita masukkan sintak pembuatan

Pada sintak diatas ada 2 menu navigasi yang kita

4. Dalam project ini kita akan menggunakan beberapa

5. Selanjutnya jalankan project vuep8 dengan

Jika kita klik 2 menu navigasi diatas maka akan

Jika diperhatikan pada tampilan diatas jika kita

Sintak yang dilakukan adalah sebagai berikut:

Tambahkan properti yang didalam kotak ke halaman

1.3 Pembuatan Nested Ruote

2. Jika sudah dibuat tiga halaman kita isi masing-

LoginForm.vue kita tulis sintak sbb:

<div class="px-4 pt-4">

Untuk RegisterForm.vue kita tulis sbb:

<div class="px-4 pt-4">

3. Jika kita lihat pada halaman LoginForm.vue dan

Jika sudah membuat folder dan halaman BaseInput.vue

4. Jika sudah kita daftarkan komponen BaseInput

5. Selanjutnya kita akan menambahkan halaman

<div class="form-inline mt-4 mt-md-0">

6. Selanjutnya kita akan membuat nested route pada

7. Sealanjutnya kita tambahkan sintak berikut untuk

const router = createRouter({

8. Jika sudah diedit dan simpan selanjutnya kita

9. Selanjutnya untuk membuktikan route berhasil

Untuk pemanggilan link anak yakni

untuk tombol register sbb: