Building a Vue.js SPA (Single Page Application) Frontend with FastAPI Backend for AI Integration

I wonder if I did not make an error of judgment…
As my objective remains to build a system likely to promote AI’s adoption, it pushed me to favor Streamlit as Frontend instead of building a real web application with a framework like Vue.js.

For this post also, you can find all files, mostly prompts, on my GitHub account. See https://github.com/bflaven/ia_usages/tree/main/ia_build_vue_js_on_fastapi

Unfortunately, the Streamlit web application is victim of its own success and stakeholders started to ask me for modifications on the frontend. As if it was much more a web application than an exploratory tool!

I am trapped, my main mission is not to flesh out a web application but more to implement IA features through an API. So, devoting time to the web application is to take the risk to get lost in the weeds!

Nevertheless, I did a quick assessment of how long it would take to replace Streamlit with Vue.js and connect it to the IA api built with Fastapi. This discovery is what this post is about.

First, here is the User story behind the scenes:

# prompt for this User Story
User Story: As a PO I want to build a web application propelled with Vue.js and not on Streamlit, aka the frontend to query an API built in Python with FastAPI aka the backend. The API delivered IA features.

This wish meets several objectives:

Delegate the creation and maintenance of the web application to another team in order to relieve the AI team from frontend management. So, the AI’s team can focus on tasks with added value for AI e.g. fine-tuning, selecting models, etc.
Pool knowledge internally so you are not isolating yourself in Python to make apps that you create and maintain elsewhere with other technologies.
Re-enter into the digital device’s classic production cycle with all the stages that this implies: UX, Testing, CI…

For this post, I have defined a simple architecture for the application. The API instead of CRUD operations may handle IA functionalities but for educational purpose, I have simplified the objective, so the API consists of two main parts:

Backend (FastAPI):
It provides RESTful APIs for CRUD operations and serves as the backend server for the application.
Frontend (Vue.js):
It is a single-page application (SPA) built using Vue.js to interact with the backend APIs and render the user interface.

The tech stack could be the following:

# Backend
FastAPI
SQLAlchemy & SQLite
Pydantic
JWT (JSON Web Tokens)
# Frontend
Vue.js
Vuex
Vuetify
Axios

I made some prompts to help me out. See vite_vue_prompt_4.md, vite_vue_prompt_5.md

GitHub Projects as Exploration Milestones

As always, I searched the length and breadth of GitHub looking for projects containing a backend (FastAPI) and a frontend (Vue.js). Many projects are on Docker

A very inspiring project where I have grabbed my User Story. https://github.com/krassykirov/FastAPI-Vue
The most complete step-by-step walkthrough to achieve a SPA (Single Page App) with FastAPI and Vue.js. https://testdriven.io/blog/developing-a-single-page-app-with-fastapi-and-vuejs/
A good knowledge refresher even if even the API is not made in Fastapi: “Fetching Data from a Third-party API with Vue.js and Axios.” https://www.sitepoint.com/fetching-data-third-party-api-vue-axios/
A quick and dirty, very straightforward “Serve Vue from Fastapi in a breeze”. https://dimmaski.com/serve-vue-fastapi/

These two projects are much closer to my conditions of use. I have detailed extensively in previous posts, namely an AI device equipped with a backend (a FastAPI API which delivers AI functionalities) and a frontend in Vue.js and not in Streamilit.

NHL Award Prediction Tracker Using Vue.js and FastAPI. https://github.com/jfbriggs/nhl-award-vue-fastapi/tree/master
Simple image recognition using Vue 3 + Python fastAPI
Very instructive project even though the explanations are in Khmer! https://github.com/moking55/simple-vue-and-fastapi-face-recognizer

“Vite Vue”, some disparate commands as reminders to manipulate both backend and frontend

001_my_vue_project

# 001_my_vue_project

- go to path
cd /Users/brunoflaven/Documents/01_work/blog_articles/build_vue_js_on_fastapi/001_my_vue_project


# Install the stuff
npm install 
npm install --save-dev


# launch the dev
npm run dev
# Check http://localhost:5173/

# launch the build
npm run build
npm run preview
# Check http://localhost:4173/

# CAUTION: if you want to use the commnds vite 
npm install -g vite

# For dev
vite

# For build
vite build

# For preview or serve
vite preview

002_fastapi_vite

# 002_fastapi_vite
cd /Users/brunoflaven/Documents/01_work/blog_articles/build_vue_js_on_fastapi/002_fastapi_vite

# 1. BACKEND
# start the backend (FastAPI)
cd /Users/brunoflaven/Documents/01_work/blog_articles/build_vue_js_on_fastapi/002_fastapi_vite/api


# launch the env
source activate fmm_fastapi_poc

# start the api
uvicorn main:app --reload
# Check http://127.0.0.1:8000/


# 2. FRONTEND
# start the frontend (Vue.js)
cd /Users/brunoflaven/Documents/01_work/blog_articles/build_vue_js_on_fastapi/002_fastapi_vite/ui


# Install the stuff
npm install 
npm install --save-dev


