Bulma+Vue.jsでメニューをトグルさせる

BulmaにもBootstrapなどと同様にNavbarとそのモバイル向けのトグルメニューがあるが、以下の記載のとおりその実装のJSは勝手にやってねというスタイルになっている。

The Bulma package does not come with any JavaScript. Here is however an implementation example, which toggles the class is-active on both the navbar-burger and the targeted navbar-menu, in Vanilla Javascript.

Navbar | Bulma: Free, open source, & modern CSS framework based on Flexbox

Vanilla.jsのサンプルがあるがこれをそのままvueのコードに混ぜるわけにはいかない。
というわけで、同じスタイルで書けば動くやつをこしらえたのでメモしておく。

<template>
  <nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      ...

      <a
        role="button"
        class="navbar-burger burger"
        :class="{ 'is-active': isActive }"
        aria-label="menu"
        aria-expanded="false"
        @click="toggleMenu"
      >
        <span aria-hidden="true" />
        <span aria-hidden="true" />
        <span aria-hidden="true" />
      </a>
    </div>

    <div class="navbar-menu" :class="{ 'is-active': isActive }">
      ...
    </div>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    }
  },
  methods: {
    toggleMenu(e) {
      this.isActive = !this.isActive
    }
  }
}
</script>

@onclick="toggleMenu" としてやって e.currentTarget を使うことでもとのサンプルコードよりかなりシンプルになる。

Pluginにすれば？という気もするが、@nuxtjs/bulmaというやつが標準であるものの、これはほとんど何もやってくれず、Issue #187によるとBuefyがおすすめされたのち放置されてたりするのであまり頑張ってメンテしていく雰囲気ではなさそう。これだけのやつを別で作るのも小さすぎるし競合しないか心配だしで微妙。

Buefyは便利っぽいけど自分がやりたいことはこれだけなので、これだけのために入れるには大きいしToo muchという感じがする。
一応実装はされているぽい: https://buefy.org/documentation/dropdown

アホだった。こんな大袈裟なことしなくても普通にdataに状態持たせてclassをbindすれば終了でした…。ということで修正。