Flask + Vue: zero-ceremony Python backend, Vue 3 frontend

Flask + Vue is one of the leanest stacks in the examples, a minimal Python server, a Vite-powered Vue 3 frontend, and pyRPC bridging them with full type safety. The setup is nearly identical to the FastAPI + Vue example; only the import paths and default port differ.

The server

# server/main.py
from flask import Flask
from flask_cors import CORS
from pyrpc_core import rpc
from pyrpc_flask import mount_flask

app = Flask(__name__)
CORS(app, origins=["http://localhost:5173"])  # Vite default

@rpc.query
def greet(name: str = "World") -> dict:
    return {"message": f"Hello, {name}!", "framework": "Flask"}

@rpc.query
def read_item(item_id: int, q: str = None) -> dict:
    return {"item_id": item_id, "q": q}

@rpc.mutation
def create_item(name: str, description: str = None) -> dict:
    return {"name": name, "description": description, "created": True}

mount_flask(app)

if __name__ == "__main__":
    app.run(debug=True, host="0.0.0.0", port=5000)

Client setup

// src/pyrpc.ts
import { createPyrpcVue } from "@pyrpc/vue"
import type { Types } from "@pyrpc/types"

export const pyrpc = createPyrpcVue<Types>({
  baseUrl: import.meta.env.VITE_API_URL ?? "http://localhost:5000",
})
// src/main.ts
createApp(App).use(pyrpc.plugin).mount("#app")

<!-- src/App.vue -->
<script setup lang="ts">
import { ref } from "vue"
import { pyrpc } from "./pyrpc"

const name = ref("")
const { data: greeting, isPending } = pyrpc.greet.createQuery()
const { data: item } = pyrpc.read_item.createQuery(() => ({ item_id: 42, q: "test" }))
const createItem = pyrpc.create_item.createMutation()
</script>

<template>
  <p v-if="isPending">Loading…</p>
  <pre v-else>{{ JSON.stringify(greeting) }}</pre>
  <pre>{{ JSON.stringify(item) }}</pre>
  <input v-model="name" />
  <button @click="createItem.mutate({ name })" :disabled="createItem.isPending.value">
    {{ createItem.isPending.value ? "Creating…" : "Create" }}
  </button>
  <pre v-if="createItem.isSuccess.value">{{ JSON.stringify(createItem.data.value) }}</pre>
</template>

Run it

cd server && uv add pyrpc-core[flask] && pyrpc dev --yes
cd client && npm install && npm run dev

Open http://localhost:5173. Full source at examples/flask-vue.