Artikel ini adalah lanjutan dari artikel Installasi Vue.js. Kali ini saya akan sharing  membuat templating dengan vue 3 dan vue router 4. Okey kita mulai aja langsung

• Yang pasti kalian harus install vuenya dulu. bisa di baca disini
• Setelah installasi Vue selesai, kita install vue router versi 4 dengan perintah npm add vue-router@4 kalau sudah selesai, kita cek file package.json untuk memastikan apakah sudah benar atau tidak vue router yang kita install.
• Buat folder components di dalam folder src, folder components akan digunakan untuk menampung halaman web yang akan kita buat.
  note : web yang kali ini kita bikin berbasis SPA (Single Page Application).
• Kemudian buat file
  - Home.vue (Halaman depan),
  - Artikel.vue (Halaman artikel),
  - dan Navigasi.vue (Halaman menu navigasi,
  dengan format folder sebagai berikut

-- src

   ...

   -- components
      -- views
         -- Artikel.vue
         -- Home.vue
   -- Navigasi.vue

   ...

• Buka file Home.vue dan isikan code berikut

<template>
   <div class="container">
      <div class="wrap-artikel">
         Home
      </div>
   </div>
</template>

•  Buka file Artikel.vue dan isikan code berikut

<template>
   <div class="container">
      <div class="wrap-artikel">
         Artikel
      </div>
   </div>
</template>

• Buat folder router didalam folder src, folder router digunakan untuk menampung router yang akan kita buat.
• Buat file index.js di dalam folder router. Lalu isikan code berikut

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../components/views/Home.vue'
import Artikel from '../components/views/Artikel.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/artikel',
    name: 'Artikel',
    component: Artikel
  }
]
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})
export default router

• Lalu buka file main.js, dan tambahkan import router. menjadi seperti ini

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

createApp(App).use(router).mount('#app')

• edit file App.vue menjadi seperti ini

<style>
@import './assets/css/styles.css';
</style>

<template>
   <header>
      <TheHeading />
   </header>

   <div>
      <router-view />
   </div>
</template>

<script>
import TheHeading from './components/Navigasi.vue';

export default {
   components: {TheHeading},
}
</script>

• Buka file Navigasi.vue, lalu masukan code berikut

<template>
   <div class="nav-header">
      <div class="container">
         <div class="content-row">
            <div class="logo-header">
               <img src="../assets/images/logo.png">
            </div>
            <nav>
               <router-link class="nav-link" to="/">Home</router-link>
               <router-link class="nav-link" to="/artikel">Artikel</router-link>
            </nav>
         </div>
      </div>
   </div>
</template>

• Buat folder css di dalam folder assets.
• Buat file style.css, file ini digunakan untuk memberikan css agar view kita lebih menarik. Masukan code berikut di style.css

html,
body {
  position: relative;
  margin: 0;
}
body {
  font-family: "tahoma", arial, sans-serif;
  line-height: 1.8;
  scroll-behavior: smooth;
  background-color: #f8fef9;
  background-image: none;
}
a {
  text-decoration: none;
}
a:hover,
a:focus {
  text-decoration: none;
}
.container {
  width: 1000px;
  margin: auto;
}
.content-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.wrap-artikel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 30px;
}

.nav-header {
  width: 100%;
  padding: 8px 0px;
  background-color: #fff;
  -webkit-box-shadow: 0px 7px 5px -7px #c4c4c4;
  box-shadow: 0px 7px 5px -7px #c4c4c4;
}

/* Logo */
.logo-header {
  width: 100px;
}
.logo-header img {
  height: 36px;
  display: block;
  margin: 2px 0px;
}

/* Navigasi */
nav {
  width: calc(100% - 100px);
  font-family: "Heebo-Medium", arial, sans-serif;
  font-size: 16px;
  margin: 6px 0px;
}
nav .nav-link {
  margin: 0px 16px;
  color: #282828;
  cursor: pointer;
  -webkit-transition: ease all 0.4s;
  transition: ease all 0.4s;
}
nav .nav-link:hover {
  color: #41b883;
}

Setelah semua selesai, coba kita jalankan dengan perintah npm run dev dan setelah compailing selesai, biasanya bisa kita buka disini http://localhost:3000/

Dan hasilnya akan seperti gambar dibawah.