How to preserve whitespace in Vue 3?

[antoniandre]

Version

4.5.6

Environment info

System:
    OS: macOS Mojave 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz
  Binaries:
    Node: 14.4.0 - ~/.nvm/versions/node/v14.4.0/bin/node
    Yarn: 1.19.2 - /usr/local/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v14.4.0/bin/npm
  Browsers:
    Chrome: 85.0.4183.121
    Edge: Not Found
    Firefox: 80.0.1
    Safari: 13.0.5
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-helper-vue-transform-on:  1.0.0-rc.2 
    @vue/babel-plugin-jsx:  1.0.0-rc.3 
    @vue/babel-plugin-transform-vue-jsx:  1.1.2 
    @vue/babel-preset-app:  4.5.6 
    @vue/babel-preset-jsx:  1.1.2 
    @vue/babel-sugar-functional-vue:  1.1.2 
    @vue/babel-sugar-inject-h:  1.1.2 
    @vue/babel-sugar-v-model:  1.1.2 
    @vue/babel-sugar-v-on:  1.1.2 
    @vue/cli-overlay:  4.5.6 
    @vue/cli-plugin-babel: ^4.5.6 => 4.5.6 
    @vue/cli-plugin-eslint: ^4.5.6 => 4.5.6 
    @vue/cli-plugin-router: ^4.5.6 => 4.5.6 
    @vue/cli-plugin-vuex:  4.5.6 
    @vue/cli-service: ^4.5.6 => 4.5.6 
    @vue/cli-shared-utils:  4.5.6 
    @vue/compiler-core:  3.0.0 
    @vue/compiler-dom:  3.0.0 
    @vue/compiler-sfc: ^3.0.0 => 3.0.0 
    @vue/compiler-ssr:  3.0.0 
    @vue/component-compiler-utils:  3.2.0 
    @vue/eslint-config-standard: ^5.1.2 => 5.1.2 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/reactivity:  3.0.0 
    @vue/runtime-core:  3.0.0 
    @vue/runtime-dom:  3.0.0 
    @vue/shared:  3.0.0 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^7.0.0-alpha.0 => 7.0.0-beta.4 
    vue: ^3.0.0 => 3.0.0 
    vue-cli-plugin-vuetify: ^2.0.7 => 2.0.7 
    vue-eslint-parser:  7.1.0 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.9.3 (16.0.0-beta.8)
    vue-style-loader:  4.1.2 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: 4.5.6

Steps to reproduce

• Install Vue 3
• try to preserve the whitespaces like in Vue 2.x by adding this in Vue.config.js

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

What is expected?

The whitespaces would be preserved.

What is actually happening?

on npm run serve, Vue CLI 4.5.6 throws an error:
TypeError: Cannot set property 'whitespace' of undefined

There is a suggestion to install vue-template compiler to handle this, but when installing, as the latest version is 2.6.12 it throws another error saying there's a version mismatch with Vue 3.

---

Is there a way to preserve whitespaces in Vue 3?

Quick global feedback: thank you for Vue, it's awesome. And Vue 3 is solving a lot of issues I've been facing previously. Like multiple root nodes!
Great work, keep it up!

[antoniandre]

I am adding more details:

Adding this snippet to vue.config.js:

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

In Vue 2.x, logs:

compilerOptions: { whitespace: 'condense' },
cacheDirectory: '/Users/[...]/node_modules/.cache/vue-loader',
cacheIdentifier: '[...]'

In Vue 3, logs:

cacheDirectory: '/Users/[...]/node_modules/.cache/vue-loader',
cacheIdentifier: '[...]'

There is no compilerOptions at all.
Thanks for the help.

[haoqunjiang]

Not implemented yet, see vuejs/core#1600