[Nuxt]vue-burger-menuを使ってサイドメニューを作る![Vue]

Nuxt(Vue)でいい感じのサイドバーを作ろうと思います!

そのために今回使っていくのは、vue-burger-menuです。

早速実装していきましょう。

インストール

今回、僕はNuxt.jsを使っていきますが、基本的にはVue.jsでも変わりません。

$ npm install --save vue-burger-menu

plugins/burger-menu.jsを作成します。

import Vue from 'vue'
import { Slide, Menu } from 'vue-burger-menu'

Vue.component('slide', Slide)
Vue.component('burger-menu', Menu)

次にnuxt.config.jsに記述して、グローバルに使えるようにしましょう。

plugins: [
  { src: '~plugins/burger-menu', ssr: false }
],

使ってみる

それでは、layouts/default.vueに記述していきます。サイドメニューなのでどのページにも表示したいところですよね!

<no-ssr placeholder="Loading...">
  <nav
    class="navbar header"
    role="navigation"
    aria-label="main navigation">
    <slide right width="300">
      <a href="/">
        <span>トップ</span>
      </a>
      <a>
        <span>Twitterでシェア</span>
      </a>
      <a>
        <span>LINEでシェア</span>
      </a>
    </slide>
  </nav>
</no-ssr>

例によって、Buefyを使っています。rightで右側に設置(デフォルトでは左)。widthでサイドバーを表示させるボタンを押した時にどこまで伸びるかを制御できます。

サーバーを実行させてみるとうまく表示させられたと思います。

サードバー表示のアニメーションには他にもPushやBubble、ScaledownなどもあるようなのでこのパッケージのGithubを見てお好みのアニメーションをサイトに使ってみてください。