Vue Tip: Change the Interpolation Delimiter

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

1<script setup>
2const title = 'Hello'
3</script>
4
5<template>
6  <h1>{{ title }}</h1>
7</template>

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

index.html

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <title>Home</title>
5    <meta charset="UTF-8" />
6    <meta name="viewport" content="width=device-width" />
7
8    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
9    <script type="module">
10      const { createApp } = Vue
11
12      const app = createApp({
13        data() {
14          return {
15            message: 'Hello Vue!',
16          }
17        },
18      })
19
20      // Delimiters changed to ES6 template string style
21      app.config.compilerOptions.delimiters = ['${', '}']
22
23      app.mount('#app')
24    </script>
25  </head>
26
27  <body>
28    <main>
29      <div id="app">${ message }</div>
30    </main>
31  </body>
32</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 X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

Vue Tip: Use Vue Without Build Step

When using Vue from a CDN, no "build step" is involved. This makes the setup much more straightforward and is suitable for enhancing static HTML or integrating with a backend framework.

Vue Tip: Use Provide & Inject to Avoid Prop Drilling

Props are the standard way to pass data from the parent to a child component. Sometimes, we want to share data from a parent component to all its children components without using a store. Provide / Inject solves this problem and avoids prop drilling.