sequence diagram - vue and express

title Express and Vue


participantgroup SERVER 
participant Vue app files
database Database
participant API Server
participant Express Server
end 

participantgroup CLIENT (browser)
participant Web Browser
participant JavaScript Interpreter
end 
 
Web Browser->Express Server:++Web page, please++
Express Server->Vue app files: ++Get Vue app++
Vue app files-->Express Server: ++Here's the Vue app files++



Web Browser<-Express Server:++Here's a Vue app with HTML, JS and CSS++
Web Browser->JavaScript Interpreter:++Start running JavaScript++

note over JavaScript Interpreter: ++Create Vue App++

JavaScript Interpreter->JavaScript Interpreter: ++load content into browser++
JavaScript Interpreter->JavaScript Interpreter: ++Here's an API call++

JavaScript Interpreter->Express Server:++API request++
Express Server->API Server: ++API request++
API Server->Database:++Data, please++
Database-->API Server:++Here's the data++
API Server-->Express Server: ++JSON response with data++
Express Server-->JavaScript Interpreter: ++Here's your data as JSON++
JavaScript Interpreter->JavaScript Interpreter: ++Thanks, I'll display on page++