Bootstrap 5 Nuxt dynamic components not working

user_9706875 0
Viewed 2050

I am trying to implement Bootstrap 5 into my Nuxt project.

The styles work fine but anything that used-to use jQuery doesn't work.

My installation process:

  1. Download files from the Bootstrap download page

  2. Create /css and /js folders and move into asset folder

  3. Put bootstrap.css into /css folder and bootstrap.min.js into /js folder

  4. Add configuration to the nuxt.config.js file:

css: [
   '@/assets/css/bootstrap.css'
],

js: [
   '@/assets/js/bootstrap.min.js'
],
  1. Refresh the site a dozen times.

This is the code I am testing taken straight from the Bootstrap component site:

// index.vue
<div class="dropdown">
   <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown button
   </button>
   <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
   </ul>
</div>
bootstrap-5 nuxt.js css javascript
1 Answers

Instead of editing your nuxt.config.js file - Try this:

  1. In layouts/default.vue add the code below to the script section
  2. Place the bootstrap 5 minified js and css bundle files at /static/bootstrap
<script>

export default {
  data () {
    return {

    }
  },

  head () {
    return {
      title: 'Test Page - My awesome project',
      link: [
        { rel: 'stylesheet', href: '/bootstrap/bootstrap.min.css' }
      ],
      script: [
        { src: "/bootstrap/bootstrap.bundle.min.js", type: "text/javascript"}
      ]

    }
  }


}
</script>
user_152840100
Related