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/[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!

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

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. 

 
 
 

Artículos relacionados

Modo oscuro en el sitio web usando CSS y JavaScript

En el artículo de hoy vamos a aprender a construir más o menos estándar en estos días en las páginas web y que es el modo de color alternativo y…

Javascript: los operadores Spread y Rest

En el artículo de hoy vamos a hablar de una de las características de la versión ES6 (ECMAScript 2015) de JavaScript que es el operador Spreadasí como el operador Rest. Estas…

Cookies HTTP: cómo funcionan y cómo usarlas

Hoy vamos a escribir sobre la forma de almacenar datos en un navegador, por qué los sitios web utilizan cookies y cómo funcionan en detalle. Continúa leyendo para averiguar cómo implementarlas…

Todas las funciones de javascript y los métodos para manipular los arrays

Este artículo mostrará las funciones prominentes de las arrays de JavaScript, entre ellas .map() , .filter() , y .reduce() , y luego pasará a través de ejemplos de casos en los que .every() …

Como construir mejores componentes de alto nivel (Higher-order components) con el Vue 3

El Vue 3 será lanzado pronto con la introducción del API de composición (Composition API). Viene con muchos cambios y mejoras en el rendimiento. Los componentes de orden superior (HOC…

Node.js: herramientas de código abierto para los desarrolladores

De la amplia gama de herramientas disponibles para simplificar el desarrollo de Node.js, aquí están las mejores. Una encuesta en StackOverflow afirma que el 49% de los desarrolladores usan Node.js para…

Renderización lado servidor de Vue.js on Php

¿Intentas que el renderizado del lado del servidor funcione con PHP para renderizar tu aplicación Vue.js pero se atasca? Hay un montón de grandes recursos por ahí, pero hasta ahra no…

Cómo crear un aplicación Vue.js en 5 minutos

Vue.js se está volviendo cada vez más popular, convirtiéndose en un competidor significativo de frameworks como Angular o React.js. Como front-end framework para principiantes, conquista con éxito los corazones de…

Vue.js 3, la programación orientada al futuro que no hay que perderse!

Si estás interesado en Vue.js, probablemente conozcas la 3ª versión de este framework, que se publicará en breve. La nueva versión de momento está en desarrollo, pero todas las características…

Vue.js - Cómo usar (con seguridad) un plugin de jQuery con Vue.js

No es una buena idea usar jQuery y Vue.js en la misma interfaz. No lo hagas si puedes evitarlo, pero probablemente si estás leyendo esto no porque quieras usar jQuery…

Como construir una web application con Styled Components en Vue.js

Styled-Components es una biblioteca muy popular dentro de la comunidad React y React Native, y ahora puedes usarla en Vue.js. Para aquellos que no lo saben, Styled-Components es una biblioteca muy…

10 librerías para machine learning en JavaScript

JavaScript es actualmente uno de los lenguajes de programación más populares. Su principal aplicación se encuentra en las aplicaciones web, utilizándose para dar funcionalidad a las páginas web dinámicas. Otro…

Utilizamos cookies propias y de terceros para mejorar nuestros servicios, elaborar información estadística y analizar tus hábitos de navegación. Esto nos permite personalizar el contenido que ofrecemos y mostrarte publicidad relacionada con tus preferencias. Clicando en ‘Acepta todas’ aceptas el almacenamiento de cookies en tu dispositivo para mejorar la navegación en el sitio web, analizar el tráfico y ayudar en nuestras actividades de marketing. También puedes seleccionar ‘Sólo cookies de sistema’ para aceptar sólo las cookies necesarias para que la web funcione, o puedes seleccionar las cookies que quieres activar clicando en ‘Configuración’

Acepta todas Sólo cookies de sistema Configuración