Make a mobile menu display and hide with Nuxt / Vue
Tags: nuxt, vue, tutorial
Published: 2021-01-13 01:54:19

This is a continuation of [Getting started with NuxtJS / Content module](https://dev.to/armiedema/getting-started-with-nuxtjs-content-module-3l5o) where we are creating a **Documentation Site Template with Nuxt/Vue**. 

---

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

## Display mobile menu on mobile menu icon tap
{% youtube MSK4W0MZZ9w %}

In the [MainHeader.vue](https://github.com/cleavr/docs-template/blob/9dd9d6ccb51fb03064e338b1e1a3e1b1f83c41b1/components/MainHeader.vue#L4) file, we'll add a means to handle click events to the mobile menu icon that will then trigger the mobile menu to show. 

```javascript
<button @click="showMobileMenu" ...>
```
On tap, this will call the `showMobileMenu` function, which we'll add as a method to the `<script>` section. 

```javascript
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. 

In the [default.vue](https://github.com/cleavr/docs-template/blob/9dd9d6ccb51fb03064e338b1e1a3e1b1f83c41b1/layouts/default.vue#L13) file, we'll capture the event, and then change the state of the `showMobileMenu` data element that we will soon define. 

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

You'll also notice `v-show="!showMobileMenu"`. This has been added primarily because of the transition effect applied to the mobile menu where a stutter type effect was occurring due to the mobile menu being 'fixed' into position. You can delete this if you apply a different transition effect to your mobile menu where this is not a problem. 

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

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

```javascript
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`.

```javascript
<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. 


## Hide mobile menu on link click 

{% youtube jL7qwapjjvo %}

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](https://github.com/cleavr/docs-template/blob/9dd9d6ccb51fb03064e338b1e1a3e1b1f83c41b1/components/MobileMenu.vue#L9) file. 

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

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

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

```javascript
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. 

```javascript
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. 

---

Following along? View the [GitHub Repo - phase 2](https://github.com/cleavr/docs-template/tree/phase-2) to view the code for this tutorial. 

You can also view the full video [tutorial series playlist](https://youtube.com/playlist?list=PLApnZzwJN4G5jU3NzBPWpHWJiXTEO9esd) on YouTube. 

Looking for a tool to manage your VPS servers and app deployments? Check us out at [cleavr.io](https://cleavr.io)

--- 
Full tutorial series on creating a documentation site using Vue/Nuxt, Tailwind, and Algolia. 

{% link https://dev.to/armiedema/getting-started-with-nuxtjs-content-module-3l5o %}

{% link https://dev.to/armiedema/make-a-mobile-menu-display-and-hide-with-nuxt-vue-54mc %}

{% link https://dev.to/armiedema/pull-in-markdown-to-vue-with-nuxt-content-and-style-with-tailwind-typography-2em6 %}

{% link https://dev.to/armiedema/responsive-youtube-embeds-with-tailwindcss-4635 %}

{% link https://dev.to/armiedema/create-a-keyboard-navigable-site-search-with-nuxt-content-and-aloglia-vue-instantsearch-2d6o %}