Get rid of the double curly braces

You can configure the Vue compiler to use different delimiters instead of the default {{ and }}.

<template>
  <span>|| isBlue ? 'Blue!' : 'Not blue' ||</span>
</template>

This allows you to avoid any conflicts with server-side frameworks:

<template>
  <span>${ isBlue ? 'Blue!' : 'Not blue' }</span>
</template>

This can be done through the compiler options. Depending on how your project is set up, these options are passed to either vue-loader, vite, or the in-browser template compiler.

Learn more from the docs.