perserveWhitespace: false

[embersdev]

Version

3.0.0-beta.6

Reproduction link

1864cef

Steps to reproduce

1864cef

What is expected?

preserveWhitespace: true

What is actually happening?

preserveWhitespace: false

---

White space is an expected design pattern in HTML. I would expect the default to be true and the few people that want false to have to configure it. This will be a challenge for anyone new to vue/webpack in that they wont understand why their formatting doesn't look normal.

[yyx990803]

This is an intended change. If you don't want it, you can configure it by tapping vue-loader's option in vue.config.js. See docs for more details.

[embersdev]

I have changed it.

My only concern is that i personally consider false as an advanced feature you wouldn't normally want which in turn means any new developers to Vue will stumble on this. This version of the CLI is pretty awesome with the zero config but i would expect the defaults to be what a new/entry/mid-level developer would expect and then people that actually know what this setting is for can change it with a config.

Just an opinion and figured i would express it.

[yyx990803]

That's true, I guess this is a tradeoff since having preserveWhitespace: false does result in smaller bundles and slightly better perf in theory, and that's also something we want to have by default.

Maybe we should expose this as a top level option to make it easier to tweak.

[Justineo]

Maybe we should provide a enum option for this:

whitespace: strip | collapse | preserve

Setting to collapse may give us smaller bundle size while be consistent to HTML's default behavior in most cases (except for those with white-space: pre in style).

[yyx990803]

This would be pending vuejs/vue#7598

[bruceCzK]

In case of someone doesn't know how to change the option back, just put the following code in vue.config.js

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

[viaregio]

@bruceCzK Thank you very much

I have two button elements separated by a space by intention. After upgrading my project to version 3 of the CLI the space is gone.
If preserveWhitespace == false is the new default then it should have not such side effects. No browser I know removes all whitespaces, they collapse multiple whitespaces into one. This should be the default behaviour. This is just my opinion but maybe it is something to consider.

[Justineo]

F.Y.I. to all: We'll have new strategy available in the upcoming v2.6. See vuejs/vue#9208 (comment).

[Alik2015]

Just o add to this have the latest cli and preserveWhitespace = true still does not work my index.html in public folder is well spaced and laid out but when npm run build the index.html in dist folder has whitespace removed.

[zires]

In case of someone doesn't know how to change the option back, just put the following code in vue.config.js

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

Thank u!!! You save my time!!

[andreasvirkus]

For people seeing this with vue-cli 3.*, there's a working solution here: vuejs/vue#10485 (comment)

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
        .use('vue-loader')
          .tap(args => {
            args.compilerOptions.whitespace = 'preserve'
          })
  }
}

[sudoris]

For people seeing this with vue-cli 3.*, there's a working solution here: vuejs/vue#10485 (comment)

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
        .use('vue-loader')
          .tap(args => {
            args.compilerOptions.whitespace = 'preserve'
          })
  }
}

Thanks, this is what works for vue cli 3 and 4 atm. Should put this in the official docs imo.

[antoniandre]

For people seeing this with vue-cli 3.*, there's a working solution here: vuejs/vue#10485 (comment)

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
        .use('vue-loader')
          .tap(args => {
            args.compilerOptions.whitespace = 'preserve'
          })
  }
}

This doesn't seem to work anymore with Vue 3, it throws the error: "TypeError: Cannot set property 'whitespace' of undefined". Any workaround for Vue 3?