set custom delimiters in Vue.js 3

Question

I am trying to set custom delimiters in Vue.js 3 but it does not seem to work.

The first thing I tried is setting the component parameter delimiters like this:

export default defineComponent({
    delimiters: ["${", "}$"],
    // ...
})

but nothing happens.

Then I tried setting main.ts file like this:

import { createApp } from "vue";
import router from "./router";
import App from "./App.vue";

App.delimiters = ["${", "}$"];

createApp(App)
   .use(router)
   .mount("#app");

Again the string interpolation in the template isn't working.

What am I missing?

Answer 1

Needs to be inside the createApp

Example:

var app = Vue.createApp({
  data() {return {message: 'Ciao'}},
  // for global
  delimiters: ["${", "}$"],
  // for standalone
  compilerOptions: {
    delimiters: ["${", "}$"]
  }
}).mount('#app');

<script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>
<div id="app"><h1>Message: ${message}$</h1></div>