Why does Vue ignore css rule?

user_11315057 0
Viewed 78

I have the following html code

<head>
    <script src="https://unpkg.com/vue@3"></script>
    <script defer src="script.js"></script>
</head>
<body>
    <div id="main">        
        <div>
            1. This is 1st line

            2. This is 2nd line

            3. This is 3rd line
        </div>
        <br>
        <div style="white-space: pre-line;">
            1. This is 1st line

            2. This is 2nd line

            3. This is 3rd line
        </div>
    </div>
</body>

Which will result in

1. This is 1st line 2. This is 2nd line 3. This is 3rd line


1. This is 1st line

2. This is 2nd line

3. This is 3rd line

However, when I mount a Vue instance onto my main div, this is the result I get

1. This is 1st line 2. This is 2nd line 3. This is 3rd line

1. This is 1st line 2. This is 2nd line 3. This is 3rd line

The code for Vue instance in the script.js file is as follow

const test = Vue.createApp({

}).mount("#main")

Why did my white-space style get ignored completely?

vuejs3 vue.js css html javascript
1 Answers

The Vue compiler collapses whitespace by default, so the newlines in your original code gets collapsed (extraneous whitespace is removed) to produce more efficient compiled output.

Option 1: App config to disable whitespace-condense

You can disable this globally in your example with app.config.compilerOptions.whitespace set to 'preserve':

const app = Vue.createApp({})
app.config.compilerOptions.whitespace = 'preserve'
app.mount("#main")

demo 1

Or disable it per component:

const app = Vue.createApp({
  compilerOptions: {
    whitespace: 'preserve'
  }
})
app.mount("#main")

demo 2

Note: app.config.compilerOptions.whitespace is only respected when using the full build. Otherwise, you'd have to set the option through build flags.

Option 2: Build flag to disable whitespace-condense

You can configure @vue/compiler-sfc to disable whitespace-condense in this Vite config:

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

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

demo 3

Option 3: Use <br> where new-line is needed

Alternatively, you could explicitly add <br> tags where needed, which would keep the originally intended optimization while implementing the desired spacing:

<div>
  1. This is 1st line<br>

  2. This is 2nd line<br>

  3. This is 3rd line<br>
</div>
user_62771510
Related