Why does Vue ignore css rule?

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>