Javascript is required
Mokkapps Logo

Vue Tip: Change the Interpolation Delimiter

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
Nov 17, 2022
1 min read
|
14 views
Template
Change the Interpolation Delimiter Image

It is possible to adjust the delimiters used for text interpolation within the template.

This is typically used to avoid conflicting with server-side frameworks that also use mustache syntax.

The default delimiters are the double curly braces:

HelloWorld.vue
<script setup>const title = 'Hello'</script><template>  <h1>{{ title }}</h1></template>

We can change the delimiter in the config object of the application instance:

index.html
<!DOCTYPE html><html lang="en">  <head>    <title>Home</title>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width" />    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>    <script type="module">      const { createApp } = Vue      const app = createApp({        data() {          return {            message: 'Hello Vue!',          }        },      })      // Delimiters changed to ES6 template string style      app.config.compilerOptions.delimiters = ['${', '}']      app.mount('#app')    </script>  </head>  <body>    <main>      <div id="app">${ message }</div>    </main>  </body></html>
Important

The compilerOptions config option is only respected when using the full build (i.e. the standalone vue.js that can compile templates in the browser).

If you are using the runtime-only build with a build setup, checkout the official docs.

Try it yourself:


If you liked this Vue tip, follow me on Twitter to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue newsletter.