Server-side setup

Install dependencies

Install the Inertia server-side framework and adapters using pip:

pip install -U flask flask-inertia

The Flask application

Create a Flask application using the Inertia adapter in our app.py file:

#!/usr/bin/env python3

from flask import Flask
from flask_inertia import Inertia

# `base.html` template will be used as inertia default template
INERTIA_TEMPLATE = "base.html"

# init the app setting `template_folder` and `static_folder`
app = Flask(
    __name__,
    template_folder="templates",
    static_folder="static/dist",
)

# set the config
app.config.from_object(__name__)

# init inertia adapter
Inertia(app)

The root template

Setup the root template used by Inertia adapter that will be loaded on the first page visit, it will contain the routes to the files generated by the Vue application:

base.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0"/>
    <title>My app</title>
    <script lang="javascript">
      {{ inertia.include_router() }}
    </script>
  </head>
  <body>
    <div id="app" data-page='{{ page | tojson }}'></div>
    <script type="module" src="{{ url_for('static', filename='main.js') }}" defer></script>
  </body>
</html>

Warning

Be aware of the single quotes used for the data-page argument. Jinja2 will not escape the double quotes of your JSON object https://github.com/pallets/flask/issues/1002

The inertia.include_router expose the Flask routes to the client side implementing a window.reverseUrl method.

Create linked views

With Inertia, each page in your application has its own controller and corresponding Vue component (except Shorthand routes). This allows you to retrieve just the data necessary for that page, no API required.

Update your app.py file to add a new route using the module render_inertia method:

from flask_inertia import render_inertia

# init app as described above

@app.route("/")
def index():
    """Example route."""
    fake_data = {
        "foo": "bar",
        "fiz": "buzz",
        "num": 42,
    }
    return render_inertia("Index", props=fake_data)

Then create a second dummy route to see how to create links between our components:

@app.route("/parameters/")
def params():
    """Second route."""
    return render_inertia("Params")