This question focuses on understanding how something works rather than just fixing it. I really enjoy learning about this.
Currently, I am involved in a project that combines VueJS and Symfony. One of the things I would like to achieve is using Bootstrap JS components such as collapse.
I have imported Bootstrap into my application and verified its presence in my file.
//app.js
import $ from 'jquery'
window.$ = window.jQuery = $
import 'bootstrap'
if (typeof $.fn.popover == 'function') {
alert('yolo') //works
}
//My view
{% block javascript %}
{{ parent() }}
<script>
if (typeof $.fn.popover == 'function') {
alert('yolo') //works
}
</script>
{% endblock %}
However, simply importing Bootstrap is not enough to achieve the desired functionality in my view. For example, the attribute-related method does not work.
<!-- This does not work -->
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
After some research, I discovered there is a library (which I cannot use due to extensive refactoring required) that addresses this issue. Is there a specific reason for this?
How does it work? Could webpack loader be the reason behind this? (I am using Webpack Encore)