J'essaye d'implémenter Bootstrap 5 dans mon Nuxt project.

Les styles fonctionnent bien mais tout ce qui utilisait jQuery ne fonctionne pas.

Mon processus d'installation:

  1. Téléchargez des fichiers depuis la page de téléchargement de Bootstrap

  2. Créez des dossiers /css et /js et placez-les dans le dossier d'éléments

  3. Placez bootstrap.css dans le dossier /css et bootstrap.min.js dans le dossier /js

  4. Ajoutez la configuration au fichier nuxt.config.js:

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

js: [
   '@/assets/js/bootstrap.min.js'
],
  1. Actualisez le site une dizaine de fois.

Voici le code que je teste directement à partir du site du composant Bootstrap:

// 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>
1
EricTalv 21 févr. 2021 à 18:20

1 réponse

Meilleure réponse

Au lieu de modifier votre fichier nuxt.config.js - Essayez ceci:

  1. Dans layouts / default.vue, ajoutez le code ci-dessous à la section script
  2. Placez les fichiers de bundle js et css minifiés de bootstrap 5 dans / 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>
2
Carmen Ferrara 25 févr. 2021 à 15:10