Combine Flask and Vue.js

If you want to expose an HTML page using **Flask* and Vue.js (without webpack), you need to set up something to let Vue.js know where it can work.*

Flask uses Jinja a templating language to display information in a webpage. And, like Vue.js, their delimiters are

{{ ... }}

Examples

A Jinja example

<title>{% block title %}{% endblock %}</title>
<ul>
{% for user in users %}
  <li><a href="{{ user.url }}">{{ user.username }}</a></li>
{% endfor %}
</ul>

A Vue.js example

<div id="app">
  {{ message }}
</div>

So, how to make them live together?

Solution

In Vue.js, you can change the delimiter of your components!

var app = new Vue({
    el: '#app',
    delimiters: ['[[', ']]'],
    data: {
      message: 'Hello Vue!'
    }
  })

<div id="app">
  [[ message ]]
</div>

With that, Vue.js and Jinja can live together and you can display Vue.js pages with Flask. 👍

Links

• Flask : https://flask.palletsprojects.com/en/1.1.x/
• Vue.js : https://vuejs.org/
• Jinja : https://jinja.palletsprojects.com/en/2.11.x/

I hope it will help you! 😀