Integración de Bootstrap 4 con Vue.js usando Bootstrap-Vue

by Silvia Mazzetta Date: 22-12-2019 javascript frameworks Vue Bootstrap4 BootstrapVue

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:

integración Bootstrap con Vue

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/bootstrap-vue@latest/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/bootstrap-vue@latest/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/babel-polyfill@latest/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!

 
by Silvia Mazzetta Date: 22-12-2019 javascript frameworks Vue Bootstrap4 BootstrapVue visitas : 28658  
 
Silvia Mazzetta

Silvia Mazzetta

Web Developer, Blogger, Creative Thinker, Social media enthusiast, Italian expat in Spain, mom of little 9 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. 

 
 
 

Artículos relacionados

Crear PDF con Javascript y jsPDF

El formato PDF es muy útil para descargar datos de forma masiva en una aplicación web. Ayuda a los usuarios a descargar contenido dinámico en forma de archivo para que…

Como hacer tu propio cursor personalizado para tu web

Cuando empecé a ojear webs distintas y originales para aprender de ellas, de las primeras cosas que me llamaron la atención fue que algunas de ellas tenían sus propios cursores,…

Explorando la API de CSS Paint: Redondeo de formas parte 1

Añadir bordes a las formas complejas es un auténtico rollo (a veces), pero redondear las esquinas de las formas complejas es un suplicio jejeje. Por suerte, la API de pintura…

Cómo enviar un correo electrónico desde un formulario de contacto HTML

En el artículo de hoy vamos a escribir sobre cómo hacer un formulario que funcione y que al pulsar ese botón de envío sea funcional y envíe el correo electrónico…

Cómo hacer un sitio web multilingüe sin redireccionamiento

Hoy, vamos a hablar de cómo implementar un simple selector de idioma en el sitio web estático o básico, sin necesidad de ningún backend o llamadas a la base de…

Comenzando con Bootstrap-Vue paso a paso

Hoy te mostraremos cómo usar BootstrapVue, describiremos el proceso de instalación y mostraremos la funcionalidad básica. El proyecto está basado en el framework CSS más popular del mundo - Bootstrap, para…

Por qué los desarrolladores de JavaScript deberían preferir Axios a Fetch

Por qué los desarrolladores de JavaScript deberían preferir Axios a Fetch En mi artículo anterior, "Usando la Api Fetch Para Hacer Llamadas Ajax", hablé de los fundamentos de la API Fetch.…

Creación de un sencillo spinner-loader CSS

En el artículo de hoy mostraremos cómo animar un loader básico que gira cuando se define alguna acción predefinida, como cargar una imagen. Eso se puede utilizar en un sitio…

Los mejores selectores de fechas para Bootstrap y tu aplicación

Los selectores de fecha son widgets que permiten a los usuarios elegir una sola fecha o rango de fechas y horas. Es un elemento habitual para todo usuario de Internet,…

Validación de formularios HTML usando BULMA y vanilla JavaScript

Hoy vamos a escribir sobre los formularios de contacto y cómo validarlos usando JavaScript. El formulario de contacto parece ser una de las características principales de toda página web básica. Es…

Cómo usar el efecto Parallax.Js en tu sitio web

Hoy vamos a escribir sobre el efecto de parallax, similar al desplazamiento de parallax, y cómo implementarlo para mejorar su página de aterrizaje. En webdev, dicen que primero el móvil…

Usando la API FETCH para hacer llamadas AJAX - Una promesa cumplida

En este artículo hablamos sobre lo que son las llamadas AJAX y cómo utilizarlas de forma tradicional, utilizando el objeto XMLHttpRequest (XHR). En resumen, gracias a las llamadas AJAX una…

Clicky