When bootstrap buttons are displayed inside a Vue component, there should be no spacing between them

Is this issue specific to the vue-loader or is it more related to webpack builds in general?

Consider a basic HTML page with Bootstrap 4 loaded and two buttons added:

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary>Secondary</button>

Despite having no margin set, there is a small gap between the buttons upon rendering:

https://i.sstatic.net/cW02T.png

However, when the same buttons are added to a Vue application, the gap between them disappears. To recreate this, simply create a project using vue-cli with default settings, install the bootstrap npm package, import it, and add the buttons to the root component.

This issue did not occur when using a webpack template instead of vue-cli, suggesting that the default webpack configuration set by vue-cli may be causing this inconsistency.

Are there any overrides that can be made to the webpack config to restore the previous behavior? This would eliminate the need to add margins to buttons placed next to each other.

If anyone can provide insight into why the buttons typically have spacing between them despite no margin being set, it would greatly assist in finding a solution.

cssvue.jswebpackbootstrap-4

Answer №1

After reading Terry's insightful comment, it dawned on me that the issue at hand was related to whitespace.

To resolve this, I had to modify the preserveWhitespace compiler option in the vue-loader configuration, as it defaults to false. Below is the snippet to be added to the vue.config.js:

chainWebpack: config => {
    config.module
        .rule('vue')
        .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
            options.compilerOptions.preserveWhitespace = true
            return options
        })
}

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

Customizing Material UI Select for background and focus colors

I am looking to customize the appearance of the select component by changing the background color to "grey", as well as adjusting the label and border colors from blue to a different color when clicking on the select box. Can anyone assist me with this? B ...

javascriptcssreactjstypescriptmaterial-ui

Encountering an issue with the v-carousel component from Vuetify: receiving a 'Cannot read property 't' of undefined' error message

Currently, I am trying to create an image carousel using Laravel along with Vue/Vuetify. The issue lies in the fact that the Vuetify v-carousel and v-carousel-item components are not rendering properly due to the error mentioned in the title. I have alrea ...

javascriptlaravelvue.jsvuetify.js

Showing Vue-Dropzone response in browser: A step-by-step guide

How can I display the response from vue-dropzone to my users in a notification? The file uploads successfully, but I want to notify the user with an alert box or message once it is uploaded. <template> <div class="container"> < ...

laravelvue.jsvue-dropzone

Personalize or delete the spacing within an ion row

Currently, I am delving into the world of Ionic app development. Although I have grasped the concept of the Grid layout, I find myself hitting a roadblock when it comes to adjusting or removing spaces between rows 2 and 3 in my app interface, as illustrate ...

htmlcssangularionic-frameworkionic2

What is the best way to transition all elements down while sliding a header up or down?

Is it possible to bring down the entire page when hovering over a header element using CSS, ensuring that the header overlaps nothing else on the page? If so, how can this be achieved? See an example of the header in action here: Thank you! ...

javascriptjqueryhtmlcss

Using TestCafe selectors to target a classname that has multiple matching nodes

I need help finding a TestCafe selector that can target an element with the same class name that appears multiple times in my HTML code. Here's what I have tried so far: https://i.sstatic.net/ZS691.png Despite trying various selectors, I have been u ...

csstestingcss-selectorsautomated-teststestcafe

Overridden CSS rules

Having a slight CSS dilemma. Within my webpage's html, I have the following structure: <div class='box-div'> <div>Entry 1</div> <div class='hide'>Entry 2</div> </div> Here is my associated ...

htmlcsscss-selectors

CSS - tackling the issue of menu items overlapping

My menu has two items, and when the user clicks on each item, a sub-menu is displayed. The issue is that both menus are displaying at the same spot - under the first item. I've tried tweaking it for a while but can't seem to fix the problem. Ad ...

javascriptjquerycssmenu

The jQuery remove function will only take effect on the second click following an AJAX request

I'm facing an issue with my jQuery code where two divs contain lists of links, triggering AJAX calls to append JSON data to a separate div. Upon clicking a link, the corresponding link div should hide. There's also a third div with the class "pan ...

javascriptjqueryhtmlcssajax

Using HTML and CSS, we can achieve a fixed position using the `position: sticky`

On my website, I have elements that utilize transformations. One issue I've encountered is that these transformations end up resizing the viewport. Normally, I would address this by setting overflow-x: hidden for both html and body, but doing so disru ...

htmlcsscss-transformssticky

What sets $vm.user apart from $vm.$data.user in Vuejs?

When you need to retrieve component data, there are two ways to do so: $vm.user and $vm.$data.user. Both methods achieve the same result in terms of setting and retrieving data. However, the question arises as to why there are two separate ways to access ...

javascriptperformancevue.jsvue-component

What is the best way to allow text input in a table cell to exceed the confines of the table when it is clicked on

I am currently working on a table that has three columns: a label, a dropdown selector, and an input field. The challenge I'm facing is that the input field needs to accommodate multiple lines of content, specifically in JSON format. However, I want ...

htmlcsstwitter-bootstrap

405 (Method Not Allowed) - Incompatibility between Laravel and Vue.Js

Hello everyone, I need some assistance in setting up a notification system that allows users to like the notifications. Currently, I am using Laravel 7 for the backend and Vue.js for the frontend. The code functions properly on my local machine, but once ...

laravelvue.js

Generating small image previews in JavaScript without distorting proportions

I am currently working on a client-side Drag and Drop file upload script as a bookmarklet. To prepare for the upload process, I am utilizing the File API to convert the images into base64 format and showcase them as thumbnails. These are examples of how m ...

javascriptcsshtmlbase64bookmarklet

A step-by-step guide on building a parent layout in VueJS

I have a component structure and code that includes two layouts: UserLayout and OrganizationLayout. The OrganizationLayout is similar to UserLayout, with the only difference being a navigation component in the header. Both layouts require user profile dat ...

templatesvue.jslayoutarchitecture

Is it possible to customize the behavior of ESLint to automatically run when saving a file after installation with the "on commit" option?

Perhaps my vision is failing me, as I cannot seem to find any information about this issue on or https://eslint.org/. Should I consider the drastic step of uninstalling and reinstalling it? ...

vue.jseslint

The Issue with Non-Functional Links in Nivo Slider

Currently facing an issue with the Nivo Slider as it no longer links to any of the photos in the slider. Initially, I had 14 pictures linked to a post with a full embedded gallery inside. The problem arose when using a "fixed" size for the gallery, which d ...

cssnivo-slider

There is a space above the second div when using display inline-block

I'm encountering an issue with the display inline block property. I have two divs that I want to position next to each other, but there's a strange gap above the second div (#store_header_text) that I can't seem to explain. I've tried r ...

htmlcss

The Vue.js route is not aligning with its defined path, causing a mismatch

Attempting to develop a Vue SPA app, but encountering an issue with the routes not matching what was defined in the router. Despite all configurations seemingly correct, there is confusion as to why this discrepancy exists. What element might be overlooked ...

javascriptvue.jsvue-router

On mobile devices, a height of 100vh exceeds the visible screen area

Struggling to cover the entire visible part of the browser window using 100vh due to issues on certain devices and mobile browsers. For example, in Safari, the URL section hides a top part, and similarly on some Android devices using Chrome. https://i.stac ...

cssmobileresponsive-designfullscreen