Embracing the power of VueJS with a Bootstrap template

After working on a VueJS website for a while, I realized that my design skills weren't up to par when it came to creating an effective landing page. That's when I stumbled upon this amazing Bootstrap open source template that I really want to incorporate.

However, I still want to stick with VueJS since I require it for other dynamic pages. I'm wondering what the best approach would be to integrate this template into a VueJS component considering it utilizes Bootstrap and some JavaScript. While I'm aware of Vue Frameworks like BootstrapVue, they typically involve reworking the entire page using custom components like b-nav or b-nav-item.

I attempted to simply copy and paste the HTML into a component, but then ran into issues with the CSS and JavaScript. Is incorporating a bootstrap.css file in Vue JS considered good practice?

I'm not looking for someone to do the work for me, but it seems like adjusting a template to fit within a VueJS component often results in unforeseen complications. I just wanted to explore if there might be an easier, more elegant, and reliable solution for this integration process.

Answer №1

One of the main objectives behind BootstrapVue is to eliminate Bootstrap's reliance on jQuery.
Instead of using jQuery, BootstrapVue utilizes its own JavaScript (delivered through Vue components) while still incorporating Bootstrap's scss.

Initially, it may seem like your situation is different since you require additional jQuery code (the theme's custom JS) currently written in jQuery.

Upon closer inspection, the theme's jQuery script is relatively small. Its functions include routing page URLs during section navigation (which could potentially be replaced by Vue Router calls), implementing scrollSpy, and magnificPopup functionality (both of which have Vue alternatives available).

This suggests that the jQuery dependency could easily be phased out by integrating Vue code instead.

Your objective appears to involve creating a Vue variation of the Bootstrap theme, specifically a variant tailored for BootstrapVue.

The ideal candidates for this task would likely consist of Vue or BootstrapVue experts, as well as the developers of the original Bootstrap theme. Given their expertise, adapting to BootstrapVue shouldn't pose a significant challenge.

Whether this aligns with your skill set is something only you can determine. However, apart from achieving the final outcome, this project presents an excellent opportunity to enhance your knowledge of Vue and Bootstrap.
In terms of time estimation, an experienced front-end developer proficient in Vue would typically spend between 8 to 20 hours developing this template.


Opting for the simplest approach - injecting the entire template into your existing Vue app along with necessary imports (jQuery, jQuery.easing, Bootstrap, magnificPopup, & scrollSpy) - might take around 4 hours. While this method could be quicker, thorough testing and potential bug fixing should be factored in.

I strongly discourage this method due to the negative impact it can have on your app's size, scalability, and flexibility. Such approaches often result in applications that are challenging to maintain as any modifications risk disrupting existing features over time.


Given the guideline that SO queries should take no more than 15 minutes to address, it's evident that the tasks described above aren't suited for a Stack Overflow query. Additionally, demonstrating your coding efforts thus far and providing a minimal reproducible example are essential requirements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to alter the height of table data cells in Mozilla Firefox

The td height is being stretched out as shown in the image. I experimented with various solutions: Setting the td height to 1px and allowing the content to stretch it. Adding a style and setting the height to 1 px Including a div tag on the conten ...

JS code isn't showing up correctly after opening the HTML file

I'm having trouble when I try to view my HTML file in a browser because none of the code from my JS file is showing up. As a beginner in JavaScript, I've checked for simple syntax errors and even ran it through a validator which showed that there ...

Guide: Using jQueryUI's explode effect to animate an HTML element explosion

I'm having trouble getting the jQueryUI explode effect to work properly. I've tested it out on this jsfiddle, but the explosion effect doesn't seem to happen as expected - the element just disappears with no explosion animation. $('h1, ...

display a discrete delete button when pressing a button within ng-bootstrap

My current setup uses ng-bootstrap with Angular4. Image https://i.sstatic.net/83UhP.png In the interface, a checkbox button is used to show responses fetched from the backend. By clicking the button, the x button disappears along with other elements belo ...

Using Material UI v1 to customize the widths of table columns

I am looking to configure column widths on a Material UI table using CSS, rather than within React with "classes." However, I am struggling to understand how the column widths are actually controlled. Despite trying to set widths on the TH columns, it does ...

Ways to ensure the title changer works seamlessly for everyone

Having a title changer for elements visible in the viewport is crucial. However, the current setup only works for a single division and fails to function with multiple divisions. Click Here for Live Testing and Viewing Check out the jsFiddle for Code V ...

JavaScript's counterpart to getElementById for Classes

Currently in the process of developing a game, I am faced with the task of modifying the CSS values for an entire group of objects. When dealing with a single ID, I typically use document.getElementById("idHere"); however, now I am searching for somethin ...

Can the "title" attribute of an <a> tag be modified using CSS?

Is it possible to change the value of "title" using CSS in my HTML code? I have tried different ways, but the following CSS code did not work. How can I resolve this issue? .icon { content: attr("A new title"); } <a class="icon" href="https://www. ...

Acquire Table Element Using Javascript

I have a HTML table that contains information such as names, addresses, and phone numbers. Within each row of the table, there is a link that can be clicked to open a popover. When a popover is opened, I want to save the name from that particular row. The ...

Using Python and Selenium to verify an image with execute_script

Is there a way to verify the presence of an image on a webpage using Selenium in Python? Let's say we want to check if the logo is displayed in the upper left corner of the page. Here is the code snippet I use, involving the execute_script method: de ...

Encountering the error message 'Failed to resolve component' when implementing Vuetify across all Vuetify elements

I am currently learning Vuetify and Vue.js and attempting to create a simple navbar. However, when I try to run the app using npm, I encounter an error message 'failed to resolve component' in the console and the page remains static. This is my ...

Why isn't jQuery toggle working to toggle, and how can I fix my background

Hello everyone, I am new and just created this page. Unfortunately, I'm facing two issues - I don't want my background to repeat and my jQuery toggle isn't working :( I have included a snippet of my code below. Can someone please guide me o ...

Having trouble with Vue component not showing updated data after axios POST request issue

Hi there, I'm facing an issue and could really use some guidance from a skilled Javascript Wizard. Here's the problem: I have a Laravel collection that I'm passing to a Vue component. Within the component, I am looping through the collecti ...

Ways to retrieve the child component prop using the parent component prop

After creating a component for form submission, I added another component for file uploads within it as shown below: <booksmandala-originals-form :action="'{{ url('admin/booksmandala-originals') }}'" ...

Ensuring the sort icon is constantly displayed in MudDataGrid

Is there a way to keep the sort icon visible at all times in mudgrid without any default sorting using mudblazor? I have implemented the advanced data grid from the following link:- I have attempted using sortable=true on both the column and datagrid but ...

Creating a centered vertical border in Tailwind between two divs can be achieved by following these steps

Hey there, I'm working on creating a timeline and I'd like to have a line intersecting each year similar to this example. My tech stack includes tailwind CSS and next.js. Although I've written some code, I can't seem to get the line ce ...

Is there a way to modify node attributes in the tick function of a d3 force-directed graph?

When working with a force directed graph, I am tasked with creating either circle or square nodes based on the group they belong to. The node creation process involves: const node = svg .append('g') .attr('stroke', &apo ...

Sizing a full screen background image with CSS

Recently delving into the world of HTML and CSS, I've grasped a few fundamental concepts. Seeking assistance from those more experienced to tackle this perplexing issue. I am currently working on a webpage that calls for a full-screen background imag ...

Query Selector(jQuery selector) is a powerful tool for

Here is the HTML Table structure: <table class="display" style="width: 1000px;" id="failoverServers"> <thead> <tr> <th class="row_selector_head"> <input type='checkbox' class='select_all_ch ...

What is the reason for object destructuring not functioning properly in styles?

Why is it that the HTMLelement is considered an object, while the style is also an object, yet this code fails to work as expected? When I remove destructuring, everything functions properly, so I am curious to understand the underlying reason behind thi ...