Instalar Bootstrap 5 en Vue 3

Bootstrap 5 es uno de los frameworks CSS más populares, conocido por su facilidad de uso y sus potentes componentes. Integrarlo en un proyecto de Vue 3 puede agilizar el desarrollo de interfaces atractivas y responsivas. En esta guía, aprenderás a instalar Bootstrap 5 en Vue 3 utilizando Sass y la API de Composición, asegurando una configuración moderna y eficiente.

Requisitos Previos

Antes de comenzar, asegúrate de tener instalados los siguientes elementos en tu sistema:

Node.js (v18.3 o superior). Puedes descargarlo desde nodejs.org.
Conocimientos básicos de Vue 3 y Sass.

Crear un Proyecto Vue 3

La forma más sencilla de crear un proyecto Vue 3 es utilizando el comando npm create vue@latest, que te guiará a través de un asistente para configurar tu proyecto.

Paso 1: Crear el Proyecto

Abre tu terminal y ejecuta el siguiente comando:

npm create vue@latest

Paso 2: Configurar el Proyecto

El asistente te hará una serie de preguntas. Aquí tienes una configuración recomendada:

✔ Project name: … mi-vue-bootstrap
✔ Add TypeScript? … No
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … Sí
✔ Add Pinia for state management? … No
✔ Add Vitest for Unit testing? … No
✔ Add an End-to-End Testing Solution? … No
✔ Add ESLint for code quality? … Sí
✔ Add Prettier for code formatting? … Sí
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No

Una vez completada la configuración, navega al directorio del proyecto:

cd mi-vue-bootstrap

Instalar Bootstrap 5 y Sass

Para integrar Bootstrap 5 con soporte de Sass, necesitarás instalar las dependencias necesarias.

Paso 1: Instalar Bootstrap 5

Ejecuta el siguiente comando para instalar Bootstrap 5:

npm install bootstrap@5

Paso 2: Instalar Sass y sass-loader

Bootstrap 5 utiliza Sass para la personalización de estilos. Instala Sass y sass-loader como dependencias de desarrollo:

npm install sass sass-loader -D

Configurar Vite para Sass

Vue 3 utiliza Vite como su herramienta de compilación por defecto. Necesitamos configurar Vite para que reconozca Sass como preprocesador.

Paso 1: Actualizar `vite.config.js`

Abre el archivo vite.config.js en la raíz de tu proyecto y ajusta la configuración para incluir el soporte de Sass. A continuación, un ejemplo de configuración básica:

Nota: El campo additionalData permite que Vite inyecte automáticamente el contenido de custom.scss en cada archivo .vue, facilitando la personalización global de estilos.

Paso 2: Crear el Archivo Sass Personalizado

Crea un directorio para tus estilos y un archivo Sass personalizado:

mkdir -p src/assets/scss
touch src/assets/scss/custom.scss

Abre src/assets/scss/custom.scss y añade lo siguiente:

Explicación:

Funciones y Variables: Importamos las funciones y variables de Bootstrap para poder personalizarlas.
Personalización: Modificamos las variables de Bootstrap según nuestras necesidades antes de importar los estilos completos.
Importación de Bootstrap: Finalmente, importamos los estilos completos de Bootstrap.

Importar Bootstrap en el Proyecto

Ahora que hemos configurado Sass y personalizado Bootstrap, necesitamos importar los estilos en nuestro proyecto Vue.

Paso 1: Importar los Estilos en `main.js`

Abre src/main.js y añade la importación de los estilos personalizados:

Nota: Al importar custom.scss, todos los estilos de Bootstrap estarán disponibles en tu aplicación.

Utilizar Bootstrap en Componentes con la API de Composición

Con Bootstrap instalado y configurado, puedes comenzar a utilizar sus clases y componentes en tus componentes Vue 3 utilizando la API de Composición.

Ejemplo: Crear un Componente con un Botón de Bootstrap

A continuación, se muestra un ejemplo sencillo de cómo utilizar Bootstrap en un componente Vue 3.

Paso 1: Crear el Componente

Crea un archivo llamado BootstrapButton.vue en el directorio src/components/:

Explicación:

Clases de Bootstrap: Utilizamos clases como btn, btn-primary, d-flex, justify-content-center, align-items-center, y vh-100 para estilizar el botón y centrarlo en la pantalla.
Manejador de Eventos: La función handleClick muestra una alerta cuando se hace clic en el botón.

Paso 2: Integrar el Componente en la Aplicación

Abre App.vue y añade el componente BootstrapButton:

Resultado Esperado

Al ejecutar tu aplicación (npm run dev), deberías ver una página con un botón estilizado por Bootstrap. Al hacer clic en el botón, se mostrará una alerta confirmando que todo funciona correctamente.

Conclusión

Integrar Bootstrap 5 en un proyecto de Vue 3 utilizando Sass y la API de Composición es un proceso sencillo que puede mejorar significativamente la apariencia y funcionalidad de tu aplicación. Al seguir esta guía, has configurado un entorno de desarrollo robusto que combina la potencia de Vue 3 con la flexibilidad de Bootstrap 5, permitiéndote crear interfaces atractivas y responsivas de manera eficiente.

Ventajas de esta Integración:

Rapidez en el Desarrollo: Aprovecha los componentes preconstruidos de Bootstrap para acelerar el desarrollo.
Personalización Sencilla: Utiliza Sass para personalizar fácilmente los estilos de Bootstrap según tus necesidades.
Modernidad: Combina la reactividad de Vue 3 con la robustez de Bootstrap 5.

Sigue aprendiendo

Rutas de aprendizaje