How to add Bootstrap 4 JS to use Modal with VueJS

Question

I installed in my project bootstrap-vue from https://bootstrap-vue.js.org , because I use VueJS in the project. I'm new to vuejs so I don't know to much so far. I tried to add a bootstrap modal but didn't work. I knew that the bootstrap js is missing from my modules.

I put in my index.html the cdn from bootstrap and works.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Project</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  </body>
</html>

but this is an ugly solution.

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

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
</div>
</template>

Does someone know how to use bootstrap js in vuejs with npm modules?

Ikbel · Accepted Answer · 2017-08-17 11:34:20Z

1

1. Run:

npm i jquery tether bootstrap --save-dev

2. Add the ProvidePlugin to the plugins array in both build/webpack.dev.conf.js and build/webpack.prod.conf.js

plugins: [ 
  new webpack.ProvidePlugin({
    $: 'jquery',
    jquery: 'jquery',
    'window.jQuery': 'jquery',
    jQuery: 'jquery',
    'Tether': 'tether'
  })
]

3. Then:

npm i --save-dev expose-loader

Use in your entry point main.js like this:

import Vue from 'vue'
import App from './App'
require('expose-loader?$!expose-loader?jQuery!jquery')
require('bootstrap');

edited Aug 17, 2017 at 11:34

Ikbel

7,8513 gold badges36 silver badges46 bronze badges

answered Aug 17, 2017 at 9:31

user6385799

Sign up to request clarification or add additional context in comments.

2 Comments

Nordes Over a year ago

Wow thanks, I've searched a while how to make it work without adding more external resources.

Charles Okwuagwu Over a year ago

@JohnSmith please how may we apply this in this scenario: stackoverflow.com/questions/52325537/…

Collectives™ on Stack Overflow

How to add Bootstrap 4 JS to use Modal with VueJS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related