How can I combine Vue.js with Flask?

Question

I want to use Vue.js and Flask together: Vue.js for a dynamic front-end, and Flask for the back-end. How can I do that?

Answer 1

When using vue-cli or Webpack, process can be simplified. Simply create

vue.config.js in your Vue project, see: Vue config

module.exports = {
    outputDir: "../dist",

    // relative to outputDir
    assetsDir: "static" 
};

then config your flask app:

app.py

from flask import Flask, render_template

app = Flask(__name__,
            static_folder = "./dist/static",
            template_folder = "./dist")


@app.route('/')
def index():
    return render_template("index.html")

Note, that in flask static_folder and template_folder can't be the same.