How To Change Vue-cli's Delimiters?

I installed vue-cli (webpack-simple) src/main.js: import Vue from 'vue' import App from './App.vue' new Vue({ delimiters: ['?{', '}'], // here , delimiters set ' ?{ } ' e

Solution 1:

See the response from the Author:

Delimiters can only be changed when using runtime compilation with the full build (vue.js). It does not work in *.vue files (to keep all *.vue files syntax consistent)

Vue 2.5.1 Component custom delimiter not working #5697

---

[2020/07/03]

How to config to use runtime compiler to use custom delimiters

1. Create a vue.config.js file at your project root(the place you store package.json)

2. Add the content as follow:

// vue.config.jsmodule.exports = {
  runtimeCompiler: true
}

3. Delete <template /> at app.vue
4. Modify the <script /> at app.vue as follow:

// app.vue
<script>exportdefault {
    delimiters: ['{', '}'],
    name: 'App',
    template: '<div id="app">{ title }</div>',
    data () {
        return {
            title: 'This is a Title'
        };
    }
};
</script>

5. The document Configuration Reference#runtimeCompiler