Add a Sidebar Menu to a Vue App with vue-sidebar-menu

Photo by Mert Kahveci on Unsplash

We can add a sidebar menu with into a Vue app with the vue-sidebar-menu library.

In this article, we’ll look at how to us it to add the menu.

Installation

We can install the package by running:

npm i vue-sidebar-menu

Adding the Menu

We use the sidebar-menu component to do that.

To do that, we write:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueSidebarMenu from "vue-sidebar-menu";
import "vue-sidebar-menu/dist/vue-sidebar-menu.css";
Vue.use(VueSidebarMenu);
Vue.config.productionTip = false;
new Vue({
  render: (h) => h(App)
}).$mount("#app");

App.vue

<template>
  <div id="app">
    <sidebar-menu :menu="menu"/>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      menu: [
        {
          header: true,
          title: "Main Navigation",
          hiddenOnCollapse: true
        },
        {
          href: "/",
          title: "Dashboard",
          icon: "fa fa-user"
        },
        {
          href: "/charts",
          title: "Charts",
          icon: "fa…