QantyBootstrap

QantyBootstrap es un conjunto de componentes de Bootstrap 5 para Vue 3, creado para facilitar la migración de Bootstrap-vue a Vue 3. Este plugin incluye Bootstrap 5, por lo que no es necesario instalar Bootstrap en tu proyecto.

Características

• Bootstrap 5: Incluye Bootstrap 5, por lo que no necesitas instalarlo por separado.
• Componentes Vue 3: Una amplia gama de componentes listos para usar en tus proyectos Vue 3.
• Directivas: Directivas útiles para mejorar la funcionalidad de tus componentes.

Componentes

Componentes registrados:

• b-form
• b-select
• b-form-select
• b-select-option
• b-form-select-option
• b-card
• b-card-body
• b-card-header
• b-card-footer
• b-card-title
• b-card-text
• b-card-group
• b-img
• b-alert
• b-modal
• b-list-group
• b-list-group-item
• b-badge
• b-sidebar
• b-breadcrumb
• b-breadcrumb-item
• b-avatar
• b-button
• b-navbar
• b-navbar-brand
• b-navbar-nav
• b-nav-item
• b-nav-form
• b-nav
• b-navbar-toggle
• b-nav-item-dropdown
• b-row
• b-col
• b-container
• b-spinner

Directivas

Las siguientes directivas están registradas:

• v-b-tooltip
• v-b-modal
• v-b-scrollspy
• v-b-toggle

Instalación

Para instalar QantyBootstrap, simplemente añade el plugin a tu proyecto Vue 3:

npm install qanty-bootstrap-stiven

Configuración

import { createApp } from 'vue'
import App from './App.vue'
import QantyBootstrap from 'qanty-bootstrap-stiven'
import 'qanty-bootstrap-stiven/index.css'

const app = createApp(App);
app.use(QantyBootstrap);
app.mount('#app');

Uso

<template>
  <b-container>
    <b-row>
      <b-col>
        <b-card>
          <b-card-header>Header</b-card-header>
          <b-card-body>Body</b-card-body>
          <b-card-footer>Footer</b-card-footer>
        </b-card>
      </b-col>
    </b-row>
  </b-container>
</template>