Использование Bootstrap 5 с Vue 3

Bootstrap 5 больше не требует jQuery, поэтому его проще использовать с Vue, и ему больше не требуется такая библиотека, как bootstrap-vue.

Установите bootstrap, как любой другой модуль JS в проекте Vue, используя npm install или добавив его в package.json.

npm install --save bootstrap

Затем добавьте компоненты Bootstrap CSS и JS в точку входа проекта Vue (то есть: _3 _) ...

import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap"

Тогда самый простой способ использовать компоненты Bootstrap - использовать атрибуты data-bs-. Например, вот компонент Bootstrap Collapse ...

        <button class="btn btn-primary" 
            data-bs-target="#collapseTarget" 
            data-bs-toggle="collapse">
            Bootstrap collapse
        </button>
        <div class="collapse py-2" id="collapseTarget">
            This is the toggle-able content!
        </div>

Или вы можете импортировать любые компоненты Bootstrap и обернуть их как компоненты Vue. Например, вот компонент Popover ...

import { Popover } from bootstrap;

const popover = Vue.component('bsPopover', {
    template: `
        <slot/>
    `,
    props: {
        content: {
            required: false,
            default: '',
        },
        title: {
            default: 'My Popover',
        },
        trigger: {
            default: 'click',
        },
        delay: {
            default: 0,
        },
        html: {
            default: false,
        },
    },
    mounted() {
        // pass bootstrap popover options from props
        var options = this.$props
        var ele = this.$slots.default[0].elm
        new Popover(ele,options)
    },
})

   <bs-popover
        title="Hello Popover"
        content="This is my content for the popover!"
        trigger="hover">
        <button class="btn btn-danger">
           Hover for popover
        </button>
   </bs-popover>

Демо

Да, вы можете использовать Bootstrap без Bootstrap-Vue. Установите эти два пакета с помощью npm:

npm install --save @popperjs/core bootstrap@next

Импортируйте Bootstrap в src / main.js:

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap";

Пример использования шаблона Vue:

<div class="dropdown">
    <button
      class="btn btn-secondary dropdown-toggle"
      type="button"
      id="dropdownMenuButton1"
      data-bs-toggle="dropdown"
      aria-expanded="false"
    >
      Check Bootstrap
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>

Результат:

Это легко реализовать, если вы поймете, как работают модальные окна Bootstrap. Модальные окна Bootstrap имеют элемент div с классом modal fade. Когда он запускается, этот элемент также получает классы show и d-block. Кроме того, тег body получает дополнительный класс modal-open. Когда модальное окно закрыто, этот процесс меняется на противоположный. Понимая это, мы можем легко реализовать модальные окна Bootstrap 5 в своем коде:

Импортируйте CDN Bootstrap 5 в свой код. Добавьте в свой код как CSS, так и JS.

Наш образец одностраничного компонента будет выглядеть так:

<template>
<div>  
    <p>Test modal<a href="#" @click="modalToggle">now</a></p>
    <div>
        <button type="button" class="btn btn-primary" @click="modalToggle">My Modal</button>
            <div
            ref="modal"
            class="modal fade"
            :class="{ show: active, 'd-block': active }"
            tabindex="-1"
            role="dialog">
            <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button
                    type="button"
                    class="close"
                    data-dismiss="modal"
                    aria-label="Close"
                    @click="modalToggle">
                    <span aria-hidden="true">&times;</span>
                </button>
                </div>
                <div class="modal-body">
                <p>Modal body text goes here.</p>
                </div>
            </div>
            </div>
        </div>
        <div v-if="active" class="modal-backdrop fade show"></div>
        </div>
</div>
</template>

Здесь мы используем базовое модальное окно Bootstrap 5.

<script>
export default {
data() {
    return {
    active: false,
    }
},
methods: {
    modalToggle() {
    const body = document.querySelector("body")
    this.active = !this.active
    this.active ? body.classList.add("modal-open") : body.classList.remove("modal-open")
    },
},
}
</script>

Здесь у нас есть переменная active, для которой изначально установлено значение false. Таким образом, модальное окно не будет отображаться при загрузке страницы. При нажатии на ссылку мы используем метод для переключения этой переменной. Это приведет к удалению атрибута show и класса d-block из нашего модального окна и удаления свойства modal-open из тега body.