Bootstrap navigation menu opens normally but refuses to close

Question

I am making a counter-part of an original HTML file in NuxtJS, I have the following code in the Navbar component for my NuxtJS project

<template>
  <section id="navigation-menu" class="menu menu3 cid-sLhoPz7Ycg" once="menu">
    <nav class="navbar navbar-dropdown navbar-fixed-top navbar-expand-lg">
      <div class="container">
        <div class="navbar-brand">
          <span class="navbar-logo">
            <a href="/">
              <img src="~/assets/images/bitflow.png" alt="Bitflow" style="height: 3rem;">
            </a>
          </span>
          <span class="navbar-caption-wrap"><a class="navbar-caption text-black text-primary display-7" href="/">Bitflow</a></span>
        </div>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarSupportedContent"
          aria-controls="navbarNavAltMarkup"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <div class="hamburger">
            <span />
            <span />
            <span />
            <span />
          </div>
        </button>
        <div id="navbarSupportedContent" class="collapse navbar-collapse">
          <ul class="navbar-nav nav-dropdown nav-right" data-app-modern-menu="true">
            <li class="nav-item">
              <a class="nav-link link text-black text-primary display-4" href="/#switch-header-1"><span class="ti-pencil-alt mbr-iconfont mbr-iconfont-btn" />Mission</a>
            </li>
            <li class="nav-item">
              <a class="nav-link link text-black text-primary display-4" href="/works"><span class="ti-layout-tab mbr-iconfont mbr-iconfont-btn" />Works</a>
            </li>
            <li class="nav-item">
              <a class="nav-link link text-black text-primary display-4" href="/#our-team"><span class="ti-headphone-alt mbr-iconfont mbr-iconfont-btn" />Team</a>
            </li>
          </ul>
          <div class="icons-menu">
            <a class="iconfont-wrapper" href="https://github.com" target="_blank" title="Save this template !">
              <span class="p-2 mbr-iconfont ti-import" />
            </a>
            <a class="iconfont-wrapper" href="#" title="Toggle dark mode">
              <span class="p-2 mbr-iconfont ti-shine" />
            </a>
          </div>
        </div>
      </div>
    </nav>
  </section>
</template>

This is the useful chunk in the nuxt.config.js file

css: [
    '@/assets/css/fontawesome.min.css',
    '@/assets/font-awesome-brands/css/brands.min.css',
    '@/assets/themify/css/themify-icons.css',
    '@/assets/tether/tether.min.css',
    '@/assets/bootstrap/css/bootstrap.min.css',
    '@/assets/bootstrap/css/bootstrap-grid.min.css',
    '@/assets/bootstrap/css/bootstrap-reboot.min.css',
    '@/assets/animatecss/animate.css',
    '@/assets/dropdown/css/style.css',
    '@/assets/formstyler/jquery.formstyler.css',
    '@/assets/formstyler/jquery.formstyler.theme.css',
    '@/assets/socicon/css/styles.css',
    '@/assets/theme/css/style.css',
    '@/assets/mobirise/css/mbr-additional.css',
    '@/assets/web/assets/mobirise-icons2/mobirise2.css'
  ],

And finally the links to the javascript files in the index.vue file

<script src="js/web/assets/jquery/jquery.min.js" />
<script src="js/popper/popper.min.js" />
<script src="js/tether/tether.min.js" />
<script src="js/bootstrap/js/bootstrap.min.js" />
<script src="js/smoothscroll/smooth-scroll.js" />
<script src="js/viewportchecker/jquery.viewportchecker.js" />
<script src="js/dropdown/js/nav-dropdown.js" />
<script src="js/dropdown/js/navbar-dropdown.js" />
<script src="js/touchswipe/jquery.touch-swipe.min.js" />
<script src="js/parallax/jarallax.min.js" />
<script src="js/formstyler/jquery.formstyler.js" />
<script src="js/formstyler/jquery.formstyler.min.js" />
<script src="js/theme/js/script.js" />

I have run out of ideas on how to solve this issue. The original HTML file works normally when I open them in the browser. I will appreciate all suggestions offered

Answer 1

Several things here:

• working with an HTML file and a Nuxt app is not really the same in the way that you do have a build process with Nuxt/Vue, so you cannot really link the CSS/JS in the same way
• you probably don't need to import jQuery and a lot of stuff here, because Vue is more powerful that jQuery and less heavy too. If you really want it, here is how to.
• do not import global CSS nor inline scripts, use regular CSS imports in your SFC files (when needed) and use NPM to import the packages
• the easiest and proper way to work with Bootstrap in a Nuxt app is explained here
• please show us that you did a good amount of research next time, most of the answers can already be found with a search, I've explained those here because it's a bit hard to understand where to aim at first because you're new and because you did the effort of showing us your code properly