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)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more