Change delimiters in Vue?

Question

EDIT: I have to change delimiters due to the server side template engine...I'm sure that's obvious but just to be clear.

I have the following example I pasted into my app...it renders but the delimiters don't seem to work as the placeholders are not replaced...what am I missing?

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>

    const tweets = [
        {
            id: 1,
            name: 'James',
            handle: '@jokerjames',
            img: 'https://semantic-ui.com/images/avatar2/large/matthew.png',
            tweet: "If you don't succeed, dust yourself off and try again.",
            likes: 10,
        },
        {
            id: 2,
            name: 'Fatima',
            handle: '@fantasticfatima',
            img: 'https://semantic-ui.com/images/avatar2/large/molly.png',
            tweet: 'Better late than never but never late is better.',
            likes: 12,
        },
        {
            id: 3,
            name: 'Xin',
            handle: '@xeroxin',
            img: 'https://semantic-ui.com/images/avatar2/large/elyse.png',
            tweet: 'Beauty in the struggle, ugliness in the success.',
            likes: 18,
        }
    ];

    Vue.component('activity-list', {
        template: `
            <div class="tweet">
              <div class="box">
                <article class="media">
                  <div class="media-left">
                    <figure class="image is-64x64">
                      <img :src="tweet.img" alt="Image">
                    </figure>
                  </div>
                  <div class="media-content">
                    <div class="content">
                      <p>
                        <strong><%tweet.name%></strong> <small><%tweet.handle%></small>
                        <br>
                        <%tweet.tweet%>
                      </p>
                    </div>
                      <div class="level-left">
                        <a class="level-item">
                          <span class="icon is-small"><i class="fas fa-heart"></i></span>
                          <span class="likes"><%tweet.likes%></span>
                        </a>
                      </div>
                  </div>
                </article>
              </div>
            </div>
         `,
        props: {
            tweet: Object
        }
    });

    const app = new Vue({
        el: "#activity-stream",
        data: {
            tweets
        },
        delimiters: ['<%', '%>']
    });

</script>

Answer 1

delimiters option is not global but component-level option so you need to apply it on component level, not at root instance level..

Answer 2

You need to set the delimiter inside the component as it works for component level. Here is the working snippet.

const tweets = [{
    id: 1,
    name: 'James',
    handle: '@jokerjames',
    img: 'https://semantic-ui.com/images/avatar2/large/matthew.png',
    tweet: "If you don't succeed, dust yourself off and try again.",
    likes: 10,
  },
  {
    id: 2,
    name: 'Fatima',
    handle: '@fantasticfatima',
    img: 'https://semantic-ui.com/images/avatar2/large/molly.png',
    tweet: 'Better late than never but never late is better.',
    likes: 12,
  },
  {
    id: 3,
    name: 'Xin',
    handle: '@xeroxin',
    img: 'https://semantic-ui.com/images/avatar2/large/elyse.png',
    tweet: 'Beauty in the struggle, ugliness in the success.',
    likes: 18,
  }
];

Vue.component('activity-list', {
  delimiters: ['<%', '%>'],
  template: `
            <div class="tweet">
              <div class="box">
                <article class="media">
                  <div class="media-left">
                    <figure class="image is-64x64">
                      <img :src="tweet.img" alt="Image">
                    </figure>
                  </div>
                  <div class="media-content">
                    <div class="content">
                      <p>
                        <strong><%tweet.name%></strong> <small><%tweet.handle%></small>
                        <br>
                        <%tweet.tweet%>
                      </p>
                    </div>
                      <div class="level-left">
                        <a class="level-item">
                          <span class="icon is-small"><i class="fas fa-heart"></i></span>
                          <span class="likes"><%tweet.likes%></span>
                        </a>
                      </div>
                  </div>
                </article>
              </div>
            </div>
         `,
  props: ['tweet'],
});

const app = new Vue({
  el: "#activity-stream",
  data: {
    tweets
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id='activity-stream'>
  <activity-list v-for='tweet in tweets' :key='tweet.id' :tweet='tweet' />
</div>