Add toggle to VueJS SPA with Bulma

When staring new Vue project and create navigation often have problems with navigation configuration for cross device.

This year I prefer to use Bulma CSS framework in frontend projects.

For example this code. Demo you can see — here.

Setup Bulma

Install to project

npm install bulma

or

 yarn add bulma

Add Bulma import to the App.vue file <style>

 <style lang="scss">
  @import 'bulma/bulma.sass';
...

Setup Sass

npm install node-sass sass-loader --save-dev

or

yarn add node-sass sass-loader -D

Add navigation

<nav
      class="navbar"
      role="navigation"
      aria-label="main navigation"
    >
      <div class="navbar-brand">
        <div class="navbar-item">
          Bulls and cows
        </div>
        <a
          role="button"
          class="navbar-burger"
          data-target="navMenu"
          aria-label="menu"
          aria-expanded="false"
          @click="openNavigation"
        >
          <span aria-hidden="true" />
          <span aria-hidden="true" />
          <span aria-hidden="true" />
        </a>
      </div>
      <div
        :class="{'navbar-menu': true, 'is-active': navigationMain }"
        id="navMenu"
      >
        <div class="navbar-start">
          <router-link
            to="/"
            class="navbar-item is-active"
          >
            Home
          </router-link
        </div>
        <div class="navbar-end">
          <router-link
            to="/about"
            class="navbar-item"
          >
            About
          </router-link>
          <router-link
            to="/rules"
            class="navbar-item"
          >
            Rules
          </router-link>
        </div>
      </div>
    </nav>

Add to data section variable

navigationMain: false

Create method to toggle active class (then click on burger icon)

openNavigation() {
   this.navigationMain = !this.navigationMain;
}

Add watcher for route changes (to set false navigationMain )

watch: {
  $route(to, from) {
    this.navigationMain = false;
  }
}