{"id":12859,"date":"2024-07-02T08:53:46","date_gmt":"2024-07-02T06:53:46","guid":{"rendered":"https:\/\/flaven.fr\/?p=12859"},"modified":"2026-09-16T10:09:30","modified_gmt":"2026-09-16T08:09:30","slug":"building-a-vue-js-spa-single-page-application-frontend-with-fastapi-backend-for-ai-integration","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2024\/07\/building-a-vue-js-spa-single-page-application-frontend-with-fastapi-backend-for-ai-integration\/","title":{"rendered":"Building a Vue.js SPA (Single Page Application) Frontend with FastAPI Backend for AI Integration"},"content":{"rendered":"<p>I wonder if I did not make an error of judgment&#8230;<br \/>\nAs my objective remains to build a system likely to promote AI&#8217;s adoption, it pushed me to favor Streamlit as Frontend instead of building a real web application with a framework like Vue.js.<\/p>\n<p><b>For this post also, you can find all files, mostly prompts, on my GitHub account. See <a href=\"https:\/\/github.com\/bflaven\/ia_usages\/tree\/main\/ia_build_vue_js_on_fastapi\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/bflaven\/ia_usages\/tree\/main\/ia_build_vue_js_on_fastapi<\/a><\/b><\/p>\n<p>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!<\/p>\n<p>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!<\/p>\n<p>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.<\/p>\n<p>First, here is the User story behind the scenes: <\/p>\n<blockquote><p>\n# prompt for this User Story<br \/>\nUser 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. <\/p><\/blockquote>\n<p><b>This wish meets several objectives:<\/b><\/p>\n<ul>\n<li>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&#8217;s team can focus on tasks with added value for AI e.g. fine-tuning, selecting models, etc.<\/li>\n<li>Pool knowledge internally so you are not isolating yourself in Python to make apps that you create and maintain elsewhere with other technologies. <\/li>\n<li>Re-enter into the digital device&#8217;s classic production cycle with all the stages that this implies: UX, Testing, CI&#8230;<\/li>\n<\/ul>\n<p>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:<\/p>\n<ul>\n<li><b>Backend (FastAPI):<\/b><br \/>\nIt provides RESTful APIs for CRUD operations and serves as the backend server for the application. <\/li>\n<li><b>Frontend (Vue.js): <\/b><br \/>\nIt is a single-page application (SPA) built using Vue.js to interact with the backend APIs and render the user interface.<\/li>\n<\/ul>\n<p>The tech stack could be the following: <\/p>\n<pre>\r\n# Backend\r\nFastAPI\r\nSQLAlchemy & SQLite\r\nPydantic\r\nJWT (JSON Web Tokens)\r\n# Frontend\r\nVue.js\r\nVuex\r\nVuetify\r\nAxios\r\n<\/pre>\n<p><i>I made some prompts to help me out. See vite_vue_prompt_4.md, vite_vue_prompt_5.md<\/i><\/p>\n<h2>GitHub Projects as Exploration Milestones<\/h2>\n<p>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<\/p>\n<ul>\n<li>A very inspiring project where I have grabbed my User Story. <a href=\"https:\/\/github.com\/krassykirov\/FastAPI-Vue\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/krassykirov\/FastAPI-Vue<\/a><\/li>\n<li>The most complete step-by-step walkthrough to achieve a SPA (Single Page App) with FastAPI and Vue.js. <a href=\"https:\/\/testdriven.io\/blog\/developing-a-single-page-app-with-fastapi-and-vuejs\/\" target=\"_blank\" rel=\"noopener\">https:\/\/testdriven.io\/blog\/developing-a-single-page-app-with-fastapi-and-vuejs\/<\/a><\/li>\n<li>A good knowledge refresher even if even the API is not made in Fastapi: &#8220;Fetching Data from a Third-party API with Vue.js and Axios.&#8221; <a href=\"https:\/\/www.sitepoint.com\/fetching-data-third-party-api-vue-axios\/\" target=\"_blank\" rel=\"noopener\">https:\/\/www.sitepoint.com\/fetching-data-third-party-api-vue-axios\/<\/a><\/li>\n<li>A quick and dirty, very straightforward &#8220;Serve Vue from Fastapi in a breeze&#8221;. <a href=\"https:\/\/dimmaski.com\/serve-vue-fastapi\/\" target=\"_blank\" rel=\"noopener\">https:\/\/dimmaski.com\/serve-vue-fastapi\/<\/a><\/li>\n<\/ul>\n<p>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.<\/p>\n<ul>\n<li>NHL Award Prediction Tracker Using Vue.js and FastAPI. <a href=\"https:\/\/github.com\/jfbriggs\/nhl-award-vue-fastapi\/tree\/master\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/jfbriggs\/nhl-award-vue-fastapi\/tree\/master<\/a><\/li>\n<li>Simple image recognition using Vue 3 + Python fastAPI<br \/>\nVery instructive project even though the explanations are in Khmer! <a href=\"https:\/\/github.com\/moking55\/simple-vue-and-fastapi-face-recognizer\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/moking55\/simple-vue-and-fastapi-face-recognizer<\/a><\/li>\n<\/ul>\n<p><b>&#8220;Vite Vue&#8221;, some disparate commands as reminders to manipulate both backend and frontend<\/b><\/p>\n<h3>001_my_vue_project<\/h3>\n<pre>\r\n# 001_my_vue_project\r\n\r\n- go to path\r\ncd \/Users\/brunoflaven\/Documents\/01_work\/blog_articles\/build_vue_js_on_fastapi\/001_my_vue_project\r\n\r\n\r\n# Install the stuff\r\nnpm install \r\nnpm install --save-dev\r\n\r\n\r\n# launch the dev\r\nnpm run dev\r\n# Check http:\/\/localhost:5173\/\r\n\r\n# launch the build\r\nnpm run build\r\nnpm run preview\r\n# Check http:\/\/localhost:4173\/\r\n\r\n# CAUTION: if you want to use the commnds vite \r\nnpm install -g vite\r\n\r\n# For dev\r\nvite\r\n\r\n# For build\r\nvite build\r\n\r\n# For preview or serve\r\nvite preview\r\n<\/pre>\n<h3>002_fastapi_vite<\/h3>\n<pre>\r\n# 002_fastapi_vite\r\ncd \/Users\/brunoflaven\/Documents\/01_work\/blog_articles\/build_vue_js_on_fastapi\/002_fastapi_vite\r\n\r\n# 1. BACKEND\r\n# start the backend (FastAPI)\r\ncd \/Users\/brunoflaven\/Documents\/01_work\/blog_articles\/build_vue_js_on_fastapi\/002_fastapi_vite\/api\r\n\r\n\r\n# launch the env\r\nsource activate fmm_fastapi_poc\r\n\r\n# start the api\r\nuvicorn main:app --reload\r\n# Check http:\/\/127.0.0.1:8000\/\r\n\r\n\r\n# 2. FRONTEND\r\n# start the frontend (Vue.js)\r\ncd \/Users\/brunoflaven\/Documents\/01_work\/blog_articles\/build_vue_js_on_fastapi\/002_fastapi_vite\/ui\r\n\r\n\r\n# Install the stuff\r\nnpm install \r\nnpm install --save-dev\r\n\r\n\r\n# launch the dev\r\nnpm run dev\r\n# Check http:\/\/localhost:5173\/\r\n\r\n# launch the build\r\nnpm run build\r\nnpm run preview\r\n# Check http:\/\/localhost:4173\/\r\n\r\n# CAUTION: if you want to use the commnds vite \r\nnpm install -g vite\r\n\r\n# For dev\r\nvite\r\n\r\n# For build\r\nvite build\r\n\r\n<\/pre>\n<h3>006_fastapi_database<\/h3>\n<p><b>Working backend with fastAPI<\/b><\/p>\n<pre>\r\n# 006_fastapi_database\r\ncd \/Users\/brunoflaven\/Documents\/01_work\/blog_articles\/build_vue_js_on_fastapi\/006_my_vue_project\/backend\r\n\r\n# launch the env\r\nsource activate fmm_fastapi_poc\r\n\r\n# start the api\r\nuvicorn main:app --reload\r\n# Check http:\/\/127.0.0.1:8000\/\r\n\r\n<\/pre>\n<h3>012_fastapi_vue<\/h3>\n<pre>\r\n# 012_fastapi_vue\r\ncd \/Users\/brunoflaven\/Documents\/01_work\/blog_articles\/build_vue_js_on_fastapi\/012_fastapi_vue\r\n\r\n# 1. BACKEND\r\n# start the backend (FastAPI)\r\ncd \/Users\/brunoflaven\/Documents\/01_work\/blog_articles\/build_vue_js_on_fastapi\/012_fastapi_vue\/backend\/src\r\n\r\n# launch the env\r\nsource activate fmm_fastapi_poc\r\n\r\n# start the api\r\nuvicorn main:app --reload\r\n# Check http:\/\/127.0.0.1:8000\/\r\n\r\n\r\n# 2. FRONTEND\r\n# start the frontend (Vue.js)\r\ncd \/Users\/brunoflaven\/Documents\/01_work\/blog_articles\/build_vue_js_on_fastapi\/012_fastapi_vue\/frontend\r\n\r\n\r\n# Install the stuff\r\nnpm install \r\nnpm install --save-dev\r\n\r\n# launch the app, check package.json\r\nnpm run serve\r\nnpm run build\r\nnpm run lint\r\n\r\n\r\n\r\n# Check http:\/\/localhost:4173\/\r\n# CAUTION: if you want to use the commnds vite \r\nnpm install -g vite\r\n\r\n# For dev\r\nvite\r\n\r\n# For build\r\nvite build\r\n\r\n<\/pre>\n<h3>the_vue_js_handbook<\/h3>\n<p>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: <a href=\"https:\/\/github.com\/PacktPublishing\/-Vue.js-3-By-Example\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/PacktPublishing\/-Vue.js-3-By-Example<\/a><\/p>\n<pre>\r\n# path\r\ncd \/Users\/brunoflaven\/Documents\/01_work\/blog_articles\/build_vue_js_on_fastapi\/the_vue_js_handbook\/poc_vue_api\r\n\r\n# 1. CREATE A SERVER TO FAKE AN API\r\n# fake server\r\nnpm install -g json-server\r\nnpm install json-server --save-dev\r\n\r\n\r\n# path\r\ncd \/Users\/brunoflaven\/Documents\/01_work\/blog_articles\/build_vue_js_on_fastapi\/the_vue_js_handbook\/poc_vue_api\/frontend_1\/\r\n\r\n# launch fake server\r\njson-server -p 5555 src\/posts.json\r\n# Check http:\/\/localhost:5555\/posts\r\n\r\n\r\n\r\n# 2. QUERY THIS FAKE API\r\n\r\n# install axios\r\nnpm install axios  --save-dev\r\n\r\n\r\n# launch the app\r\nnpm run serve\r\nnpm run build\r\nnpm run lint\r\n\r\n# commands for Vues.js\r\nnpm init vue@latest \r\nnpm create vue@latest\r\n\r\n# command for Vite + Vue.js\r\nnpm init vite@latest\r\n\r\n# path\r\ncd \/Users\/brunoflaven\/Documents\/01_work\/blog_articles\/build_vue_js_on_fastapi\/\r\n\r\n# install globally\r\nnpm install -g @vue\/cli\r\n\r\n# check vue\r\nvue -V\r\n# @vue\/cli 5.0.8\r\n\r\n\r\n# working with vue.js\r\n# path\r\ncd \/Users\/brunoflaven\/Documents\/01_work\/blog_articles\/build_vue_js_on_fastapi\/\r\n\r\n# create dir\r\nmkdir the_vue_js_handbook\r\ncd the_vue_js_handbook\r\n\r\n# create your first vue app in an html file\r\ntouch your_first_vue_app.html\r\n\r\n\r\n# working_command_1\r\n# vue create <enter the app name>\r\nvue create frontend_2\r\n\r\n# working_command_2\r\nnpm create vue@latest frontend_2\r\n\r\n# other commands\r\ncd bf-fake-vue-app-1\r\nnpm install\r\nnpm run format\r\nnpm run dev\r\n<\/pre>\n<p>In package.json, change this to avoid common error for multi-word-component naming.<\/p>\n<pre>\r\n\"rules\": {\"vue\/multi-word-component-names\": \"off\"}\r\n<\/pre>\n<h2>A bit of Streamlit vs A bit of Vues.js<\/h2>\n<p>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.<\/p>\n<ul>\n<li>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 &#8220;streamlit_video_mp4&#8221; in <a href=\"https:\/\/github.com\/bflaven\/ia_usages\/tree\/main\/ia_build_vue_js_on_fastapi\/streamlit_video_mp4\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/bflaven\/ia_usages\/tree\/main\/ia_build_vue_js_on_fastapi\/streamlit_video_mp4<\/a><\/li>\n<li>streamlit_module_annotated_text: An attempt on \u201cAnnotated Text Component for Streamlit\u201d by Thiago Teixeira, one of the founders of Streamlit. Check &#8220;streamlit_module_annotated_text&#8221; in <a href=\"https:\/\/github.com\/bflaven\/ia_usages\/tree\/main\/ia_build_vue_js_on_fastapi\/streamlit_video_mp4\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/bflaven\/ia_usages\/tree\/main\/ia_build_vue_js_on_fastapi\/streamlit_module_annotated_text<\/a><\/li>\n<li>streamlit_no_reruns: Investigation on Streamlit question : &#8220;How to prevent the reloading of the whole page when I let the user perform an action ?&#8221;. Check &#8220;streamlit_no_reruns&#8221; in <a href=\"https:\/\/github.com\/bflaven\/ia_usages\/tree\/main\/ia_build_vue_js_on_fastapi\/streamlit_video_mp4\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/bflaven\/ia_usages\/tree\/main\/ia_build_vue_js_on_fastapi\/streamlit_no_reruns<\/a><\/li>\n<\/ul>\n<p><b>Here are some experiments made with Streamlit that prevents me from switching from Streamlit to Vue.js with no doubt.<\/b><\/p>\n<p>Video #1 Scaffold Your First Vitejs App: Comprehensive Beginner&#8217;s Guide<br \/>\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/RjP-KkmfscM\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p>Video #2 Master Vuejs: Build Your First App and Project with Ease<br \/>\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/lZFLytx-mr8\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p>Video #3 Display API Data using Vuejs &#038; Axios: Step-by-Step Tutorial<br \/>\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/xZnym1tL3IY\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p>Video #4 Connect FastAPI Backend to Vue.js Frontend: Full Guide<br \/>\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/RYKZfTAaC54\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p>Video #5 FastAPI Development: Boost Productivity with Database Boilerplates<br \/>\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/Tjr5DYqxapE\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p>Video #6 Streamlit Mastery: View Whisper Transcripts &#038; Prevent Page Reloads<br \/>\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/xQT6bxVNbqY\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p><H2>More infos<\/H2><\/p>\n<ul>\n<li>Vue.js-3-By-Example<br \/><a href=\"https:\/\/github.com\/PacktPublishing\/-Vue.js-3-By-Example\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/PacktPublishing\/-Vue.js-3-By-Example<\/a><\/li>\n<li>Vue 3 &#8211; CodeSandbox<br \/><a href=\"https:\/\/codesandbox.io\/s\/vue\" target=\"_blank\" rel=\"noopener\">https:\/\/codesandbox.io\/s\/vue<\/a><\/li>\n<li>GitHub &#8211; bezkoder\/vue-3-crud: Vue 3 example by a CRUD app with Axios, Vue Router, Bootstrap<br \/><a href=\"https:\/\/github.com\/bezkoder\/vue-3-crud\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/bezkoder\/vue-3-crud<\/a><\/li>\n<li>The Vue Handbook: a thorough introduction to Vue.js<br \/><a href=\"https:\/\/www.freecodecamp.org\/news\/the-vue-handbook-a-thorough-introduction-to-vue-js-1e86835d8446\/\" target=\"_blank\" rel=\"noopener\">https:\/\/www.freecodecamp.org\/news\/the-vue-handbook-a-thorough-introduction-to-vue-js-1e86835d8446\/<\/a><\/li>\n<li>How to Use Vue.js and Axios to Display Data from an API | DigitalOcean<br \/><a href=\"https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\" target=\"_blank\" rel=\"noopener\">https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-use-vue-js-and-axios-to-display-data-from-an-api<\/a><\/li>\n<li>Fetching Data from a Third-party API with Vue.js and Axios \u00e2\u0080\u0094 SitePoint<br \/><a href=\"https:\/\/www.sitepoint.com\/fetching-data-third-party-api-vue-axios\/\" target=\"_blank\" rel=\"noopener\">https:\/\/www.sitepoint.com\/fetching-data-third-party-api-vue-axios\/<\/a><\/li>\n<li>Rendering API Data with Vue.js and Axios &#8211; Techclaw<br \/><a href=\"https:\/\/techclaw.org\/rendering-api-data-with-vue-js-and-axios\/\" target=\"_blank\" rel=\"noopener\">https:\/\/techclaw.org\/rendering-api-data-with-vue-js-and-axios\/<\/a><\/li>\n<li>How To Configure Vue.js REST API Consumption with Axios | DigitalOcean<br \/><a href=\"https:\/\/www.digitalocean.com\/community\/tutorials\/vuejs-rest-api-axios\" target=\"_blank\" rel=\"noopener\">https:\/\/www.digitalocean.com\/community\/tutorials\/vuejs-rest-api-axios<\/a><\/li>\n<li>Axios + Vue.js 3 + Pinia, a \u201ccomfy\u201d configuration you can consider for an API REST &#8211; DEV Community<br \/><a href=\"https:\/\/dev.to\/bugintheconsole\/axios-vuejs-3-pinia-a-comfy-configuration-you-can-consider-for-an-api-rest-1i5c\" target=\"_blank\" rel=\"noopener\">https:\/\/dev.to\/bugintheconsole\/axios-vuejs-3-pinia-a-comfy-configuration-you-can-consider-for-an-api-rest-1i5c<\/a><\/li>\n<li>Rendering API Data with Vue.js and Axios | by TechClaw | Medium<br \/><a href=\"https:\/\/medium.com\/@techclaw\/rendering-api-data-with-vue-js-and-axios-1e600c6f1031\" target=\"_blank\" rel=\"noopener\">https:\/\/medium.com\/@techclaw\/rendering-api-data-with-vue-js-and-axios-1e600c6f1031<\/a><\/li>\n<li>Build Vue.js, Vue Query, and Axios CRUD App with RESTful API 2024<br \/><a href=\"https:\/\/codevoweb.com\/vue-query-and-axios-crud-app\/\" target=\"_blank\" rel=\"noopener\">https:\/\/codevoweb.com\/vue-query-and-axios-crud-app\/<\/a><\/li>\n<li>How to Create a web app using FastAPI, Vuejs and MongoDB for generating and showcasing images generated by Stability AI API Part 1 | by Sangeeth Joseph &#8211; The AI dev | Medium<br \/><a href=\"https:\/\/medium.com\/@sangeeth123sj\/how-to-create-a-web-app-using-fastapi-vuejs-and-mongodb-for-generating-and-showcasing-images-193ccdb20091\" target=\"_blank\" rel=\"noopener\">https:\/\/medium.com\/@sangeeth123sj\/how-to-create-a-web-app-using-fastapi-vuejs-and-mongodb-for-generating-and-showcasing-images-193ccdb20091<\/a><\/li>\n<li>GitHub &#8211; pelocho\/VueFastAPILearning<br \/><a href=\"https:\/\/github.com\/pelocho\/VueFastAPILearning\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/pelocho\/VueFastAPILearning<\/a><\/li>\n<li>GitHub &#8211; calvin-giese\/VueFastAPIExample<br \/><a href=\"https:\/\/github.com\/calvin-giese\/VueFastAPIExample\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/calvin-giese\/VueFastAPIExample<\/a><\/li>\n<li>GitHub &#8211; pelocho\/VueFastAPILearning<br \/><a href=\"https:\/\/github.com\/pelocho\/VueFastAPILearning\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/pelocho\/VueFastAPILearning<\/a><\/li>\n<li>GitHub &#8211; huyunlei\/VueFast: Vue.js version 3 with FastAPI<br \/><a href=\"https:\/\/github.com\/huyunlei\/VueFast\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/huyunlei\/VueFast<\/a><\/li>\n<li>GitHub &#8211; jitsejan\/fastapi-sqlalchemy-tutorial: Simple tutorial setting up FastAPI with SQLAlchemy with a VueJS frontend.<br \/><a href=\"https:\/\/github.com\/jitsejan\/fastapi-sqlalchemy-tutorial\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/jitsejan\/fastapi-sqlalchemy-tutorial<\/a><\/li>\n<li>GitHub &#8211; dwisulfahnur\/blog-fastapi-vuejs: Simple project that I write using fastapi, motor, and umongo for the backend. VueJS on the frontend<br \/><a href=\"https:\/\/github.com\/dwisulfahnur\/blog-fastapi-vuejs\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/dwisulfahnur\/blog-fastapi-vuejs<\/a><\/li>\n<li>GitHub &#8211; frodrig3ND\/DailyDashV2<br \/><a href=\"https:\/\/github.com\/frodrig3ND\/DailyDashV2\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/frodrig3ND\/DailyDashV2<\/a><\/li>\n<li>How To Configure Vue.js REST API Consumption with Axios | DigitalOcean<br \/><a href=\"https:\/\/www.digitalocean.com\/community\/tutorials\/vuejs-rest-api-axios\" target=\"_blank\" rel=\"noopener\">https:\/\/www.digitalocean.com\/community\/tutorials\/vuejs-rest-api-axios<\/a><\/li>\n<li>Axios + Vue.js 3 + Pinia, a \u201ccomfy\u201d configuration you can consider for an API REST &#8211; DEV Community<br \/><a href=\"https:\/\/dev.to\/bugintheconsole\/axios-vuejs-3-pinia-a-comfy-configuration-you-can-consider-for-an-api-rest-1i5c\" target=\"_blank\" rel=\"noopener\">https:\/\/dev.to\/bugintheconsole\/axios-vuejs-3-pinia-a-comfy-configuration-you-can-consider-for-an-api-rest-1i5c<\/a><\/li>\n<li>Connecter un frontend SPA Vue.js \u00e0 une API backend \u2013 Julien Salinas<br \/><a href=\"https:\/\/juliensalinas.com\/fr\/connecter-SPA-frontend-vuejs-axios-API-backend\/\" target=\"_blank\" rel=\"noopener\">https:\/\/juliensalinas.com\/fr\/connecter-SPA-frontend-vuejs-axios-API-backend\/<\/a><\/li>\n<li>Rendering API Data with Vue.js and Axios | by TechClaw | Medium<br \/><a href=\"https:\/\/medium.com\/@techclaw\/rendering-api-data-with-vue-js-and-axios-1e600c6f1031\" target=\"_blank\" rel=\"noopener\">https:\/\/medium.com\/@techclaw\/rendering-api-data-with-vue-js-and-axios-1e600c6f1031<\/a><\/li>\n<li>Building an E-Commerce app with Vue.js, Vuex &#038; Axios<br \/><a href=\"https:\/\/codesource.io\/blog\/building-an-e-commerce-app-with-vue-js-vuex-axios\/\" target=\"_blank\" rel=\"noopener\">https:\/\/codesource.io\/blog\/building-an-e-commerce-app-with-vue-js-vuex-axios\/<\/a><\/li>\n<li>GitHub &#8211; moking55\/simple-vue-and-fastapi-face-recognizer<br \/><a href=\"https:\/\/github.com\/moking55\/simple-vue-and-fastapi-face-recognizer\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/moking55\/simple-vue-and-fastapi-face-recognizer<\/a><\/li>\n<li>GitHub &#8211; kotaaaa\/employees-app: Simple CRUD Application with FastAPI(Python), Vue.js, MySQL, docker-compose<br \/><a href=\"https:\/\/github.com\/kotaaaa\/employees-app\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/kotaaaa\/employees-app<\/a><\/li>\n<li>Developing a Single Page App with FastAPI and Vue.js | TestDriven.io<br \/><a href=\"https:\/\/testdriven.io\/blog\/developing-a-single-page-app-with-fastapi-and-vuejs\/\" target=\"_blank\" rel=\"noopener\">https:\/\/testdriven.io\/blog\/developing-a-single-page-app-with-fastapi-and-vuejs\/<\/a><\/li>\n<li>Integrating FastAPI and React: Building a Full-Stack Application &#8211; Spencer Sharp<br \/><a href=\"https:\/\/www.haydenbarnett.dev\/articles\/integrating-fastapi-and-react\" target=\"_blank\" rel=\"noopener\">https:\/\/www.haydenbarnett.dev\/articles\/integrating-fastapi-and-react<\/a><\/li>\n<li>GitHub &#8211; krassykirov\/FastAPI-Vue: This project is a test of developing backend and frontend web app with FastAPI and Vue.js<br \/><a href=\"https:\/\/github.com\/krassykirov\/FastAPI-Vue\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/krassykirov\/FastAPI-Vue<\/a><\/li>\n<li>How To Build and Deploy a Machine Learning Model with FastAPI | Better Data Science<br \/><a href=\"https:\/\/betterdatascience.com\/deploy-a-machine-learning-model-with-fastapi\/\" target=\"_blank\" rel=\"noopener\">https:\/\/betterdatascience.com\/deploy-a-machine-learning-model-with-fastapi\/<\/a><\/li>\n<li>How To Build and Deploy a Machine Learning Model with FastAPI | Better Data Science<br \/><a href=\"https:\/\/betterdatascience.com\/deploy-a-machine-learning-model-with-fastapi\/\" target=\"_blank\" rel=\"noopener\">https:\/\/betterdatascience.com\/deploy-a-machine-learning-model-with-fastapi\/<\/a><\/li>\n<li>GitHub &#8211; jfbriggs\/nhl-award-vue-fastapi: Full-stack application (Vue.js + FastAPI) implementing machine learning to predict NHL regular-season award outcomes.<br \/><a href=\"https:\/\/github.com\/jfbriggs\/nhl-award-vue-fastapi\/tree\/master\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/jfbriggs\/nhl-award-vue-fastapi\/tree\/master<\/a><\/li>\n<li>GitHub &#8211; krassykirov\/FastAPI-Vue: This project is a test of developing backend and frontend web app with FastAPI and Vue.js<br \/><a href=\"https:\/\/github.com\/krassykirov\/FastAPI-Vue\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/krassykirov\/FastAPI-Vue<\/a><\/li>\n<li>GitHub &#8211; dwisulfahnur\/blog-fastapi-vuejs: Simple project that I write using fastapi, motor, and umongo for the backend. VueJS on the frontend<br \/><a href=\"https:\/\/github.com\/dwisulfahnur\/blog-fastapi-vuejs\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/dwisulfahnur\/blog-fastapi-vuejs<\/a><\/li>\n<li>GitHub &#8211; serj2626\/fapi-vue-interviews: Project &#8220;List of Interviews&#8221; on FastAPI and Vue<br \/><a href=\"https:\/\/github.com\/serj2626\/fapi-vue-interviews\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/serj2626\/fapi-vue-interviews<\/a><\/li>\n<li>GitHub &#8211; najeeb67\/Hospital-Project-in-Python-and-Js: Its Project About Hospital in FastApi And Vue.js<br \/><a href=\"https:\/\/github.com\/najeeb67\/Hospital-Project-in-Python-and-Js\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/najeeb67\/Hospital-Project-in-Python-and-Js<\/a><\/li>\n<li>GitHub &#8211; joaovitoriasilva\/endurain: My DIY fitness tracker journey. Frontend is built using Vue.js and Bootstrap CSS; Python FastAPI, Alembic, SQLAlchemy, stravalib, gpxpy, MariaDB behind the scenes. Suggestions welcome!<br \/><a href=\"https:\/\/github.com\/joaovitoriasilva\/endurain\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/joaovitoriasilva\/endurain<\/a><\/li>\n<li>GitHub &#8211; tiangolo\/full-stack-fastapi-template: Full stack, modern web application template. Using FastAPI, React, SQLModel, PostgreSQL, Docker, GitHub Actions, automatic HTTPS and more.<br \/><a href=\"https:\/\/github.com\/tiangolo\/full-stack-fastapi-template\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/tiangolo\/full-stack-fastapi-template<\/a><\/li>\n<li>GitHub &#8211; wpcodevo\/fastapi_sqlalchemy: In this article, I&#8217;ll provide you with a simple and straightforward guide on how you can build a CRUD app with FastAPI and SQLAlchemy. The FastAPI app will run on a Starlette web server, use Pydantic for data validation, and store data in an SQLite database.<br \/><a href=\"https:\/\/github.com\/wpcodevo\/fastapi_sqlalchemy\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/wpcodevo\/fastapi_sqlalchemy<\/a><\/li>\n<li>GitHub &#8211; KenMwaura1\/Fast-Api-Vue: Simple asynchronous API implemented with Fast-Api framework utilizing Postgres as a Database and SqlAlchemy as ORM . GiHub Actions as CI\/CD Pipeline. Vue + Daisy UI for the frontend<br \/><a href=\"https:\/\/github.com\/KenMwaura1\/Fast-Api-Vue\/tree\/main\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/KenMwaura1\/Fast-Api-Vue\/tree\/main<\/a><\/li>\n<li>GitHub &#8211; martinrenner\/RENBoard: FastAPI + React(Vite) + PostgresSQL + PgAdmin<br \/><a href=\"https:\/\/github.com\/martinrenner\/RENBoard\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/martinrenner\/RENBoard<\/a><\/li>\n<li>GitHub &#8211; cofin\/fastapi-vite: Template helpers for including assets generated by Vite JS.  Includes basic support FastAPI \/ Starlette templates.<br \/><a href=\"https:\/\/github.com\/cofin\/fastapi-vite\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/cofin\/fastapi-vite<\/a><\/li>\n<li>GitHub &#8211; SamuelEarl\/svelte-fastapi-demo-app: Demo App Showing How To Configure Svelte (using Vite) with FastAPI<br \/><a href=\"https:\/\/github.com\/SamuelEarl\/svelte-fastapi-demo-app\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/SamuelEarl\/svelte-fastapi-demo-app<\/a><\/li>\n<li>GitHub &#8211; venkyPy-2019\/FastAPI: FastApi, python and react (VITE)<br \/><a href=\"https:\/\/github.com\/venkyPy-2019\/FastAPI\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/venkyPy-2019\/FastAPI<\/a><\/li>\n<li>GitHub &#8211; eno-conan\/vite-fastapi_sqlalchemy: vite-fastapi_sqlalchemy<br \/><a href=\"https:\/\/github.com\/eno-conan\/vite-fastapi_sqlalchemy\/tree\/main\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/eno-conan\/vite-fastapi_sqlalchemy\/tree\/main<\/a><\/li>\n<li>The Ultimate FastAPI Tutorial Part 12 &#8211; Setting Up a React Frontend<br \/><a href=\"https:\/\/christophergs.com\/tutorials\/ultimate-fastapi-tutorial-pt-12-react-js-frontend\/\" target=\"_blank\" rel=\"noopener\">https:\/\/christophergs.com\/tutorials\/ultimate-fastapi-tutorial-pt-12-react-js-frontend\/<\/a><\/li>\n<li>Developing a Single Page App with FastAPI and React | TestDriven.io<br \/><a href=\"https:\/\/testdriven.io\/blog\/fastapi-react\/\" target=\"_blank\" rel=\"noopener\">https:\/\/testdriven.io\/blog\/fastapi-react\/<\/a><\/li>\n<li>GitHub &#8211; MehdiRtal\/nuxt-fastapi-template: Full-Stack modern web application template. WIP<br \/><a href=\"https:\/\/github.com\/MehdiRtal\/nuxt-fastapi-template\/tree\/main\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/MehdiRtal\/nuxt-fastapi-template\/tree\/main<\/a><\/li>\n<li>GitHub &#8211; junkei-okinawa\/hasura-postgres-fastapi-nuxtjs-vuetify: Template docker-compose.<br \/><a href=\"https:\/\/github.com\/junkei-okinawa\/hasura-postgres-fastapi-nuxtjs-vuetify\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/junkei-okinawa\/hasura-postgres-fastapi-nuxtjs-vuetify<\/a><\/li>\n<li>GitHub &#8211; Sakops\/Nuxtjs-with-FastAPI: implementing nuxtjs with FastAPI<br \/><a href=\"https:\/\/github.com\/Sakops\/Nuxtjs-with-FastAPI\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/Sakops\/Nuxtjs-with-FastAPI<\/a><\/li>\n<li>GitHub &#8211; rasheedjdh\/vuejs-nuxtjs-fastapi<br \/><a href=\"https:\/\/github.com\/rasheedjdh\/vuejs-nuxtjs-fastapi\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/rasheedjdh\/vuejs-nuxtjs-fastapi<\/a><\/li>\n<li>GitHub &#8211; it21024818\/CafeGreenRestuarentManagementSystem: Cafeteria Management System<br \/><a href=\"https:\/\/github.com\/it21024818\/CafeGreenRestuarentManagementSystem\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/it21024818\/CafeGreenRestuarentManagementSystem<\/a><\/li>\n<li>GitHub &#8211; TutorFx\/nuxtjs-fastapi: FastAPI &#038; Nuxt.js Boilerplate<br \/><a href=\"https:\/\/github.com\/TutorFx\/nuxtjs-fastapi\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/TutorFx\/nuxtjs-fastapi<\/a><\/li>\n<li>Three simple ways to run Vue.js along side FastAPI | by Jordan P. Raychev | CodeX | Medium<br \/><a href=\"https:\/\/medium.com\/codex\/how-to-integrate-fastapi-with-vuejs-ef6734b308fd\" target=\"_blank\" rel=\"noopener\">https:\/\/medium.com\/codex\/how-to-integrate-fastapi-with-vuejs-ef6734b308fd<\/a><\/li>\n<li>fastapi-vue\/services at main \u00b7 testdrivenio\/fastapi-vue \u00b7 GitHub<br \/><a href=\"https:\/\/github.com\/testdrivenio\/fastapi-vue\/tree\/main\/services\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/testdrivenio\/fastapi-vue\/tree\/main\/services<\/a><\/li>\n<li> Serve Vue from Fastapi in a breeze &#8211; dimmaski<br \/><a href=\"https:\/\/dimmaski.com\/serve-vue-fastapi\/\" target=\"_blank\" rel=\"noopener\">https:\/\/dimmaski.com\/serve-vue-fastapi\/<\/a><\/li>\n<li>Build an API App backed by FastAPI and Vue.js &#8211; Chaoran\u2019s Data Story<br \/><a href=\"https:\/\/www.ichaoran.com\/data-story\/visualization\/data-engineering\/fastapi-vue-app\/\" target=\"_blank\" rel=\"noopener\">https:\/\/www.ichaoran.com\/data-story\/visualization\/data-engineering\/fastapi-vue-app\/<\/a><\/li>\n<li>Build an AI-based Autocomplete in the Browser using Vue.js, FastAPI, and WebSockets | by Neeraj Krishna | Towards Data Science<br \/><a href=\"https:\/\/towardsdatascience.com\/build-an-ai-based-autocomplete-in-the-browser-using-vue-js-fastapi-and-websockets-1eb7ae19bfd8\" target=\"_blank\" rel=\"noopener\">https:\/\/towardsdatascience.com\/build-an-ai-based-autocomplete-in-the-browser-using-vue-js-fastapi-and-websockets-1eb7ae19bfd8<\/a><\/li>\n<li>How To Deploy Machine Learning Models Using Fast API | The Analytics Club<br \/><a href=\"https:\/\/www.the-analytics.club\/deploy-machine-learning-models-using-fast-api\/\" target=\"_blank\" rel=\"noopener\">https:\/\/www.the-analytics.club\/deploy-machine-learning-models-using-fast-api\/<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>I wonder if I did not make an error of judgment&#8230; As my objective remains to build a system likely to promote AI&#8217;s adoption, it&hellip; <\/p>\n<p class=\"text-center\"><a href=\"https:\/\/flaven.fr\/2024\/07\/building-a-vue-js-spa-single-page-application-frontend-with-fastapi-backend-for-ai-integration\/\" class=\"more-link\">Continue reading &rarr; <span class=\"screen-reader-text\">Building a Vue.js SPA (Single Page Application) Frontend with FastAPI Backend for AI Integration<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":12861,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"Build a Vue.js SPA frontend with FastAPI backend for seamless AI integration. Achieve robust tools and outcomes for AI adoption.","bf_ai_og_title":"Build Vue.js SPA with FastAPI","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[3438,3437,3444,3447,3448,3449,3450,3435],"tags":[2183,3169,3158,3160,3493,3168,3182,3180,2168,3161,3170,3040,3166,3159,3175,3167,3171,3181,3514,3163,3490,3106,2316,3176,3185,399,3179,3186,2793,3184,3164,3177,1291,2213,3165,3157,3178,3183,3174,3162],"class_list":["post-12859","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ai-machine-learning","category-business-case-studies","category-programming-databases","category-technology-trends","category-tools-productivity","category-tutorials-how-to","category-ux-product-design","category-web-development","tag-api","tag-axios","tag-backend","tag-boilerplate-codes","tag-clip","tag-creating","tag-data-binding","tag-data-fetching","tag-data-visualization","tag-databases","tag-display-data","tag-fastapi","tag-first-app","tag-frontend","tag-full-stack-development","tag-getting-started","tag-how-to-use","tag-http-requests","tag-mongodb","tag-page-reloading","tag-postgresql","tag-project","tag-python","tag-rest-api","tag-routing","tag-scaffolding","tag-single-page-application","tag-state-management","tag-streamlit","tag-template-engine","tag-user-action","tag-user-experience","tag-user-interface","tag-video","tag-vitejs","tag-vue-js","tag-web-application-framework","tag-web-components","tag-web-development","tag-whisper-transcript"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-3lp","jetpack_featured_media_url":"https:\/\/flaven.fr\/wp-content\/uploads\/2024\/07\/build_vue_js_on_fastapi_b.jpg","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/12859","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/comments?post=12859"}],"version-history":[{"count":14,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/12859\/revisions"}],"predecessor-version":[{"id":12886,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/12859\/revisions\/12886"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media\/12861"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=12859"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=12859"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=12859"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}