Let template syntax use single curly braces instead of double

[bomzj]

What problem does this feature solve?

Let's improve template syntax by using single curly braces like in Svelte/React instead of the "Mustache" syntax (double curly braces).

Current syntax

<h1>Hello {{ username }} !</h1>

What does the proposed API look like?

New syntax

<h1>Hello { username } !</h1>

Much cleaner, less chars, better DX!

[LinusBorg]

You can open an RFC about this for when we might do Vue 4. For Vue 3, this would obviously be a gigantic breaking change that we will not consider.

[edison1105]

https://vuejs.org/api/options-rendering.html#render
use delimiters option to config.

[bomzj]

https://vuejs.org/api/options-rendering.html#render use delimiters option to config.

Thanks @edison1105 !

Just for someone who is looking for such a snippet:

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

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // Change default Mustache syntax to single braces like in Svelte/React
          delimiters: ['{', '}']
        }
      }
    })
  ]
}