Cómo usar Bootstrap con Vue.js

Entre los frameworks que trabajan con JavaScript, Vue.Js es uno de los preferidos por los developers. Acorde a la definición que le dan en su página web oficial, es un "framework progresivo para crear interfaces de usuario. A diferencia de otros frameworks monolíticos, Vue está diseñado desde cero para ser adoptable de forma incremental. La biblioteca principal se centra solo en la capa de vista y es fácil de recoger e integrar con otras bibliotecas o proyectos existentes".

Cuando se combina con otro framework, como Bootstrap, puede ser la solución ideal para la creación de nuestra aplicación o sitio web. Bootstrap, acorde a la definición dada en su página web, es “el kit de herramientas de código abierto front-end más popular del mundo, que incluye variables y mixins de Sass, un sistema de cuadrícula receptivo, amplios componentes preconstruidos y potentes complementos de JavaScript”.

Cómo instalar Bootstrap

Antes de instalar Bootstrap, primero debes tener creado un proyecto de Vue, si aún no lo tienes listo, puedes crearlo ingresando el comando “Vue créate” seguido del nombre del proyecto, de esta manera: 

$ vue create vue-project-name

Te pedirá que seleccione la configuración preestablecida o que crees tu alguna. Luego de que elijas la que más te convenga, el proyecto Vue estará creado.

Luego de esto, ya podemos instalar el “Bootstrap-vue” utilizando el Yarn o NPM. Si deseas instalar “bootstrap-vue” y “Bootstrap” utilizando el manager de paquetes Yarn, escribe el siguiente código: 

$ yarn add bootstrap bootstrap-vue

O, si deseas instalarlos utilizando NPM, escribe el código:

$ npm install bootstrap bootstrap-vue –save

Una vez que ambos estén instalados, tienes que habilitarlos en el archivo main.js

Somos expertos en Bootstrap y Vue.js.

Pregunta por nuestros servicios de IT Staff Augmentation.

import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import 'bootstrap/dist/css/bootstrap.css';

Vue.use(BootstrapVue);

Luego de habilitarlos, ya puedes utilizarlos en tu proyecto Vue.

En Rootstack nuestro equipo de expertos está dispuesto a darte la bienvenida. Forma parte de una familia de developers, creando las tecnologías del presente y del futuro. Si te interesa conocer sobre nuestras vacantes, haz click aquí y comienza a crecer como profesional en una de las empresas de software más sólidas de Latinoamérica.

Te recomendamos en video