Make a mobile menu display and hide with Nuxt / Vue

We'll be working with Vue, TailwindCSS, and Nuxt's route handling to make an interactive mobile menu.

Example Repository

We'll use the docs template repository in this tutorial.

Feel free to check it out to see what the finished code looks like.

Step 1: Add click event

In the MainHeader.vue file, we'll add a means to handle click events to the mobile menu icon that will then trigger the mobile menu to show.

<button @click="showMobileMenu" ...>

On tap, this will call the showMobileMenu function, which we'll add as a method to the <script> section.

methods: {
    showMobileMenu () {
      this.$emit('showMobileMenu')
    }
  }

This function emits the click event to the parent component, which in this case is the main dafault.vue layout file, where the event will be further handled from there.

Step 2: Handle click event emission

In the default.vue file, we'll capture the event, and then change the state of the showMobileMenu data element that we will soon define.

<MainHeader @showMobileMenu="showMobileMenu = true" v-show="!showMobileMenu" />

Ok, now let's define the showMobileMenu data element.

Within the <script> tags, we'll simply add:

export default {
  data () {
    return {
      showMobileMenu: false
    }
  }
}

Then, we need to tie the MobileMenu component to show or hide depending on if showMobileMenu is set to true or false.

<MobileMenu v-show="showMobileMenu" @closeMobileMenu="showMobileMenu = false" />

@closeMobileMenu="showMobileMenu = false" detects a click event emitted from the MobileMenu component if a user selects the close mobile menu icon.

If this is the case, we then set showMobileMenu to false so that the menu disappears from view.

Step 3: Hide mobile menu on link click

There is a couple of actions where we will want the mobile menu to hide from view.

1. If a user clicks to close the mobile menu
2. If a user clicks an internal link on the mobile menu

If a user clicks to close the mobile menu

Above, we saw that we are handling an emitted close mobile menu event by setting showMobileMenu to false.

We'll add the origin of this to the MobileMenu.vue file.

On the 'x' button, we'll add a click event detection.

<button @click="closeMobileMenu" ...>

Then, add the corresponding method in the <script> section.

methods: {
    closeMobileMenu () {
      this.$emit('closeMobileMenu')
    }

If a user clicks an internal link on the mobile menu

Since we are using Nuxt, we want to use the <nuxt-link to> tags to define internal links.

The drawback to this is that we then need to handle route changes so that the mobile menu doesn't just stay open when we click on a mobile menu link.

Luckily, this is easy to account for and just requires a few lines of code that we'll add to the 'default.vue' file.

watch: {
    '$route' () {
      this.showMobileMenu = false
    }
  },

As you can see, we are going to watch for a route change, and if the route does change, set showMobileMenu to false. This gives us the desired effect to both navigate to the new page when clicking a link on the mobile menu as well as closing the mobile menu so it's no longer in view.

Looking for a tool to manage your VPS servers and app deployments? Check us out at cleavr.io