Integrating a Bootstrap template in VueJS

Question

I have been developing a VueJS website for a few weeks, and realised my design skills were not good enough to design a proper landing page. I came across this stunning Bootstrap open source template and really would like to use it.

However, I would like to stick to VueJS since I need it for some other dynamic pages. What would be the best way to integrate this template into a VueJS component? It uses Bootstrap and a bit of JavaScript as well. I know of Vue Framework such as BootstrapVue, but they would require rewriting the whole page using its custom components (such as b-nav or b-nav-item).

I have tried just copying and pasting the HTML into a component but I then have the problem of the CSS and JavaScript. Is using a bootstrap.css file in Vue JS a good practice ?

I am not asking anyone to do some boring job for me, but it seems to me like tweaking such a template so that it fits to a VueJS component always has some side effects, and I wanted to make sure there were no easiest, more elegant and reliable solution for this.

Answer 1

The whole point of BootstrapVue is to drop Bootstrap's dependency on jQuery.
It only uses Bootstrap's scss and the jQuery part is replaced with BV's own JS (provided via Vue components).

At first glance, it doesn't look like that would be your case, since you want some additional jQuery code (the theme's own JS) - currently written in jQuery.

However, when looking closer, the theme's own jQuery script is quite small. It basically does three things:

• routes the page URLs when you navigate between sections (which could/should be replaced by Vue Router calls in your case),
• implements scrollSpy (which has a Vue alternative) - it does it for the same purpose - knowing when to change the page URL,
• implements magnificPopup (which also has a Vue alternative).

So it looks like the jQuery dependency could be fairly easily dropped, provided it's replaced by Vue code.

You basically seem to want a Vue variant of the Bootstrap theme. Or, to be more exact, a BootstrapVue variant of it.

If we were to look for the best possible candidate for the job, it would probably be found somewhere in the pool of Vue or BootstrapVue experts, as well as the creators of the Bootstrap theme (chances are they shouldn't find BootstrapVue difficult to use - considering the quality of their template).

Whether or not this is a job fit for your abilities is a question only you can answer but, unless you're purely interested in the functional part (getting the job done^[1]), it is definitely a good opportunity to learn more about both Vue and Bootstrap.
To provide a helpful estimate, a senior FE developer would take anywhere between 8 to 20 hrs to create this template, provided they know Vue.

---

^[1] Getting the job done with the least amount of effort would mean to simply inject the entire template as a page into your existing Vue app, making sure you import everything it needs (jQuery, jQuery.easing, Bootstrap, magnificPopup & scrollSpy) - roughly estimated at ~4 hours - could be less but you have to account for testing and any potential bug fixing.

I strongly advise against this approach as it's likely to significantly increase the size of your app while reducing its scalability and flexibility. This approach produces applications nobody wants to touch as, in time, the probability that any modification will break some existing functionality increases exponentially.

---

Since SO questions are supposed to take no longer than 15 minutes to answer, it should be obvious none of the above described tasks is feasible as a Stack Overflow question. Besides, you need to show some of your own coding effort up so far and provide a minimal reproducible example.