Vue + Python (Flask) + SQLite

Each part of this stack was chosen for having the shallowest learning curve in its layer: Vue's HTML-like templates, Python's readable syntax, and a database that is just a file. Together they let a beginner build and understand every layer of a real web app.

Who gets this pick

You'll see this stack when you're not on shared hosting, not building a real-time app, you have very little or some coding experience, your goal is not getting a job, and you're not in a larger team. Change any of the last three and the recommendation becomes React + Node.js + PostgreSQL.

How the pieces fit together

• Vue runs in the browser and handles everything you see and click.
• Flask is a small JSON API: the browser sends requests like GET /api/todos, and Flask answers with data.
• SQLite stores that data in a single file next to your Python code, using Python's built-in sqlite3 module - nothing to install.

While developing, Vite's dev server forwards /api requests to Flask, so you don't have to deal with CORS. In production, Flask can serve the built Vue files too, so the whole app runs as one process.

A first project

Follow our step-by-step Vue + Flask + SQLite to-do app guide. It's deliberately small - four API routes and one Vue component - so you can hold the entire app in your head. Then extend it yourself:

1. Let users edit a to-do's title (a PUT route and an edit mode in the component).
2. Add due dates, and a computed "overdue" filter in Vue.
3. Split the Vue component into TodoForm and TodoItem.

Serving it as one app

After npm run build, point Flask at the built files:

from flask import Flask

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

@app.get("/")
def index():
    return app.send_static_file("index.html")

Now one server process delivers the Vue app and the API from the same address.

Hosting and cost

Because SQLite is a file, you need a host whose disk survives restarts. PythonAnywhere is a good beginner choice: it's built for Python web apps, has a free tier and keeps your files. A small VPS also works. Platform services like Render need a paid persistent disk for SQLite - or a switch to a hosted database.

Mistakes to avoid

• Fighting CORS when the Vite proxy would make it disappear during development.
• A relative database path like "todos.db", which creates a fresh empty database whenever you start Flask from a different folder. Build the path from __file__.
• Committing the database file to Git along with test data - add it to .gitignore.
• Running flask run in production. Use gunicorn (or your host's WSGI setup).

The upgrade path

This stack is a starting point that upgrades one layer at a time. Swap SQLite for PostgreSQL (SQLAlchemy makes it a configuration change) when you need a hosted database; move from Flask to FastAPI if you want typed, async APIs; keep Vue as long as you like. Nothing you learn here is thrown away.

Keep going