Building an SPA with Flask and Vue

Building an SPA with Flask and Vue.js: A Step-by-Step Guide

If you're looking to build a powerful and dynamic web app, combining Flask (Python) and Vue.js (JavaScript) is a great choice.

• Flask serves as the backend API (lightweight and flexible)

• Vue.js handles the frontend (fast, reactive, and component-based)

In this tutorial, we’ll walk you through how to build a Single Page Application (SPA) using Flask and Vue — step by step.

---

🚀 What Is an SPA?

A Single Page Application loads a single HTML page and dynamically updates content using JavaScript, without reloading the whole page.

Popular examples: Gmail, Trello, Notion.

---

🛠️ Technologies Used

• Flask – Backend server (Python)

• Flask-CORS – Cross-Origin support

• Vue.js – Frontend framework

• Axios – HTTP client for Vue

• Node.js & npm – To install Vue CLI

---

📁 Project Structure Overview

/my-spa-app
│
├── /backend (Flask)
│   ├── app.py
│   └── requirements.txt
│
├── /frontend (Vue)
│   ├── package.json
│   └── src/

---

🔌 Step 1: Set Up Flask Backend

👉 1. Create and activate a virtual environment

python -m venv venv
source venv/bin/activate  # or venv\Scripts\activate (Windows)

👉 2. Install Flask and Flask-CORS

pip install flask flask-cors

👉 3. Create app.py

from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # enable CORS

@app.route('/api/message')
def get_message():
    return jsonify({"message": "Hello from Flask API!"})

if __name__ == '__main__':
    app.run(debug=True)

👉 4. Run Flask

python app.py

Your Flask API will run at: http://127.0.0.1:5000/api/message

---

🌐 Step 2: Set Up Vue Frontend

👉 1. Install Vue CLI (if not already installed)

npm install -g @vue/cli

👉 2. Create Vue project

vue create frontend

Choose defaults (Babel + Linter is enough for now).

👉 3. Navigate and serve

cd frontend
npm run serve

Vue dev server runs at http://localhost:8080/

---

🧠 Step 3: Connect Vue to Flask API

👉 1. Install Axios

npm install axios

👉 2. Edit App.vue to call Flask API

<template>
  <div>
    <h1>Flask + Vue SPA</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      message: 'Loading...'
    };
  },
  created() {
    axios.get('http://127.0.0.1:5000/api/message')
      .then(response => {
        this.message = response.data.message;
      })
      .catch(error => {
        this.message = 'API call failed';
        console.error(error);
      });
  }
};
</script>

✅ Now, when you open http://localhost:8080, you should see:

Flask + Vue SPA
Hello from Flask API!

---

🔄 Step 4: Enable Production Build (Optional)

👉 1. Build Vue

npm run build

This generates a dist/ folder with static files.

👉 2. Serve via Flask

Modify app.py:

from flask import Flask, send_from_directory

app = Flask(__name__, static_folder="../frontend/dist")
CORS(app)

@app.route('/api/message')
def get_message():
    return jsonify({"message": "Hello from Flask API!"})

@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def serve_vue(path):
    if path != "" and os.path.exists(app.static_folder + '/' + path):
        return send_from_directory(app.static_folder, path)
    else:
        return send_from_directory(app.static_folder, 'index.html')

Now Flask serves the Vue frontend and the API together — perfect for production.

---

🧪 Testing the Integration

• Test the API directly: http://localhost:5000/api/message

• Test Vue loading data: http://localhost:5000/ (when serving built frontend)

---

🔐 Extra Features to Add Later

• Form handling and POST APIs

• Authentication (JWT)

• Database (SQLite, PostgreSQL)

• Vue Router and Vuex

• Environment-based API URLs

• Deploy to Heroku, Render, or Railway

---

🧠 Why Flask + Vue Works Well

Feature	Flask	Vue
Language	Python	JavaScript
Role	Backend API	Frontend UI
Strength	Simplicity, flexibility	Reactive, fast UI
Learning curve	Low	Low to medium
Ideal for	REST APIs, Microservices	SPAs, Dashboards

---

🎯 Final Thoughts

Building a SPA using Flask and Vue.js gives you the best of both worlds:

• Python’s ease of backend development

• Vue’s power in building fast, interactive UIs

It’s great for:

• Prototyping apps

• Admin dashboards

• Lightweight full-stack projects

---

🚀 What’s Next?

• Add routing with Vue Router

• Create a Flask POST API

• Use Flask-SQLAlchemy for database

• Deploy full stack to production

Learn  FullStack Python Course

Read More 

Vue.js and Python: A Perfect Match

Integrating React with a Django Backend

Using Tailwind CSS in a Python Web App

Intro to HTML, CSS, and JS for Python Developers