Membuat Blog dengan Laravel & VueJS - #3 | Component & Vue Router

wahyunanangwidodo

wahyunanangwidodo Senin, 26 Agustus 2019

Membuat Blog dengan Laravel & VueJS - #3 | Component & Vue Router

Kita akan lanjutkan dengan membuat komponen dan menambahkan depedensi vue-router kedalam project.

Untuk dapat menginstall depedensi yang diperlukan, terlebih dahulu kita install sebuah package manager yaitu NPM.

Instalasi NPM

Ketikan perintah berikut di terminal dan enter:
npm install
Setelah selesai kita sudah bisa menggunakan vuejs diproject kita.

Install Vue Router

Selanjutnya kita tambahkan sebuah depedensi yaitu vue-router. Untuk mengintallnya gunakan perintah dibawah ini:
npm install --save vue-router
Vue Router adalah salah satu fitur dari Vue.js. Dengan menggunakan Vue Router kita dapat beralih ke setiap halaman tanpa refresh.

Kemudian buka file app.js di direktori resources/js/, dan kita import module dari vue router.
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

Membuat Komponen

Kita akan lanjutkan dengan membuat sebuah komponen. Untuk komponen pertama, kita buat untuk halaman dashboard dengan dengan desain sebuah jumbotron.

Untuk membuatnya silahkan ikuti langkah-langkah dibawah ini:

Kita buat komponen dengan membuat sebuah file(.vue) pada direktori resources/js/components.

Silahkan buat file baru di direktori resources/js/components dan beri nama WelcomeAdmin.vue dan copas template dibawah ini.
//WelcomeAdmin.vue
<template>
  <div>
    <div class="_container">
     <div class="h_wrap">
        <div class="admin-page-title"></div>
        <div class="jumbotron">
         <h1 class="display-4">Hello, Admin!</h1>
          <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
          <hr class="my-4"> 
          <p class="lead">
        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
      </p>
      </div>
      </div>
  </div>
</div>
</template>
Kemudian buka app.js dan kita import komponen WelcomeAdmin.vue:
import WelcomeAdmin from './components/WelcomeAdmin'
Lalu buat instance router dan kita buat route untuk komponen WelcomeAdmin.vue:
const router = new VueRouter({
    mode: 'history',
    routes: [
        {
          path: '/admin/dashboard',
          name: 'dashboard',
          component: WelcomeAdmin,
        },
    ],
});
Setelah itu kita tambahkan juga properti router pada vue instance.
const app = new Vue({
  el: '#app',
  router,
});
Jadinya:
//app.js
require('./bootstrap');

window.Vue = require('vue');

import VueRouter from 'vue-router'
Vue.use(VueRouter)

import WelcomeAdmin from './components/WelcomeAdmin'

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/admin/dashboard',
            name: 'Dashboard',
            component: WelcomeAdmin,
        },
    ],
});

const app = new Vue({
  el: '#app',
  router,
});
Langkah selanjutnya kita akan merender komponen yang kita buat tadi di views/admin/ index.blade.php agar dapat tampil di browser.
<router-view></router-view>
Jadinya:
//views/admin/index.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Admin dashboard</title>
    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Styles -->
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    
    <link href="{{ asset('css/admin.css') }}" rel="stylesheet">
         
  </head>
  <body>
    <div id="app">
      <div class="wrapper">
      <div class="side-menu">
        <div class="logo">
         <h1 class="ch1"> Teluk Coding</h1>
          <p class="cp">Admin Panel | Dashboard</p>     
        </div>

    </div>
  <div class="main-content">
    <div class="topmenu">
      <a href="#" id="showmenu"><i class="fa fa-bars" aria-hidden="true"></i></a>
        <div class="search"><i class="fa fa-search" aria-hidden="true"></i> <input type='text' class='src' placeholder='Search...'/></div>
        <div class="uactions">
        <div class="admin-username"><p>Welcome, {{ Auth::user()->name }}</p> </div>
        <div class="admin-logout">
          <a href="{{ route('logout') }}"
                  onclick="event.preventDefault();
                   document.getElementById('logout-form').submit();">
                      {{ __('Logout') }}
                  </a>
        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
               @csrf
        </form>

        </div>
      </div>                             
    </div>
      <div class="main-section"> 

          <router-view></router-view> 

      </div>
     </div>
    </div>
  </div>
   
    <script src="{{ asset('js/app.js') }}"></script>
    <script src="{{ asset('js/admin.js') }}"></script> 
  
  </body>
</html>
Sebelum kita lihat di browser, buka terminal terlebih dahulu dan jalankan perintah dibawah ini:
npm run watch
Buka 2 terminal jalankan php artisan serve.

Membuat Blog dengan Laravel & VueJS - #3 | Component & Vue Router

Selanjutnya: Menu Admin.

Urutan part / bagian dari tutorial ini bisa dilihat disini.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Berlangganan

Berlangganan untuk mendapat pemberitahuan artikel terbaru via email.