Как подключить Bootstrap к Vue.js

24.04.2017

Проблема связки Bootstrap и Vue заключается в том, что Vue использует virtual DOM, а Bootstrap в свою очередь использует jQuery, который работает c DOM. Поэтому такая связка возможна только если выбросить jQuery из Bootstrap, ну или не использовать Bootstrap.js вообще.

Есть два способа подключить Bootstrap к Vue.js. Мы рассмотрим каждый из них и определим какой способ использовать удобнее.

Тег < link >

Первый и самый простой способ добавить в наш проект Bootstrap — это использовать классический тег < link >:

1
2
3
4
5
6
<head>
  <meta charset="utf-8">
  <title>Vue</title>
  <!-- CSS -->
  <link rel="stylesheet" href="/относительный/путь/до/bootstrap.min.css">
</head>

Проблема здесь в том, что мы не можем так же подключить bootstrap.js. Поэтому данный способ ограничивает нас использованием только css.

Компонент Vue-strap

Второй способ это подключить Bootstrap через готовый Vue компонент VueStrap.

Установка Vue-strap:

1
$ npm install vue-strap

Либо (для Vue.js v2):

1
$ npm i git://github.com/yuche/vue-strap.git#v2 --save

Затем устанавливаем сам Bootstrap, используя команду:

1
$ npm install --save bootstrap-vue

Всё готово! Осталось только подключить bootstrap к нашему проекту. Для этого добавим в App.vue несколько строчек:

1
2
3
4
5
6
7
8
9
10
11
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import navbar from 'vue-strap/src/Navbar'
import dropdown from 'vue-strap/src/Dropdown'
export default {
name: 'app',
components:{
'navbar':navbar,
'dropdown': dropdown
}
}

Вы можете сами подключать те компоненты, которые вам понадобятся в проекте. Здесь мы подключили только navbar и dropdown.

Заключение

Я лично использую второй способ, так как он помогает легко настраивать библиотеку. Не нужно каждый раз менять файл bootstrap.min.css, чтобы подключить или отключить какие либо компоненты, как при использовании первого способа через тег <link>. Также VueStrap позаботился о том, чтобы в bootstrap не было jQuery, поэтому у вас не возникнет никаких конфликтов при использовании компонентов.

Подробное API компонента VueStrap можете посмотреть на официальном сайте.

Полезные ссылки:

2 комментария

  1. @Alex пишет:

    Привет! Не очень понял из статьи — при использовании второго способа, будет ли полноценно работать bootstrap — модальные окна, сетка, js-фичи типа выпадающих списков и тп?

    • @rinamina пишет:

      Здравствуйте! Да, второй способ позволяет работать с js-компонентами Bootstrap. В коде второго способа вы можете заметить какие компоненты я подключила, это navbar и dropdown. Вы можете подключать те компоненты, которые необходимы вам. Не пренебрегайте официальной документацией: http://yuche.github.io/vue-strap
      Там перечислены все возможности VueStrap.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: