CODEWITHSUNDEEP
cssvue.jswebpackbootstrap-4
Connor Bishop
Connor Bishop

Reputation: 981

No space in between bootstrap buttons when they are rendered within a Vue component

Im not sure if this is specific to the vue-loader or something which is more general to webpack builds.

If you have a simple HTML page with bootstrap 4 loaded and add two buttons:

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

They will be rendered with a small gap between them, even though they have no margin:

enter image description here

However if you add the same buttons to a latest version Vue app the buttons have no gap between them. You can easily recreate this by creating a project with the vue-cli using the default settings, installing the bootstrap npm package, importing it and then add the two buttons to the root component.

This didn't happen when I was using a webpack template rather than the vue-cli so my guess that the default webpack config which vue-cli sets is somehow causing this.

Does anyone know of any overrides I can make to the webpack config so that the old behaviour is restored? This will save me having to add margins to all my buttons which are next to another.

Any comments about how exactly the buttons usually end up with a space between, even though there is no margin set, may also help me investigate a solution.

Upvotes: 1

Views: 1322

Answers (1)

Connor Bishop
Connor Bishop

Reputation: 981

Thanks to Terry's comment I realised this is a whitespace issue.

The solution is to override the preserveWhitespace compiler option of the vue-loader, which is set to false by default. This is done by adding the following to vue.config.js:

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

Upvotes: 2

Related Questions