Integración de Bootstrap 4 con Vue.Js Usando Bootstrap-Vue

React y Vue.js son dos marcos de trabajo líderes y modernos de JavaScript para el desarrollo del front-end. Mientras que React tiene una curva de aprendizaje considerable, y un proceso de construcción complejo (si usted viene del mundo de jQuery), todo lo que necesita hacer para empezar a usar Vue.js es un simple script de importación:

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"> </script>

Bootstrap se ha convertido en un popular marco de trabajo HTML/CSS para la construcción de sitios web responsivos. Sin embargo, se basa principalmente en jQuery para sus características principales, así como en su extensa lista de componentes - como alertas y modales. Así que exploraremos cómo usar Bootstrap con Vue.js, eliminando así jQuery.

Introducción a Bootstrap

Creado originalmente a finales de 2011 por Mark Otto y Jacob Thornton en Twitter Inc., Bootstrap pronto encontró popularidad fuera de Twitter después de convertirse en una herramienta de código abierto. Continuó creciendo como el framework de front-end más rápido para desarrolladores web en todo el mundo.

Hoy en día, Bootstrap se ha convertido en el estándar de facto para iniciar un nuevo proyecto de sitio web, con su arquitectura CSS y JS que proporciona componentes de interfaz de usuario y de respuesta móvil, junto con el soporte para la mayoría de los navegadores modernos.

Conectar Bootstrap con Vue.js

Como mencionamos anteriormente, el uso de Bootstrap con Vue.js es un poco complicado, debido a la gran dependencia de los componentes dinámicos de Bootstrap con jQuery. Sin embargo, hay al menos un par de buenos proyectos que están en el proceso de cerrar esa brecha:

Bootstrap-Vue
VueStrap

Exploraremos la primera opción, Bootstrap-Vue, ya que es el proyecto más actualizado y popular.

Bootstrap-Vue

Bootstrap-Vue no sólo es compatible con los componentes de Bootstrap y el sistema de rejilla, sino que también incluye soporte para las Vue.js Directives, lo que nos proporciona el conjunto completo de características del ecosistema Vue.js.

Una de las características más interesantes de Bootstrap-Vue es que tiene un playground en línea. Este nos permite exportar nuestro código a JSFiddle. ¿No es genial?

Creo que una buena documentación y un buen ecosistema de desarrolladores es necesario para el éxito de cualquier proyecto de software, y Bootstrap-Vue marca todas las casillas de verificación.

Introducción al Bootstrap-Vue utilizando la línea de comandos

Si has seguido las tendencias modernas de desarrollo web, definitivamente sabrás sobre npm y la instalación de bibliotecas. Bootstrap-Vue puede ser instalado con npm a través del siguiente comando:

npm i bootstrap-vue

Bootstrap-Vue también proporciona dos plantillas de vue-cli que pueden servir de soporte a nuestros proyectos sin demasiados problemas:

webpack simple: para una aplicación pequeña.
webpack: para proyectos más grandes.

Primero, instalamos el vue-cli:

npm i -g vue-cli

Luego, inicializamos nuestro proyecto - llamémoslo getting-start - usando la plantilla webpack-simple escribiendo lo siguiente en la terminal:

vue init bootstrap-vue/webpack-simple getting-started

Se abrirá un wizard. Puedes pulsar Return para aceptar los valores predeterminados.

Luego, escribe:

cd getting-started  
npm install  
npm run dev

Veamos este código línea por línea:

1. La primera línea que empieza con vue init crea un nuevo directorio llamado getting-start, donde se inicializa un nuevo proyecto Bootstrap-Vue.

2. Con cd getting-started, accedemos al nuevo directorio del proyecto.

3. npm install se encarga de instalar todas las dependencias del proyecto.

4. Finalmente, con npm run dev, se compila la aplicación y se lanza en el navegador.

Tu entorno local debería contener ahora los siguientes archivos y carpetas:

├── index.html
├── node_modules
│   └── lots of files
├── package.json
├── package-lock.json
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   └── main.js
└── webpack.config.js

Aquí, App.vue y main.js son los principales archivos de interés. Si arrancamos nuestro editor de texto y abrimos main.js, veremos el siguiente código, que importa la hoja de estilo Bootstrap y el Bootstrap-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)
})

Al mismo tiempo, el documento App.vue carga el código del front end.

Después de ejecutar el comando npm run dev, la página index.html del proyecto debería mostrar una página como la que se muestra a continuación:

Importación de Bootstrap-Vue con una script Tag en la sección Document <head>

Como vimos la forma en que npm instala y trabaja con Bootstrap-Vue, vamos a ver también la opción más simple: incluir Bootstrap-Vue usando una etiqueta de script en nuestro documento HTML:

<!-- Add Bootstrap and Bootstrap-Vue CSS to the <head> section -->  

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>  
<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.css"/>    

<!-- Add Vue and Bootstrap-Vue JS just before the closing </body> tag -->  

<script src="https://unpkg.com/vue/dist/vue.min.js"> </script>  
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"> </script>

Esto llamarà la versión más reciente de cada biblioteca. En el momento de escribir este artículo, se trata de Bootstrap v4.1.3, Bootstrap-Vue v2.0.0-rc.11 y Vue v2.5.17.

Si por alguna razón necesita soportar navegadores heredados, también puede incluir el @babel/polyfill, que emulará un entorno completo de ES2015+:

<script src="https://unpkg.com/[email protected]/dist/polyfill.min.js"> </script>

Ahora podemos trabajar con Vue.js, Bootstrap y Bootstrap-Vue en nuestra máquina local.

Trabajar con componentes de Bootstrap-Vue

Para las demostraciones de este artículo, usaremos CodePen. Para configurarlo, vamos a crear nuestro Pen, hacemos clic en el icono de configuración e importamos el siguiente CSS en la pestaña CSS:

