@allinmkt/vue-topbar

Complete and flexible topbar by metronic.

Install

npm i --save @allinmkt/vue-topbar

How to

Props

• user: User informations
• menu: Topbar items
• list: Notification items

In any of your vue files:

JS:

import KTHeader from '@allinmkt/vue-topbar'

export default {
  name: 'MyPage',
  components: {
    KTHeader
  },
  data() {
    return {
      user: {
        message: "Hello",
        name: "James Bond",
        profession: "Application Developer",
        email: "[e-mail]"
      },
      menu: [
        {
          name: "Dashboard",
          href: "/dashboard"
        },
        {
          name: "Builder",
          href: "/builder"
        },
        {
          name: "Test",
          href: "#",
          submenu: [
            {
              name: "Test",
              icon: "menu-icon flaticon2-list-2",
              href: "/test"
            },
            {
              name: "Test2",
              icon: "menu-icon flaticon2-list-2",
              href: "/test"
            }
          ]
        }
      ],
      list: [
        {
          title: "5 new user generated report",
          desc: "Reports based on sales",
          icon: "flaticon-bell text-success"
        },
        {
          title: "2 new items submited",
          desc: "by Grog John",
          icon: "flaticon2-box text-danger"
        },
        {
          title: "79 PSD files generated",
          desc: "Reports based on sales",
          icon: "flaticon-psd text-primary"
        },
        {
          title: "$2900 worth producucts sold",
          desc: "Total 234 items",
          icon: "flaticon2-supermarket text-warning"
        }
      ]
    };
  }
}

Template:

<template>
  <div>
    <KTHeader :user="user" :menu="menu" :list="list"></KTHeader>
  </div>
</template>