Estoy tratando de implementar Bootstrap 5 en mi Nuxt project.

Los estilos funcionan bien, pero cualquier cosa que solía usar jQuery no funciona.

Mi proceso de instalación:

  1. Descargue archivos de la página de descarga de Bootstrap

  2. Cree carpetas /css y /js y muévalas a la carpeta de activos

  3. Ponga bootstrap.css en la carpeta /css y bootstrap.min.js en la carpeta /js

  4. Agregue la configuración al archivo nuxt.config.js:

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

js: [
   '@/assets/js/bootstrap.min.js'
],
  1. Actualice el sitio una docena de veces.

Este es el código que estoy probando tomado directamente del sitio de componentes de 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 feb. 2021 a las 18:20

1 respuesta

La mejor respuesta

En lugar de editar su archivo nuxt.config.js, intente esto:

  1. En layouts / default.vue agregue el siguiente código a la sección de script
  2. Coloque los archivos de paquete bootstrap 5 minified js y css en / 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 feb. 2021 a las 15:10