DEV Community

Maxime Guilbert
Maxime Guilbert

Posted on • Edited on

5 2

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

{{ ... }}
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! 😀

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up