How to preserve whitespace in Vue 3 and vue-cli (in slots) after PR #1600 is merged?

[antoniandre]

Version

3.0.11

Reproduction link

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8cHJlPlxuICAgIExpbmUgMVxuICAgIExpbmUgMlxuICA8L3ByZT5cbiAgICBcbiAgPHByZWNvZGU+XG4gICAgTGluZSAxIFxuICAgIExpbmUgMiBcbiAgPC9wcmVjb2RlPlxuPC90ZW1wbGF0ZT5cblxuPHNjcmlwdD5cbmltcG9ydCBQcmVjb2RlIGZyb20gXCIuL3ByZWNvZGUudnVlXCJcblxuZXhwb3J0IGRlZmF1bHQge1xuICBuYW1lOiBcIkFwcFwiLFxuICBjb21wb25lbnRzOiB7IFByZWNvZGUgfVxufVxuPC9zY3JpcHQ+IiwicHJlY29kZS52dWUiOiI8dGVtcGxhdGU+XG4gIDxwcmU+XG4gICAgPHNsb3Q+PC9zbG90PlxuICA8L3ByZT5cbjwvdGVtcGxhdGU+XG5cbjxzY3JpcHQ+XG5leHBvcnQgZGVmYXVsdCB7XG4gIFxufVxuPC9zY3JpcHQ+XG4iLCJ2dWUuY29uZmlnLmpzIjoiZXhwb3J0IGRlZmF1bHQge1xuICBwdWJsaWNQYXRoOiAndHJ1YycsXG4gIGNoYWluV2VicGFjazogKGNvbmZpZykgPT4ge1xuICAgIGNvbmZpZy5tb2R1bGVcbiAgICAgIC5ydWxlKFwidnVlXCIpXG4gICAgICAudXNlKFwidnVlLWxvYWRlclwiKVxuICAgICAgLmxvYWRlcihcInZ1ZS1sb2FkZXJcIilcbiAgICAgIC50YXAob3B0aW9ucyA9PiB7XG4gICAgICAgIC8vIGh0dHBzOi8vZ2l0aHViLmNvbS92dWVqcy92dWUtbmV4dC9wdWxsLzE2MDBcbiAgICAgICAgb3B0aW9ucy5jb21waWxlck9wdGlvbnMud2hpdGVzcGFjZSA9IFwicHJlc2VydmVcIlxuICAgICAgICByZXR1cm4gb3B0aW9uc1xuICAgICAgfSlcbiAgfVxufVxuIn0=

Steps to reproduce

• in the codesandbox https://codesandbox.io/s/interesting-cookies-dy7wn?file=/src/App.vue, open the app file and see that the new line is preserved in pre
• but not preserved through a slot which renders inside a pre.

the slot does not keep the whitespaces entered by the user.

What is expected?

The whitespaces would be preserved.

What is actually happening?

The whitespaces are not preserved.

---

This is observable at

• https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8cHJlPlxuICAgIExpbmUgMVxuICAgIExpbmUgMlxuICA8L3ByZT5cbiAgICBcbiAgPHByZWNvZGU+XG4gICAgTGluZSAxIFxuICAgIExpbmUgMiBcbiAgPC9wcmVjb2RlPlxuPC90ZW1wbGF0ZT5cblxuPHNjcmlwdD5cbmltcG9ydCBQcmVjb2RlIGZyb20gXCIuL3ByZWNvZGUudnVlXCJcblxuZXhwb3J0IGRlZmF1bHQge1xuICBuYW1lOiBcIkFwcFwiLFxuICBjb21wb25lbnRzOiB7IFByZWNvZGUgfVxufVxuPC9zY3JpcHQ+IiwicHJlY29kZS52dWUiOiI8dGVtcGxhdGU+XG4gIDxwcmU+XG4gICAgPHNsb3Q+PC9zbG90PlxuICA8L3ByZT5cbjwvdGVtcGxhdGU+XG5cbjxzY3JpcHQ+XG5leHBvcnQgZGVmYXVsdCB7XG4gIFxufVxuPC9zY3JpcHQ+XG4iLCJ2dWUuY29uZmlnLmpzIjoiZXhwb3J0IGRlZmF1bHQge1xuICBwdWJsaWNQYXRoOiAndHJ1YycsXG4gIGNoYWluV2VicGFjazogKGNvbmZpZykgPT4ge1xuICAgIGNvbmZpZy5tb2R1bGVcbiAgICAgIC5ydWxlKFwidnVlXCIpXG4gICAgICAudXNlKFwidnVlLWxvYWRlclwiKVxuICAgICAgLmxvYWRlcihcInZ1ZS1sb2FkZXJcIilcbiAgICAgIC50YXAob3B0aW9ucyA9PiB7XG4gICAgICAgIC8vIGh0dHBzOi8vZ2l0aHViLmNvbS92dWVqcy92dWUtbmV4dC9wdWxsLzE2MDBcbiAgICAgICAgb3B0aW9ucy5jb21waWxlck9wdGlvbnMud2hpdGVzcGFjZSA9IFwicHJlc2VydmVcIlxuICAgICAgICByZXR1cm4gb3B0aW9uc1xuICAgICAgfSlcbiAgfVxufVxuIn0=
• and at https://codesandbox.io/s/interesting-cookies-dy7wn?file=/src/App.vue

Related issues:

vuejs/vue-cli#5909
vitejs/vite#3531
#1600 (comment)

If there is anything I am missing, it would be very helpful to have a documentation about it for other users facing the same issue.

[antoniandre]

In Vite it works in version vue@3.1.0-beta.6, with explicit load of "@vue/compiler-sfc": "3.1.0-beta.6" with this config:

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          whitespace: 'preserve'
        }
      }
    })
  ]

🙏 🚀

But it doesn't in vue-cli with this config:

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        // https://github.com/vuejs/vue-next/pull/1600
        options.compilerOptions.whitespace = 'preserve'
        return options
      })
  }
}

[HcySunYang]

If it works correctly in vite, then it should not be a problem with Vue, please make sure you install the correct dependencies when using with vue-cli.

[aztack]

In Vite it works in version vue@3.1.0-beta.6, with explicit load of "@vue/compiler-sfc": "3.1.0-beta.6" with this config:

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          whitespace: 'preserve'
        }
      }
    })
  ]

🙏 🚀

But it doesn't in vue-cli with this config:

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        // https://github.com/vuejs/vue-next/pull/1600
        options.compilerOptions.whitespace = 'preserve'
        return options
      })
  }
}

I changed vue.config.js exactly like yours. But options.compilerOptions' is undefined. I add compilerOptionsto theoptions` manually. But I got this error:

 ERROR  Failed to compile with 1 error 

 error  in ./src/App.vue

Syntax Error: TypeError: Cannot read property 'parseComponent' of undefined


 @ ./src/main.ts 7:0-28 10:13-16
 @ multi (webpack)-dev-server/client?http://10.76.44.154:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

The project is created with vue create command. Following is package.json of the project:

{
  "name": "vue3-demo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-class-component": "^8.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "typescript": "~4.1.5"
  }
}

@vue/cli 4.5.13