Header Ads Widget

Ticker

6/recent/ticker-posts

Más de 3 formas de agregar Bootstrap a las aplicaciones Vue 3

 En este artículo, veremos las opciones disponibles para agregar Bootstrap a sus aplicaciones Vue 3.

Bootstrap 4 tiene muchas características nuevas, como el uso de Flexbox, módulos ES6 y un nuevo componente de tarjeta (que puede usar para crear fácilmente diseños basados ​​en tarjetas en sus aplicaciones Vue 3, como el famoso diseño de mampostería sin complementos de JavaScript / jQuery o complejos algoritmos) etc.

Puede usar Bootstrap 4 para agregar estilo móvil primero a su aplicación Vue 3 sin reinventar la rueda y sin tener que adquirir un conocimiento profundo de CSS, especialmente si necesita crear diseños complejos y receptivos.

Bootstrap 4 requiere jQuery y Popper.js. jQuery es una biblioteca DOM que realiza una manipulación directa del DOM a diferencia de Vue 3, que utiliza el enfoque DOM virtual, por lo que querrá evitar el uso de jQuery dentro de su aplicación Vue 3, pero esto significa que no podrá usar muchos Bootstrap 4 componentes que requieren jQuery.

No se preocupe, aunque la comunidad ha proporcionado algunos paquetes que integran Bootstrap 4 con Vue sin recurrir a jQuery.

Bootstrap-Vue

En el momento de escribir este artículo, Bootstrap-Vue no es compatible con Vue 3, pero BootstrapVue v4 tendrá compatibilidad con Vue.js v3 y compatibilidad con Bootstrap v5 de acuerdo con este problema en GitHub.

Además, consulte ¿Cómo usar Vue 3 y agregar el complemento Boostrap-vue?

Bootstrap-Vue proporciona más de 85 componentes, más de 45 complementos disponibles, varias directivas y más de 1000 iconos, BootstrapVue proporciona una de las implementaciones más completas del componente Bootstrap v4.5 y el sistema de cuadrícula disponible para Vue.js v2.6, completo con marcado de accesibilidad WAI-ARIA extenso y automatizado.

El proyecto Bootstrap-Vue ha realizado la mayor parte del trabajo pesado de reemplazar jQuery con Vue al implementar funciones de Bootstrap como componentes de Vue.

Bootstrap de Vue 3

Agregar Bootstrap-Vue manualmente a su aplicación Vue

Dirígete a tu terminal y navega dentro de tu proyecto Vue, luego ejecuta el siguiente comando para instalar de la bootstrap-vuesiguiente manera:

npm install bootstrap-vue bootstrap --save

bootstrap-vuerequiere archivos CSS Bootstrap, por lo que también debe instalar bootstrap.

A continuación, deberá habilitar el complemento VueBootstrap en el punto de entrada de la aplicación Vue.

import Vue from 'vue'
import BootstrapVue from "bootstrap-vue"
import App from './App.vue'
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap-vue/dist/bootstrap-vue.css"

Vue.use(BootstrapVue)

new Vue({
  el: '#app',
  render: h => h(App)
})

Usando Bootstrap-Vue Usando Plantillas

También puede usar estas dos plantillas para estructurar su proyecto Vue webpack-simple y webpack que se integran bootstrap-vuedesde el primer momento.

Por ejemplo, así se genera un nuevo proyecto de Vue basado en bootstrap-vue/webpack-simplela CLI de Vue.

vue init bootstrap-vue/webpack-simple my-project
cd my-project 
npm install

Luego puede usar diferentes componentes de Bootstrap 4

<template>
<div>
  <b-button>This is a button</b-button>
  <b-button href="#">This is a link</b-button>
</div>
</template>

Agregar Bootstrap usando Vue CLI

En lugar de instalarlo directamente, podemos usar Bootstrap-Vue como un complemento CLI de Vue. Esto se encarga de cualquier modelo de configuración y agregará automáticamente cualquier dependencia, por lo que recomiendo este enfoque.

Creemos un nuevo proyecto CLI de Vue:

$ vue create bootstrap-vue-app

Tenga en cuenta que necesitará tener instalado Vue CLI en su entorno de desarrollo ( instrucciones aquí ).

Vue CLI ahora lo llevará a través de la configuración de la aplicación Vue. Si no está seguro de qué opciones elegir, seleccione "predeterminado".

Ahora, cambie a su nuevo directorio de proyecto:

$ cd bootstrap-vue-app

Ahora puede agregar el complemento Bootstrap-Vue a su proyecto. A menos que tenga otras razones, le sugiero que seleccione "Y" para cualquier mensaje.

$ vue add bootstrap-vue

Gracias a la magia de Vue CLI, ahora ha configurado un proyecto de Vue & Bootstrap de mejores prácticas sin necesidad de configuración.

Usando jQuery y Bootstrap 4 con Vue 3

Puede usar la biblioteca de arranque original con jquery para diseñar su aplicación Vue 3

$ npm install bootstrap jquery popper.js

Nota: Si no va a utilizar el JavaScript de Bootstrap y solo va a utilizar sus estilos, no se preocupe por instalar jQuery o Popper.js.

Finalmente, impórtelo al script principal agregando estas líneas en la parte superior del src/main.jsarchivo:

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

Usando Bootstrap 5 con Vue 3

Como no se recomienda usar jQuery con Vue, puede usar Bootstrap 5, que todavía está en versión alfa, con su proyecto Vue 3.

Bootstrap 5 eliminó el soporte para jQuery y usó JavaScript simple para sus componentes.

En este momento, puede instalar Bootstrap 4 usando el siguiente comando:

$ npm install bootstrap@next

Conclusión

Usar Bootstrap-Vue es la forma recomendada de integrar Bootstrap 4 con su aplicación Vue, ya que ofrece componentes Vue para componentes Bootsrap que requieren jQuery. Sin embargo, en este momento deberá esperar a BootstrapVue v4 que agregará soporte tanto para Vue 3 como para Bootstrap 5.

Bootstrap 5 también es una opción para diseñar sus aplicaciones Vue 3, pero todavía está en la versión alfa. Bootstrap 5 ha eliminado el soporte para jQuery y usa solo JavaScript simple para sus componentes.

Si no desea incluir jQuery en sus aplicaciones de Vue 3, aún puede usar los archivos CSS de Bootsrap en sus aplicaciones, pero eso significa que solo podrá usar componentes que no requieran jQuery.

Publicar un comentario

0 Comentarios