Javascript is required
ยท
1 min read

Vue Tip: Change the Interpolation Delimiter

Vue Tip: 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
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:

I will never share any of your personal data. You can unsubscribe at any time.