Facility to change template mustaches in Vue3, delimiters no longer works

[qgates]

What problem does this feature solve?

Vue2 had the option delimiters to change mustache symbols for templating, but this option appears to have changed in Vue3. The only mention I can find is in RFC draft #35. This feature is needed to integrate with large server-side codebases where it is impractical to change mustaches on existing SS templates. It has been removed in the Vue3 guide and isn't mentioned in the migration guide.

What does the proposed API look like?

as Vue2 or alternative

[advdv]

I'm unable to get this to work:

        console.log(Vue.version) //returns "3.0.0-rc.5"

        var app = Vue.createApp({
          data() {
            return {counter: 0}
          }
        })

        app.config.delimiters = ['{%', '%}']
        app.mount("#app")

Am I doing anything wrong?

[skirtles-code]

@advanderveer I believe you need to put the setting on the component rather than the application:

Vue.createApp({
  delimiters: ['{%', '%}']
})

[guilhermemart]

I have the same problem.
Doing:
Vue.createApp({
delimiters: ['{%', '%}']
...
})
we lose all the functionalities of Vue.createApp(App)
How can we still rendering App but with delimiters changed?

[posva]

See https://v3.vuejs.org/api/options-misc.html#delimiters for updated instructions

[guilhermemart]

I have the same problem.
Doing:
Vue.createApp({
delimiters: ['{%', '%}']
...
})
we lose all the functionalities of Vue.createApp(App)
How can we still rendering App but with delimiters changed? Or at least do something like:
Vue.createApp({
delimiters: ['{%', '%}']
...
data(){...}
components:{ component_1, component_2}
})

[philibe]

@guilhermemart

TLDR: It seems since Vue 3.1 old delimiter is deprecated and I was not able to have this option inlined in the source. My goal is to use Vue 3 with Flask. I've set up options.compilerOptions in vue.config.js.

I copy my answer also on S.O. : How to change delimiters in Vue.js?

Got some good rowing since 2 days. :))

I've read below again and again
https://v3.vuejs.org/api/application-config.html#compileroptions

Important This config option is only respected when using the full build (..) For vue-loader: pass via the compilerOptions loader option (opens new window). Also see how to configure it in vue-cli (opens new window).

After that I read on Stackoverflow

• How do I fix a "Vue packages version mismatch"..,
• How to set vue-template-compiler options and where?

Before I (re)installed below those Vue 3 package only if I've done mistake by copy paste from stackoverflow. I assume they are yet installed.

npm i --save vue@next (I assume Vue 3 is yet installed (vue@next), it's only if I copy paste vue@latest by mistake) 
npm install -g @vue/cli

And I installed for Vue 3:

npm i --save vue-loader@next
npm i --save vue-template-compiler@latest 
nom i --save vue-server-renderer@latest

I created vue.config.js below

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions = {
          delimiters: ['${', '}']
        };
        return options;
      });
  }
}

With this App.vue from the vue create with my modifications :

<template>
   <img alt="Vue logo" src="./assets/logo.png">
   <div id="list-rendering" class="demo">
      <ol>
         <li v-for="todo in todos" v-bind:key="todo" >
            new delimiter for flask:  ${todo.text} <br>
            initial vue delimiter:  {{todo.text}} 
         </li>
      </ol>
   </div>
</template>
<script>
   export default {
     name: 'App',
   
   data() {
       return {
         todos: [
           { text: 'Learn JavaScript' },
           { text: 'Learn Vue' },
           { text: 'Build something awesome' }
         ]
       } 
     }
   }
</script>
<style>
   #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
   margin-top: 60px;
   }
</style>

[guilhermemart]

Worked perfectly, thanks a lot

[str1ve21]

Awesome, thank you so much, works good with vue 3 cli

[gregg-cbs]

I am not using CLI. I am using Vue standalone:
Neither of the below options work.

<script src="https://unpkg.com/vue@3.1.1/dist/vue.global.prod.js"></script>

<script>
  Vue.createApp({
    delimiters: ['[[', ']]'],
    compilerOptions: {
      delimiters:  ['[[', ']]'],
      comments: true
    },

    name: "upload",

    data: () => ({
      stock: {},
    }),
  }).mount('#uploader')
    
</script>

[jiuneypachevitch]

Hi @gregg-cbs!
I using Vue 3.2.32 standalone and works fine with:

<script src="https://unpkg.com/vue@3.2.32/dist/vue.global.prod.js"></script>
<script>
  const app = Vue.createApp({
    name: "upload",
    data: () => ({
      stock: {},
    }),
  })
// set delimiters here
app.config.compilerOptions.delimiters = [ '${', '}' ]
const mountedApp = app.mount('#uploader')

</script>

[nabrown]

Hi @gregg-cbs! I using Vue 3.2.32 standalone and works fine with:

<script src="https://unpkg.com/vue@3.2.32/dist/vue.global.prod.js"></script>
<script>
  const app = Vue.createApp({
    name: "upload",
    data: () => ({
      stock: {},
    }),
  })
// set delimiters here
app.config.compilerOptions.delimiters = [ '${', '}' ]
const mountedApp = app.mount('#uploader')

</script>

Thanks @jiuneypachevitch I had assumed that setting it on compilerOptions meant the feature required a build step. Not so! Works like a charm using standalone Vue in an html page with no build step.