app.js

require('./bootstrap')

import Vue from 'vue'
import Velocity from 'velocity-animate'
import Burger from './components/Burger'

const app = new Vue({
    el: '#app',
    data: {
        isMobile: window.innerWidth <= 991,
        globalOverlay: {
            active: false
        },
        menuActive: window.innerWidth > 991
    },
    methods: {
        beforeEnter () {
            if (this.isMobile) {
                this.globalOverlay.active = true
            }
        },
        enter (el, done) {
            Velocity(el, {
                marginLeft: 0
            }, {
                complete: done
            }, {
                duration: 300
            })
        },
        leave (el, done) {
            Velocity(el, {
                marginLeft: '-100%'
            }, {
                complete: done
            }, {
                duration: 300
            }).then(() => {
                if (this.isMobile) {
                    this.globalOverlay.active = false
                }
            })
        },
    },
    components: {
        'burger-menu': Burger,

    }
})

app.scss

#navbarNav {
    width: 100%;
}

.global-overlay {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(1,1,1,.77);
    z-index: 50;
}

@media only screen and (min-width: 992px) {
    #navbarNav {
        float: right;
    }
}


@media only screen and (max-width: 991px) {
    .navbar {
        z-index: 100;
    }

    #navbarNav {
        display: block;
        margin-left: 0;
        position: absolute;
        top: 100%;
        left: 0;
        padding: 20px;
        background: rgb(248, 249, 250);
    }
}

Burger.vue

<template>
    <div id="burger" :class="{
        'active': active
    }" @click="toggleActive">
        <button type="button" class="burger-button" title="Menu">
            <span class="burger-bar burger-bar--1"></span>
            <span class="burger-bar burger-bar--2"></span>
            <span class="burger-bar burger-bar--3"></span>
        </button>
    </div>
</template>

<script>
    export default {
        name: 'Burger',
        props: {
            active: {
                type: Boolean,
                required: true,
                default: false
            }
        },
        methods: {
            toggleActive () {
                this.$emit('toggle-menu')
            }
        }
    }
</script>

<style scoped lang="scss">
    $burger-color: #444;
    $primary: #2b2b68;

    .hidden {
        visibility: hidden;
    }

    button {
        cursor: pointer;
    }

    /* remove blue outline */
    button:focus {
        outline: 0;
    }

    .burger-button {
        position: relative;
        height: 30px;
        width: 40px;
        display: block;
        z-index: 99;
        border: 0;
        border-radius: 0;
        background-color: transparent;
        pointer-events: all;
        transition: transform .6s cubic-bezier(.165, .84, .44, 1);
    }

    .burger-bar {
        background-color: $burger-color;
        position: absolute;
        top: 50%;
        right: 6px;
        left: 6px;
        height: 3px;
        width: auto;
        margin-top: -1px;
        transition: transform .6s cubic-bezier(.165, .84, .44, 1), opacity .3s cubic-bezier(.165, .84, .44, 1), background-color .6s cubic-bezier(.165, .84, .44, 1);
    }

    .burger-bar--1 {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
        top: 40%;
    }

    .burger-bar--2 {
        transform-origin: 100% 50%;
        transform: scaleX(1);
    }

    .burger-button:hover .burger-bar--2 {
        transform: scaleX(1);
    }

    .no-touchevents .burger-bar--2:hover {
        transform: scaleX(1);
    }

    .burger-bar--3 {
        transform: translateY(6px);
        top: 60%;
    }

    #burger.active .burger-button {
        transform: rotate(-180deg);
    }

    #burger.active .burger-bar {
        background-color: lighten($primary, 10);
    }

    #burger.active .burger-bar--1 {
        transform: rotate(45deg);
        top: 50%;
    }

    #burger.active .burger-bar--2 {
        opacity: 0;
    }

    #burger.active .burger-bar--3 {
        transform: rotate(-45deg);
        top: 50%;
    }

    @media screen and (max-width: 991px) {
        #burger {
            display: block;
        }
    }

    @media screen and (min-width: 990px) {
        #burger {
            display: none;
        }
    }
</style>

index.blade.php

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <burger-menu @toggle-menu="menuActive = !menuActive" :active="menuActive"></burger-menu>
        <transition  @before-enter="beforeEnter" @enter="enter" @leave="leave" :css="false">
            <div id="navbarNav" v-show="menuActive">
                <div class="col-xl-6 offset-xl-6">
                    <ul class="navbar-nav float-xl-right">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Features</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Pricing</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="#">Disabled</a>
                        </li>
                    </ul>
                </div>
            </div>
        </transition>
    </nav>