• Langkah 1 - Component Home
• Langkah 2 - Component Login
• Langkah 3 - Component Dashboard
• Langkah 4 - Menambahkan Navbar

Halo teman-teman semuanya, setelah kita berhasil membuat project Vue Js baru sekarang kita lanjutkan untuk membuat beberapa component, diantaranya adalah

• home
• login
• dashboard
• navbar

Dan nanti kita akan menggunakan beberapa component dari Bootstrap seperti navbar, button, card dan lain-lain. Karena nanti untuk tampilannya kita akan menggunakan Framework Bootstrap.

Langkah 1 - Component Home

Sekarang silahkan buat folder baru dengan nama views di dalam folder src, kemudian buat folder baru lagi dengan home di dalam folder src/views dan di dalam folder home silahkan buat file baru dengan nama Index.vue dan kemudian silahkan masukkan kode berikut ini :

<template>
    <div class="home">
        <div class="jumbotron">
            <div class="container">
            <h1 class="display-3">SANTRIKODING</h1>
            <p>Belajar Membuat Authentication Dengan Laravel Sanctum dan Vue Js.</p>
            <p><a class="btn btn-primary btn-lg" href="#" role="button">Selengkapnya &raquo;</a></p>
            </div>
        </div>        
    </div>
</template>

<script>
export default {
    name: 'Home'
}
</script>

Di atas kita menggunakan jumbotron dari Bootstrap untuk membuat tampilan di halaman home.

Langkah 2 - Component Login

Silahkan buat folder baru dengan nama auth di dalam folder src/views dan di dalam folder auth silahkan buat file baru dengan nama Index.vue dan kemudian ubah kodenya menjadi seperti berikut ini :

<template>
    <div class="login">
        ini halaman login    
    </div>
</template>

<script>
export default {
    name: 'Login'
}
</script>

Langkah 3 - Component Dashboard

Silahkan buat folder baru dengan nama dashboard di dalam folder src/views dan di dalam folder dashboard silahkan buat file baru dengan nama Index.vue dan kemudian ubah kodenya menjadi seperti berikut ini :

<template>
    <div class=“dashboard" style="margin-top:100px">
        ini halaman dashboard    
    </div>
</template>

<script>
export default {
    name: 'Dashboard'
}
</script>

Langkah 4 - Menambahkan Navbar

Sekarang kita akan tambahkan navbar di dalam project Vue Js kita, silahkan buka file src/App.vue kemudian ubah semua kodenya menjadi seperti berikut ini :

<template>
  <div id="app">
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
      <router-link :to="{name: 'home'}" class="navbar-brand">SANTRIKODING</router-link>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
        aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <router-link :to="{name: 'home'}" class="nav-link">HOME</router-link>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">TENTANG</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">BERITA</a>
          </li>
        </ul>
        <div class="form-inline my-2 my-lg-0">
          <router-link :to="{name: 'login'}" v-if="!loggedIn" class="btn btn-primary my-2 my-sm-0">LOGIN</router-link>
        </div>
      </div>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'App',

    data() {
      return {
        loggedIn: null
      }
    },

    methods: {
      getLoggedIn() {
        this.loggedIn = localStorage.getItem("loggedIn")
      }
    },

    watch: {
      $route: {
        immediate: true,
        handler() {
          this.getLoggedIn()
        }
      }
    },

  }
</script>

Di atas kita membuat beberapa router link untuk menuju ke sebuah route tertentu, untuk route sendiri akan kita bahas di artikel selanjutnya.

Kemudian di dalam data kita membuat sebuah state atau properti yang bernama loggedIn dengan default isinya null, ini akan kita gunakan untuk menghilangkan button login saat kita berhasil melakukan authentication.

data() {
  return {
   loggedIn: null
  }
}

Di mana state atau properti loggedIn di atas akan di assign sebuah nilai yang didapatkan dari localStorage dengan key loggedIn. localStorage ini akan di set menjadi true saat kita melakukan authentication.

methods: {
  getLoggedIn() {
    this.loggedIn = localStorage.getItem("loggedIn")
  }
}

Kemudian kita gunakan properti watch untuk mendapatkan nilai terbaru saat ada perubahan secara reactive yang terjadi saat state atau properti loggedIn di ubah.

watch: {
  $route: {
    immediate: true,
      handler() {
       this.getLoggedIn()
     }
  }
}

Di tutorial selanjutnya kita akan belajar bagaimana cara installasi beberapa library pendukung seperti Axios, Vue Router, Popper.js, jQuery dan Bootstrap.

EBOOK MEMBANGUN WEBSITE SEKOLAH DENGAN LARAVEL, VUE JS DAN BOOTSTRAP 5 : https://bit.ly/ebook-laravel-vue-js