Navbar using Bootstrap in Vue.js does not take effect. Common reasons and solutions: 1. Bootstrap and dependencies are not correctly introduced. Bootstrap, jquery, popper.js must be installed and introduced globally in main.js; 2. Dynamic rendering does not trigger JS initialization, and should be manually initialized or BootstrapVue should be used in mounted hooks; 3. The class name or attribute does not match the Bootstrap version, and you should ensure that the corresponding version of the data-bs attribute is used; 4. The Vue state conflicts with the Bootstrap style, and it is recommended not to mix or use official encapsulation components. After these problems are solved, navbar should work properly.

You used Bootstrap's navbar, but it doesn't work in Vue.js? This situation is actually quite common. The problem is often not that Vue or Bootstrap is alone, but that some details of them are not handled properly when they are used together.

The following are the places that most people tend to ignore but are most likely to have problems:

1. Bootstrap and dependencies are not properly introduced

Vue projects do not automatically recognize Bootstrap's behavior by default, especially interactive parts (such as folded menus). Bootstrap's JS functionality depends on jQuery and Popper.js. If you only introduce CSS but not JS or lack dependencies, navbar will look "unmoved".

Solution:

• Install the necessary dependencies:

  

   npm install bootstrap jquery popper.js

• Introduced globally in main.js :

   import 'bootstrap/dist/css/bootstrap.min.css'
  import $ from 'jquery'
  import Popper from 'popper.js'
  import 'bootstrap/dist/js/bootstrap.min.js'

In this way, the JS behavior of Bootstrap will be effective.

2. Use native HTML structure but not triggering JS initialization

Even if you correctly introduce the Bootstrap JS file, if your navbar is generated through Vue conditional rendering or dynamic components, it is possible that the Bootstrap JS is not reinitialized after the DOM rendering is completed.

Common phenomena: Clicking the menu button does not respond, or the drop-down menu cannot be opened.

Solve Suggestions:

• Manually initialize in mounted() hook:

   mounted() {
    // If you use dropdown or collapse, you can manually call const navbarToggler = document.querySelector('.navbar-toggler')
    if (navbarToggler) {
      navbarToggler.addEventListener('click', () => {
        const target = document.querySelector(navbarToggler.getAttribute('data-bs-target'))
        if (target) {
          target.classList.toggle('show')
        }
      })
    }
  }

Or a simpler way is to switch to Bootstrap's Vue encapsulation library, such as BootstrapVue , which has helped you handle these lifecycle issues.

3. The wrong class name or structure was used

Bootstrap is updated very quickly, and the class names and attributes may be different between different versions. for example:

• Bootstrap 4 Using data-toggle="collapse" and data-target="#navbarNav"
• Bootstrap 5 has been changed data-bs-toggle="collapse" and data-bs-target="#navbarNav"

If you copy the old version of HTML structure and the project uses the new version of Bootstrap, then the navbar will naturally not move.

Checkpoint:

• Make sure your HTML tag attributes match the current version of Bootstrap.
• Check whether the console has an error, such as the target element cannot be found, the JS method is not defined, etc.

4. Vue's responsive state interferes with Bootstrap's style switching

Sometimes we want to use Vue to control the display and hiding of navbar, such as binding a boolean value of isMenuOpen . At this time, if we accidentally overwrite the class control logic of Bootstrap, it may also lead to conflicts.

Suggested practices:

• Do not mix Vue-controlled class and Bootstrap's .show class.
• If you want to use Vue to control it, take over the logic completely and don't rely on Bootstrap's JS.
• Or directly use the official package components of Vue Bootstrap to avoid manually operating the DOM.

Basically these common reasons. First, confirm whether the complete dependencies are introduced, then check whether the structure and attributes are correct, and finally pay attention to the issues of Vue life cycle and DOM initialization. Once these problems are solved, navbar should be able to move normally.

The above is the detailed content of Bootstrap navbar not working in Vue.js. For more information, please follow other related articles on the PHP Chinese website!