DEV Community

Cover image for use bootstrap 5 in vue correctly
Tefoh
Tefoh

Posted on

use bootstrap 5 in vue correctly

In this post we will see how use bootstrap in vue application. because bootstrap 5 drop support jQuery we can easily use it without an ui framework like bootstrap-vue. first we load bootstrap styles and then we use bootstrap modal to see how bootstrap javascript actually works.

install vue with vitejs

first we install vue application with vitejs. you can use vue-cli if you want but here it doesnt matter. for install vitejs app run this command:

npm init @vitejs/app
Enter fullscreen mode Exit fullscreen mode

meanwhile this will ask you project name and application template. for template select vue. then go project directory, install dependencies and run the vitejs server.

install bootstrap 5

now the vue app installed we should install bootstrap and sass for compile scss files. run this commands:

npm install bootstrap@next
npm install -D sass
Enter fullscreen mode Exit fullscreen mode

now we can load bootstrap styles. in main.js file we can easily load bootstrap.scss like this:

import 'bootstrap/scss/bootstrap.scss'
Enter fullscreen mode Exit fullscreen mode

if we use bootstrap classes for e.x. btn classes like <button class="btn btn-primary">test</button> we will see styles applied.

use bootstrap modal

bootstrap besides the styles give us some javascript that make our life easier and modal is one simple example. for this we will use bootstrap docs modal example. you can use this in any component template.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

there is two parts here one is the button show the modal and second part is the modal. so if we use this nothing works, why? because we just load styles not bootstrap javacript. so we load it too. with import { Modal } from 'bootstrap' we can load only the bootstrap modal javascript part awesome. but we will get an error that says @popperjs/core package not installed. lets install it with this simple command:

npm i @popperjs/core
Enter fullscreen mode Exit fullscreen mode

bootstrap need this package for javascript part. now modal should works. nice :) but we havent use vue vDOM too make this modal work lets do it with vDOM.

use virtual dom

vue and react use virual dom and because of that we use mostly with state in this frameworks but when we need to use dom elements not state like when want to focus input we should use refs. there is two ways to use bootstrap javascript one using data-bs, two use javascript. with second way we can use refs to make modal works. bootstrap docs says we can use it like this:

var myModal = new Modal(document.getElementById('exampleModal'), options)
Enter fullscreen mode Exit fullscreen mode

Modal is the one we imported earlier. we can replace document.getElementById('exampleModal') with our ref and we will name our ref exampleModal. we will need a state for modal to show and hide the modal.

  data: () => ({
    modal: null
  }),

  mounted() {
    this.modal = new Modal(this.$refs.exampleModal)
  }
Enter fullscreen mode Exit fullscreen mode

with modal.show() we can show modal and for hide just use hide method and the button for show modal will be like this:

<button type="button" class="btn btn-primary" @click="modal.show()">
  Launch demo modal
</button>
Enter fullscreen mode Exit fullscreen mode

and now we use vDOM to use bootstrap modal. good job :)) the hole simple component will be like this:

<template>
  <button type="button" class="btn btn-primary" @click="modal.show()">
    Launch demo modal
  </button>
  <div class="modal fade" ref="exampleModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="btn-close" @click="modal.hide()" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" @click="modal.hide()">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Modal } from 'bootstrap'
export default {
  name: "App",
  data: () => ({
    modal: null
  }),
  mounted() {
    this.modal = new Modal(this.$refs.exampleModal)
  }
};
</script>
Enter fullscreen mode Exit fullscreen mode

Summary

we created a vitejs vue application and installed bootstrap. then we used bootstrap modal with data-bs and easy way but after that used vue.js vDOM and correct way. i hope this short post helped i covered this topics in my course and shared my little Knowledge about this topic.

Discussion (10)

Collapse
ascensus_mdb profile image
Michal Szymanski

Great article, thanks! Btw the way - there is already very nice and free integration for Bootstrap 5 and Vue 3 :) Have a look at MDB Vue UI KIT mdbootstrap.com/docs/b5/vue/

Collapse
martinamsinck profile image
Martin Amsinck Andersen • Edited on

Kinda "free", Be sure to check the install guide, and the limitations in functionality, in the different tiers before bying

Stuff like, no npm install, no vue-cli install, no modal positioning etc.

Collapse
martinamsinck profile image
Martin Amsinck Andersen

And that Michal is the co-founder of md-boostrap

Collapse
ben_riley_d643f3ca46f93e4 profile image
Ben Riley • Edited on

Hello thanks for this post.

I am using this approach now but just to note the component did not work for me I had to wrap an extra div tag around the button and modal as the Vue component can only have a single child node inside the template tag.

You may want to update accordingly

Collapse
tefoh profile image
Tefoh Author

Thanks, yes you are correct about single child node in templates BUT this single child is for vue 2, in new version of vue we have fragments by default and you can write multiple child nodes in templates.

Collapse
emmanueldiogu profile image
emmanueldiogu

Hello, thanks for your article it saved me some stress. I however want ask a question. What if I only want to hide the modal in a function without clicking maybe when an event happens?

Collapse
tefoh profile image
Tefoh Author

Hi, glad to help. just call this.modal.hide() in any function you want or even a event callback. You have data and so use it.

Collapse
laruz profile image
Info Comment hidden by post author - thread only accessible via permalink
Farhang

perfect. i use bootstrap all the time as an amator web designer. it helped me a lot. thanks

Collapse
tefoh profile image
Tefoh Author

pro designers use tailwindcss :)

Collapse
laruz profile image
Farhang

ofcourse. i agree. i hope one day i write my own css styles without any frameworks

Some comments have been hidden by the post's author - find out more