@owowagency/bootstrap-vue

A component library for Vue 3 and Bootstrap 5 + a few extra's just for you 😉.

<Row
    align="end"
    cols="1"
    cols-sm="3"
>
    <Col>
        <FormGroup
            v-model="email"
            :invalid-feedback="errors.email"
            label="Email address"
            placeholder="[e-mail]"
        />
    </Col>

    <Col>
        <FormGroup
            v-model="password"
            :invalid-feedback="errors.password"
            label="Password"
            type="password"
        />
    </Col>

    <Col>
        <ButtonState
            :error="error"
            :loading="loading"
            @click="login"
        >
            Login
        </ButtonState>
    </Col>
</Row>

📖 Table of contents

• Demo
• Installation
• Usage
• Contributing
• License
• OWOW

🚀 Demo

All components can be found on the Storybook page of this package.

⚙️ Installation

Installing this package can be done by using npm or yarn.

# npm
npm install @owowagency/bootstrap-vue

# yarn
yarn add @owowagency/bootstrap-vue

This package also requires Bootstrap for its styling and Javascript.

# npm
npm install bootstrap

# yarn
yarn add bootstrap

🛠 Usage

Here is a simple example on how to use a component in your Vue application:

<template>
    <Button variant="danger">
        Please don't click me!
    </Button>
</template>

<script setup>
import {Button} from '@owowagency/bootstrap-vue';
</script>

This package provides the following features:

Components

• Accordion
• AccordionItem
• Alert
• Badge
• Breadcrumb
• BreadcrumbItem
• Button
• ButtonClose
• ButtonGroup
• ButtonState
• Card
• Carousel
• Col
• Collapse
• Confirm
• Container
• Dropdown
• DropdownMenu
• DropdownMenuItem
• FormCheck
• FormCheckGroup
• FormControl
• FormDropdown
• FormDropdownSearch
• FormGroup
• FormImage
• FormPills
• FormSelect
• InputGroup
• ListGroup
• ListGroupItem
• Modal
• Nav
• NavItem
• NavLink
• Offcanvas
• Row
• Spinner
• Table
• Tooltip

Composables

• useActive
• useBootstrap
• useBootstrapEmits
• useBootstrapInstance
• useBreakpoints
• useClasses
• useCol
• useDisabled
• useDropdown
• useDropdownItems
• useFlush
• useFormControl
• useFormSelect
• useId
• usePlacement
• useSize
• useStringTemplate
• useTag
• useTooltipPlacement
• useTrigger
• useVariant

Documentation

The documentation for this package is auto-generated by vue-docgen-cli. To generate the documentation yourself, run yarn generate-docs.

🫶 Contributing

Please see CONTRIBUTING for details.

📜 License

The MIT License (MIT). Please see License File for more information.

This package has been brought to you with much love by the wizkids of OWOW. Do you like this package? We’re still looking for new talent and Wizkids. So do you want to contribute to open source, while getting paid? Apply now.