How to preserve whitespace in Vue 3? #5909
Description
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!