Missing space between HTML elements

Version

2.5.17

Reproduction link

https://github.com/revolter/website/tree/demo/missing-space-bug

Steps to reproduce

Run the app and navigate to the about page.

What is expected?

A space between the abbr and code tags as in the About.vue file.

What is actually happening?

The mentioned space is missing when rendered in the browser.

[sqal]

Whitespace characters between HTML tags are removed because preserveWhitespace option in vue-loader is set to false by default in vue-cli, here: https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/config/base.js#L87. In order to enable this option you have to modify webpack config using either chainWebpack or configureWebpack in your vue.config.js.

https://cli.vuejs.org/guide/webpack.html#chaining-advanced

The first one is simpler imho, actually here’s what you need to do:

vue.config.js

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

[pmrotule]

Quick tip if you really need a space to be present between particular tags… you can always explicitly insert one using the   HTML entity.

e.g.

<span>lorem</span>&#32;<span>ipsum</span>

You can also explicitly insert one using mustache:

<span>lorem</span>{{ ' ' }}<span>ipsum</span>