# launch the dev
npm run dev
# Check http://localhost:5173/

# launch the build
npm run build
npm run preview
# Check http://localhost:4173/

# CAUTION: if you want to use the commnds vite 
npm install -g vite

# For dev
vite

# For build
vite build

006_fastapi_database

Working backend with fastAPI

# 006_fastapi_database
cd /Users/brunoflaven/Documents/01_work/blog_articles/build_vue_js_on_fastapi/006_my_vue_project/backend

# launch the env
source activate fmm_fastapi_poc

# start the api
uvicorn main:app --reload
# Check http://127.0.0.1:8000/

012_fastapi_vue

# 012_fastapi_vue
cd /Users/brunoflaven/Documents/01_work/blog_articles/build_vue_js_on_fastapi/012_fastapi_vue

# 1. BACKEND
# start the backend (FastAPI)
cd /Users/brunoflaven/Documents/01_work/blog_articles/build_vue_js_on_fastapi/012_fastapi_vue/backend/src

# launch the env
source activate fmm_fastapi_poc

# start the api
uvicorn main:app --reload
# Check http://127.0.0.1:8000/


# 2. FRONTEND
# start the frontend (Vue.js)
cd /Users/brunoflaven/Documents/01_work/blog_articles/build_vue_js_on_fastapi/012_fastapi_vue/frontend


# Install the stuff
npm install 
npm install --save-dev

# launch the app, check package.json
npm run serve
npm run build
npm run lint



# Check http://localhost:4173/
# CAUTION: if you want to use the commnds vite 
npm install -g vite

# For dev
vite

# For build
vite build

the_vue_js_handbook

My concern was connecting the backend (API made with FastAPI) and the frontend (made with Vue.js), better know a little more how to handle a webapp in Vue.js. They are plenty of tutorials and ressources even well written books: Vue.js-3-By-Example has my preference: https://github.com/PacktPublishing/-Vue.js-3-By-Example

# path
cd /Users/brunoflaven/Documents/01_work/blog_articles/build_vue_js_on_fastapi/the_vue_js_handbook/poc_vue_api

# 1. CREATE A SERVER TO FAKE AN API
# fake server
npm install -g json-server
npm install json-server --save-dev


# path
cd /Users/brunoflaven/Documents/01_work/blog_articles/build_vue_js_on_fastapi/the_vue_js_handbook/poc_vue_api/frontend_1/

# launch fake server
json-server -p 5555 src/posts.json
# Check http://localhost:5555/posts



# 2. QUERY THIS FAKE API

# install axios
npm install axios  --save-dev


# launch the app
npm run serve
npm run build
npm run lint

# commands for Vues.js
npm init vue@latest 
npm create vue@latest

# command for Vite + Vue.js
npm init vite@latest

# path
cd /Users/brunoflaven/Documents/01_work/blog_articles/build_vue_js_on_fastapi/

# install globally
npm install -g @vue/cli

# check vue
vue -V
# @vue/cli 5.0.8


# working with vue.js
# path
cd /Users/brunoflaven/Documents/01_work/blog_articles/build_vue_js_on_fastapi/

# create dir
mkdir the_vue_js_handbook
cd the_vue_js_handbook

# create your first vue app in an html file
touch your_first_vue_app.html


# working_command_1
# vue create 
vue create frontend_2

# working_command_2
npm create vue@latest frontend_2

# other commands
cd bf-fake-vue-app-1
npm install
npm run format
npm run dev

In package.json, change this to avoid common error for multi-word-component naming.

"rules": {"vue/multi-word-component-names": "off"}

A bit of Streamlit vs A bit of Vues.js

Being sensitive to the time-to-market, depriving yourself of Streamlit can be much more complex. I made three additional investigations with Streamlit and found easily solutions.In Vue.js, researching and implementing these solutions would undoubtedly have taken more time.

streamlit_video_mp4 : For instance, I did quite a few transcription experiments using Whisper for both audio and video files. Naturally, retrieving transcription files with diarisation lead naturally to subtitles and using Streamlit to show a video with subtitles is extremely easy. Check “streamlit_video_mp4” in https://github.com/bflaven/ia_usages/tree/main/ia_build_vue_js_on_fastapi/streamlit_video_mp4
streamlit_module_annotated_text: An attempt on “Annotated Text Component for Streamlit” by Thiago Teixeira, one of the founders of Streamlit. Check “streamlit_module_annotated_text” in https://github.com/bflaven/ia_usages/tree/main/ia_build_vue_js_on_fastapi/streamlit_module_annotated_text
streamlit_no_reruns: Investigation on Streamlit question : “How to prevent the reloading of the whole page when I let the user perform an action ?”. Check “streamlit_no_reruns” in https://github.com/bflaven/ia_usages/tree/main/ia_build_vue_js_on_fastapi/streamlit_no_reruns

Here are some experiments made with Streamlit that prevents me from switching from Streamlit to Vue.js with no doubt.

Video #1 Scaffold Your First Vitejs App: Comprehensive Beginner’s Guide