Vuejs-Python

This project aims to create various examples showing how to work with vuejs and python based technologies. As vuejs may be integrated in different ways, with different advantages for each approach, having these examples are ideal for the brave-of-heart.

flask-vue

quickstart

docker-compose -f docker-compose.yml -f docker-compose-dev.yml up

flask-vue is the first project made. It shows how to use flask and vuejs to build a non-SPA (single page application). This approach is more appropriate for those with little experience using js/node build tools like webpack_ and browserify_. You'll mostly have to handle python and js code. Another important advantage is that most flask "resources" will still work out-of-the-box, like debug toolbar and csrf protection.

A disvantage for this approach is that it is much less flexible, integrates poorly with other javascript libraries, less performatic, has cache invalidation issues and is not appropriate for larger projects. Depending of how you implement the frontend, you may also see some flickering.

So, how does the flask-vue was built? Basically you have a flask application with support to schemas that loads your vue framework in the index.html page, mounts your Vue element, queries a endpoint and builds your view. Even though this approach produces flickering, it is quite simple to implement. Let's focus on a few highlights:

• The javascript is generated by webassets, which converts the coffee files on access. Quite convenient.
• Marshmallow is used for serialization, as it is capable of loading requests into python objects/sqlalchemy objects and serialize them back.
• Ajax requests are treated by plain views, with exception to the rest api, which is handle by a custom Resource class, which provides a rest api interface.

Be warned that there are a few broken links here and there AND pagination is not implemented visually.

.. _webpack: https://webpack.github.io/ .. _browserify: http://browserify.org/