Jdog Template

How to use component

E.g. Navbar component via Module

import Vue from 'vue'
import { OlfNavbar } from 'jdog-template'

Vue.component(OlfNavbar)

or via Browser

<script type="text/javascript" src="node_modules/vuejs/dist/vue.min.js"></script>
<script type="text/javascript" src="node_modules/jdog-template/dist/jdog-template.min.js"></script>
<script type="text/javascript">
  Vue.use(JdogTemplate);
</script>

And simply put the following on your template

<olf-navbar></olf-navbar>

Also you need to make sure you add the following tags in your html to apply Bootstrap styling for the navbar to look appropriate

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Customisation

Brand logo can be added simply by using img tag with slot attribute and "logo" as its value. To add navbar menu items, you need to put them in a list, with each item containing name and path attributes. Below is an example for adding menu items to your navbar

<template>
  <div id="app">
    <olf-navbar :menu="navbarMenu">
      <img slot="logo" src="@/assets/logo.png" />
    </olf-navbar>
  </div>
</template>

<script>
import { OlfNavbar } from 'jdog-template'

export default {
    components: {
        OlfNavbar
    },
    data() {
        return {
            navbarMenu: [
                {name: 'User', path:'/user'},
                {name: 'Logout', path: '/logout'}
            ]
        }
    }
}
</script>