Vue Tip: Change the Interpolation Delimiter

Template

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

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 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.