Support custom delimiters

[athewsey]

• I have searched through existing issues

Feature Request

I'm working on a Vue v3 project using custom delimiters to avoid conflicting with a (Shopify Liquid) server-side templating language that relies on handlebars {{ and }} already.

So far, my only configuration for this has been to set the option in vite.config.ts and everything seems to be working pretty much okay:

export default defineConfig({
  ...,
  plugins: [
    vue({
      template: {
        compilerOptions: {
          delimiters: ["${", "}"],
          ...,
        },
      },
    }),
  ],
});

...But I notice the syntax highlighting in my component .vue files doesn't seem to be aware of the setting and couldn't see any mentions in the Vetur guide.

Maybe there's some way to work around this already that I'm missing? Or else would be nice if a configuration could be added.

For what it's worth I'm not particularly tied to the choice of "${", "}", and appreciate there might be some edge cases that make that a particularly tricky case? Like this for example combining a style binding (normal JS ${}) with a Vue template HTML substitution (Vue ${}):

<div
  class="confidence-bar"
  :style="{
    background: 
      `linear-gradient(90deg, rgba(255, 0, 0, 1.0) 0%, rgba(255, 0, 0, 1.0) ${
        confidence * 100
      }%, rgba(255, 0, 0, 0.5) ${
        confidence * 100
      }%, rgba(255, 0, 0, 0.5) 100%)`
    }"
  >
  ${ Math.round(confidence * 1000) / 10 }%
</div>