https://unpkg.com/[email protected]/dist/css/bootstrap.min.css  
https://unpkg.com/[email protected]/dist/bootstrap-vue.css

En la pestaña de JavaScript, Vue y Bootstrap Vue:

https://unpkg.com/[email protected]/dist/vue.min.js  
https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js

Además, asegúrese de seleccionar Babel como el preprocesador de JavaScript.

Por último, hagamos clic en el botón Guardar y Cerrar. Ahora estamos listos para empezar a jugar con los componentes del Bootstrap-Vue.

Creación de un alert con Vue

Para crear un componente de alerta Bootstrap-Vue, vamos a añadir lo siguiente a nuestra área HTML de CodePen:

<div id='app'>    
<b-alert show> Hello {{ name }}! </b-alert>  
</div>

A continuación, añadimos la instancia Vue al área JS:

new Vue({    
el: "#app",    
data: {      
  name: "MaNoWeb"    
}  
});

Como resultado, deberíamos ver la alerta "Hello Sitepoint!":

El código anterior muestra un simple componente de alerta de Bootstrap usando Vue.js y Bootstrap-Vue. A continuación vamos a cambiar algunos de los parámetros de esta caja de alertas para hacerla más interesante. Por ejemplo, para hacer que la caja de alertas sea ocultada por el usuario, añadiremos la palabra clave dismissible junto a la directiva show:

<b-alert show dismissible> Hello {{ name }}! </b-alert>  

Ahora la alerta muestra un botón con un icono co forma de "x" : al hacer clic en él, se elimina la alerta de la página.

Pruébalo tú mismo!

Construcción de una lista dinámica con Bootstrap-Vue

Así que ahora que tenemos una buena idea de cómo usar el Bootstrap-Vue, construyamos un componente de lista. Esta es quizás la pieza de interfaz de usuario más común que encontrarás en las aplicaciones web y móviles.

Bootstrap-Vue proporciona dos componentes que juntos nos ayudan a construir una lista: <b-list-group> y <b-list-group-item>. Podemos pensar en el primero como el equivalente HTML de un tag <ul> o <ol>, mientras que el segundo muestra un elemento <li>.

We started by building a static shopping list:

<div id='app'>    
<b-list-group>      
  <b-list-group-item>Spaghetti</b-list-group-item>     
  <b-list-group-item>Tomato</b-list-group-item>      
  <b-list-group-item>Cheese</b-list-group-item>    
</b-list-group>  
</div>

Ahora, añadimos nuestra instancia de Vue en el panel de JavaScript:

new Vue({    
 el: '#app'  
});

Sin embargo, esto no se acerca en absoluto a una lista dinámica. Añadamos la directiva Vue.js v-for dentro del código del componente de la lista para mostrar algunos elementos de la lista de un array:

<b-list-group-item v-for="item in items">    
  {{ item.message }} 
</b-list-group-item>

A continuación, añadamos el array de elementos a la instancia Vue:

new Vue({    
el: '#app',    
data: {      
 items: [       
  { message: 'Spaghetti' },       
  { message: 'Tomato' },     
  { message: 'Cheese' }      
  ]   
 } 
);

Eventos en las etiquetas de Bootstrap

El Bootstrap tiene un componente de identificación que es útil para llevar la cuenta de los artículos o etiquetarlos. Por ejemplo, en el ejemplo de la lista anterior, podríamos añadir una etiqueta a un elemento de nuestra lista indicando el número de variantes.

Con Bootstrap-Vue, podemos utilizar el componente <b-badge> como hijo del elemento <b-list-group-item> para indicar el número de los diferentes tipos de "queso" de la siguiente manera:

<b-list-group-item>Cheese<b-badge>3</b-badge></b-list-group-item>

Ahora, vamos a añadir un botón para compartir en nuestra página para hacer un seguimiento del número de veces que se ha compartido la página. Para ello podemos usar el componente <b-button> para crear un botón de Bootstrap y dentro del botón anidaremos el elemento <b-badge> child:

<div class="text-center">    
<b-button variant="primary" size="sm">      
  Share on Facebook 
  <b-badge variant="light">{{ share_count }}</b-badge>    
</b-button>  
</div>

Modificamos nuestro código JavaScript añadiendo una variable share_count, que llevará un registro del número de veces que se comparte nuestra página:

new Vue({    
el: '#app',    
 data: {      
 share_count:0    
}  
});

Obsérvese que el botón todavía no es dinámico. Es decir, no incrementará el contador de acciones cuando hagamos clic en el botón Share on Facebook, ya que aún no hemos añadido un receptor de eventos al botón. Usaremos la directiva Vue.js v-on para ejecutar la escucha del evento al clic en el botón:

<b-button variant="primary" size="sm" v-on:click="share_count += 1">

Esto hace que la variable share_count se incremente cada vez que hacemos clic en el botón. El código de la etiqueta no tiene por qué cambiar, ya que ya está vinculado a la variable share_count. Por lo tanto, cada vez que se hace clic en el botón, la variable share_count se incrementa y también lo hace el badge.

Conclusión

En este tutorial, hemos visto cómo utilizar Bootstrap-Vue para añadir componentes de Bootstrap a las aplicaciones Vue.js.

Ahora te toca a ti: ¡construye la próxima e impresionante página web de Bootstrap-Vue y compártela con el mundo!

Silvia Mazzetta

Web Developer, Blogger, Creative Thinker, Social media enthusiast, Italian expat in Spain, mom of little 6 years old geek, founder of  @manoweb. A strong conceptual and creative thinker who has a keen interest in all things relate to the Internet. A technically savvy web developer, who has multiple  years of website design expertise behind her.  She turns conceptual ideas into highly creative visual digital products.