VUE js modal with bootstrap is not working with my vue project

Question

I installed bootstrap with npm and I took the code form bootstrap and paste it on my code but it doesn't work. I'm an hour further but I am not getting it.

this is the code

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

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">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>

If I click on the button it neither gives an error and nor a popup. Where am I doing wrong?

This is the link of the bootstrap code I copy it. Is the Live demo

Did you install the required bootstrap scripts (jquery, popper, bootstrap)? — terrymorse
– terrymorse, Commented Apr 14, 2020 at 19:07
Boostrap doesn't install jQuery you have to do that yourself. Also if you are using NPM you will probably need to make $ global for it to work in Webpack or Rollup. Your best bet is to simply use vue-bootstrap. — Pier
– Pier, Commented Apr 14, 2020 at 19:24

FicLel · Accepted Answer · 2020-04-14 19:20:22Z

1

I guess that just installing bootstrap is not enough, because you are not using vue-bootstrap, you have to configure the jquery file in order to make it work, here it's a post that explain it step by step

answered Apr 14, 2020 at 19:20

FicLel

111 silver badge5 bronze badges

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

Collectives™ on Stack Overflow

VUE js modal with bootstrap is not working with my vue project

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related