vue-bmodal

Reusable and simple modal for Vue.js

Overview

If you're like me, you really hate complicated components or components that only work with specific css libraries. That's why I came with the idea of sharing this simple VueJS modal, the one I use in all of my projects.

I'm using vue-clickaway to detect any "outside" clicks, in order to close the modal.

Also, the modal can be closed by pressing the Esc key.

You can see a demo right here.

Requirements

• vue: ^2.0.0
• vue-clickaway: ^2.2.2

Install

From npm:

$ npm install vue-bmodal --save

Or yarn:

$ yarn add vue-bmodal

Usage

1. Add and import this package into you project
2. Declare the component.
3. Declare a boolean for each instance of the modal.
4. Enjoy.

In your main JS file or Vue component file, you will write something like this:

import bmodal from "vue-bmodal";
 
export default {
  // Some other attributes
  components: {
    // Your other components declarations
    'bmodal': bmodal
  },
  data () {
    return {
      // Some variables of yours
      myAwesomeModal: false, // This boolean is called for showing/hiding the modal
    }
  }

And this is how you would call and use the modal:

<vue-bmodal
  @closeme="myAwesomeModal = false"
  v-if="myAwesomeModal == true"
  bwidth="large">
  <div slot="header">Some awesome modal header</div>
  <div slot="body">Some fine body for your modal</div>
  <div slot="footer">And the footer</div>
</vue-bmodal>

Customization

As mentioned early, the idea of this modal is that you can customize it as you like.

• You can use any css classes or styles for the header, body and footer and apply them to the corresponding slot.
  For example: <div slot="header" class="some-awesome-class">My header goes here</div>
• I declared 3 sizes (small, medium and large) for the modal container and you can passs it as a the bwidth prop. However, you can overwrite these three with your own css classes as well, by writing your own .vue-bmodal-w-small, .vue-bmodal-w-medium, .vue-bmodal-w-large classes, or the ones you need.
• If you don't like the overlay ☹️ you can overwrite its .vue-bmodal-mask class and change the background-color as you need.

License

MIT