DEV Community

loading...

Combine Flask and Vue.js

Maxime Guilbert
Just a dev who touches a lot of things and wants to share his experiences. (or just want to note somewhere things to don't forget)
・1 min read

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

{{ ... }}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

A Vue.js example

<div id="app">
  {{ message }}
</div>
Enter fullscreen mode Exit fullscreen mode

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!'
    }
  })
Enter fullscreen mode Exit fullscreen mode
<div id="app">
  [[ message ]]
</div>
Enter fullscreen mode Exit fullscreen mode

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

Alt Text


Links


I hope it will help you! 😀

Discussion (0)