Nuxt.jsでハンバーガーメニュー実装

各ファイルの記述例

toggle用の要素class="header__toggle_open"と開閉するメニューclass="header-navを用意する
※クラス名は自由です。その他のファイルの該当部分と一致させるようにしてください

compunents/Header.vue

<template>
  <header class="header">
    <div class="header-container">
      <span class="logo">Title</span>
      <div class="header__toggle_open bg-img" @click="$store.commit('toggleMenu')" :class="{'is-active': $store.state.isMenuActive}"></div>
      <ul class="header-nav" :class="{'is-active': $store.state.isMenuActive}">
        <li class="header-nav__list"><a class="header-nav__list-link" href="/">ホーム</a></li>
        <li class="header-nav__list"><a class="header-nav__list-link" href="/about">会社詳細</a></li>
        <li class="header-nav__list"><a class="header-nav__list-link" href="/blog">ブログ</a></li>
        <li class="header-nav__list"><a class="header-nav__list-link" href="/price/">プラン・料金</a></li>
        <li class="header-nav__list"><a class="header-nav__list-link" href="/contact">お問い合わせ</a></li>
      </ul>
    </div>
  </header>
</template>

当てているCSSは以下の通りです。これだとメニューが右にはみ出して、その幅分ブラウザが横にずれるので、htmlとbodyにoverflow-x: hidden;を付与してずれないようにしています。
※他に上手いやり方があったら教えてください🙇‍♂️

*.scss

.header__toggle_open {
  cursor: pointer;
  width: 24px;
  height: 24px;
  background-image: url(../images/svg/memu.svg);
  z-index: 999;

  &.is-active {
    background-image: url(../images/svg/close.svg);
  }
}


.header-nav {
  // 親要素に position: relative;
  // html, bodyに overflow-x: hidden;
  background-color: $bgcolor-main;
  color: $font-color-sub;
  display: block;
  left: 100%;
  padding: 50px 20px;
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  transition: 0.3s left;

  &.is-active {
    left: 0;
    transition: 0.3s left;
  }

store/index.jsをstore内に作成し、以下の通り記述する
たぶんコピペで動くはず

store/index.js

import Vuex from 'vuex'

const store = () => new Vuex.Store({
  state: {
    isMenuActive: false
  },
  mutations: {
    toggleMenu (state) {
      state.isMenuActive = !state.isMenuActive
    },
    resetMenu (state) {
      state.isMenuActive = false
    }
  }
})

export default store

ここまでだと、ページ遷移後もメニューが開きっぱなしになるので、pagesフォルダ内の全てのvueファイルに下記を追記する

pages/**/*.vue

<template>
  // 省略
</template>

<script>
export default {
  fetch ({store}) {
    store.commit('resetMenu')
  }
}
</script>

最後に

あくまでも自分用のメモです
上手くいかないなどあれば教えてください

もっといい方法があればご教授ください🙇‍♂️