Vueにスマートなサイドバーを速攻で実装する方法

auです。

Vue.jsを使って、サイドバーを実装してみました。と言っても、パッケージを使ったので見た目だけですが・・・。

使ったパッケージがこちら

デモを見てもらえれば分かるのですが、UIもUXも高く、使い勝手が良さそうですね。

実際に入れてみる

1. npmを使ってインストールする

npm i vue-sidebar-menu --save

2. Sidebar.vueを作ってimportする

node_moduleにある「vue-sidebar-menu」をローカルファイルへインポートしていますね。

<template>
  <sidebar-menu :menu="menu">
  </sidebar-menu>
</template>
<script>
import { SidebarMenu } from 'vue-sidebar-menu'
export default {
  components: {
    SidebarMenu
  },
  data () {
    return {
      menu: [
        {
          header: true,
          title: 'Main Navigation',
          hiddenOnCollapse: true
        },
        {
          href: '/',
          title: 'Dashboard',
          icon: 'fa fa-user'
        },
        {
          href: '/charts',
          title: 'Charts',
          icon: 'fa fa-chart-area',
          child: [
            {
              href: '/charts/sublink',
              title: 'Sub Link'
            }
          ]
        }
      ]
    }
  }
}
<style scoped>
</style>

ただ、このままだと貧相な見た目をしています。cssが適応されていません。
f:id:program-shoshinsya:20200508212434p:plain

3. cssを「main.js」にimportする

Githubにも書いてあるのですが、cssをimportしなければいけません。

ずっと「Sidebar.js」にcssをimportするのだと思っていたのですが、main.jsにimportすることで解決しました。

import Vue from 'vue'
import App from './App'
import router from './router'
import 'vue-sidebar-menu/src/scss/vue-sidebar-menu.scss'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})