·
1 min read
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>
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 BlueSky to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter :