Membuat Menu Navbar Vue Js dengan Bootstrap

By | September 21, 2020

Hallo apa kabar semua, semoga kalian sehat semua nya. Oke kali ini saya akan berbagi  sedikit ilmu tentang cara Membuat  Menu Navbar Vue Js dengan Boostrap yang baru saja pelajari. Sengaja saya post itu buat backup data .

Kita akan mengedit dan membuat  file baru diantaranya :

  • Membuat file Navbar.vue dan save pada folder components
  • Import boostrap
  • Membuat halaman Daftar Menu.

 

Membuat file Navbar.vue

Pertama kita akan membuat file Navbar.vue pada folder components. Langsung saja buka link yang sudah saya siapkan biar tidak ribet lagi, “https://getbootstrap.com/docs/4.5/components/navbar/

 

Copy saja semuanya, gampang tar kita hapus yang tidak perlunya.

Script navbar yang sudah saya siapkan tinggal pake saja bisa tapi masih mentah yah .

[html]

<template>

<nav class="navbar navbar-expand-lg navbar-light bg-light">

<div class="container">

<a class="navbar-brand" href="#"><strong>Seafood</strong></a>

<button

class="navbar-toggler"

type="button"

data-toggle="collapse"

data-target="#navbarSupportedContent"

aria-controls="navbarSupportedContent"

aria-expanded="false"

aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav mr-auto">

<li class="nav-item active">

<router-link class="nav-link" to="/">Home</router-link>

</li>

<li class="nav-item">

<router-link class="nav-link" to="/menu">Menu</router-link>

</li>

</ul>

</div>

</div>

</nav>

</template>

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%0Aexport%20default%20%7B%0A%0Aname%3A%20%22Navbar%22%0A%0A%7D%3B%0A%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

[/html]

Import boostrap

Buka link https://bootstrap-vue.org/docs atau copy script di bawah ini

 

[html]

import { BootstrapVue, BootstrapVueIcons } from ‘bootstrap-vue’

import ‘bootstrap/dist/css/bootstrap.css’

import ‘bootstrap-vue/dist/bootstrap-vue.css’

Vue.use(BootstrapVue)

Vue.use(BootstrapVueIcons)

[/html]

Kemudian script BootstrapVue paste kan ke file main.js ini script lengkapnya.

[html]

import Vue from ‘vue’

import App from ‘./App.vue’

import router from ‘./router’

import { BootstrapVue, BootstrapVueIcons } from ‘bootstrap-vue’

import ‘bootstrap/dist/css/bootstrap.css’

import ‘bootstrap-vue/dist/bootstrap-vue.css’

Vue.use(BootstrapVue)

Vue.use(BootstrapVueIcons)

Vue.config.productionTip = false

new Vue({

router,

render: h => h(App)

}).$mount(‘#app’)

[/html]

 

Setelah itu save yah. Dan coba lihat hasilnya, jangan lupa di reload.

Membuat halaman Daftar Menu

Buat file baru dengan nama fiel Menu.vue di dalam folder views, kemudian copykan script di bawah ini.

Script lengkap Menu.vue

[html]

<template>

<div>

<Navbar />

<h1>Daftar Menu </h1>

</div>

</template>

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%0A%2F%2F%20%40%20is%20an%20alias%20to%20%2Fsrc%0A%0Aimport%20Navbar%20from%20’%40%2Fcomponents%2FNavbar.vue’%0A%0A%0A%0Aexport%20default%20%7B%0A%0Aname%3A%20’Menu’%2C%0A%0Acomponents%3A%20%7B%0A%0ANavbar%0A%0A%7D%0A%0A%7D%0A%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%0A%0A%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

[/html]

 

Setalah itu kita akan daftar ke router agar file Menu.vue ini bisa tampil, buka file index.js yang berada dalam folder router, kemudian pastekan scrip di bawah ini.

[html]

import Menu from ‘../views/Menu.vue’

{

path: ‘/Menu’,

name: ‘Menu’,

component: Menu

},

[/html]

 

Ini script lengkapnya index.js

[html]

import Vue from ‘vue’

import VueRouter, { RouteConfig } from ‘vue-router’

import Home from ‘../views/Home.vue’

import Menu from ‘../views/Menu.vue’

Vue.use(VueRouter)

const routes: Array<RouteConfig> = [

{

path: ‘/’,

name: ‘Home’,

component: Home

},

{

path: ‘/Menu’,

name: ‘Menu’,

component: Menu

},

{

path: ‘/about’,

name: ‘About’,

// route level code-splitting

// this generates a separate chunk (about.[hash].js) for this route

// which is lazy-loaded when the route is visited.

component: () => import(/* webpackChunkName: "about" */ ‘../views/About.vue’)

}

]

const router = new VueRouter({

mode: ‘history’,

base: process.env.BASE_URL,

routes

})

export default router

[/html]

 

Cupuk mudah bukan membuat menu navbar Vue Js dengan Boostrap ini semoga bermanfaat bagi anda yang membutuhkan,  dan mohon maaf bila ada kesalah dalam penulusan karena kesempurnaan hanya milik Allah SWT.

Oh iya jangan sungkan-sungkan juga untuk bertanya jika ada hal yang kurang di pahami. Insya allah akan saya jawab sesuai dengan kemampuna saya.

 

 

 

One thought on “Membuat Menu Navbar Vue Js dengan Bootstrap

Leave a Reply

Your email address will not be published. Required fields are marked *