[FIXED] Can SimpleTemplate ignore variables in a template file?

Issue

We're trying to build a simple web application based on bottle and using the SimpleTemplate module to template files. The site is built using Vue.js.

The bottle templates syntax is {{ }}, which Vue.js also uses for templates. So we will get KeyError exceptions for any Vue.js templates when bottle tries to run its template engine over our templates.

I've read the bottle SimpleTemplate documentation, and other people talking about using SimpleTemplate, but this hasn't answered my question.

HTML including Vue.js template variable:

<footer>
<p>© Copyright {{ thisYear }}</p>
</footer>

JavaScript:

    <!-- ROUTING -->
    <script>
    // Create and mount the root instance.
    const app = new Vue({
      router,
      data: {
        parentBaseUrl: '${service_url}/template',
        flash: '',
        open_menu: [],
        thisYear: new Date().getFullYear()
      }

The above are excepts of the HTML and JavaScript to avoid dumping the whole files.

Is there some way I can configure SimpleTemplate (or another bottle template library) to ignore template variables?

I've tried Googling if I can somehow escape the Vue.js template variables so SimpleTemplate doesn't replace them, but I haven't been able to find anything.

Solution

If there is no obvious method to change the delimiters for SimpleTemplate / bottle, you should be able to change the template delimiters for Vue.js

Similar question for reference: Conflict on Template of Twig and Vue.js

As explained in the answer for that question, you can change the template delimiters for Vue.js (version 2.0+) as follows:

new Vue({
  delimiters: ['${', '}']
})

API docs reference: https://v2.vuejs.org/v2/api/#delimiters

Answered By - Mani