set custom delimiters in Vue.js 3

user_6668694 0
Viewed 3228

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?

vuejs3 vue.js typescript string-interpolation
2 Answers

Needs to be inside the createApp

Example:

var app = Vue.createApp({
  data() {return {message: 'Ciao'}},
  compilerOptions: {
    delimiters: ["${", "}$"]
  }
}).mount('#app');
<script src="https://unpkg.com/vue@3.0.1/dist/vue.global.prod.js"></script>
<div id="app"><h1>Message: ${message}$</h1></div>

user_1975460

If you look at the console in your browser's dev tools you may see something like:

""" vue.runtime.esm-browser.js:1486 [Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Use "vue.esm-browser.js" instead. at """

import { createApp } from "vue";

points to 'vue/dist/vue.runtime.esm-browser' which doesn't support the delimiters option because it requires compilation not available with this build.

Now replace the import line with

import { createApp } from "vue/dist/vue.esm-browser";

or

import { createApp } from "vue/dist/vue.esm-bundler";

It should work just fine.

user_103725800
Related