Vue + Spring Boot: How I Built My First Full-Stack Connection
Bridging the gap between Vue and Spring Boot with clarity and simplicity. A beginner-friendly path to full-stack development
Building a frontend is exciting. Building a backend feels powerful.
But connecting both?
That’s where things start to feel confusing.
When I first tried integrating Vue with Spring Boot, I expected it to “just work.”
Instead, I ran into issues like APIs not responding, CORS errors, and unclear data flow.
In this blog, I’ll walk you through how I connected a Vue app with a Spring Boot backend — in a simple, beginner-friendly way.
🧱 Tech Stack
- Frontend: Vue (with Vite)
- Backend: Spring Boot
- Communication: REST API
⚙️ Step 1: Create Spring Boot Backend
Start with a simple REST API.
@RestController
@RequestMapping("/api")
public class MessageController {
@GetMapping("/message")
public String getMessage() {
return "Hello from Spring Boot!";
}
}
Run your Spring Boot app.
It will be available at:
http://localhost:8080/api/message
If you open this in your browser, you should see:
«Hello from Spring Boot!»
🎨 Step 2: Create Vue Frontend
Create a Vue project using Vite:
npm create vite@latest
cd your-project-name
npm install
npm run dev
Your app will run at:
🔗 Step 3: Connect Vue to Spring Boot
Now comes the important part — calling the backend API from Vue.
Inside your Vue component:
import { ref, onMounted } from "vue";
export default {
setup() {
const message = ref("");
onMounted(async () => {
const res = await fetch("http://localhost:8080/api/message");
message.value = await res.text();
});
return { message };
}
};
In your template:
<template>
<h1>{{ message }}</h1>
</template>
🚫 Step 4: Fix CORS Error (Very Important)
If you try this now, you’ll likely get a CORS error.
This happens because:
- Vue runs on "localhost:5173"
- Spring Boot runs on "localhost:8080"
👉 Different origins = blocked by browser
✅ Fix it in Spring Boot:
@CrossOrigin(origins = "http://localhost:5173")
@RestController
@RequestMapping("/api")
public class MessageController {
@GetMapping("/message")
public String getMessage() {
return "Hello from Spring Boot!";
}
}
Now refresh your Vue app — it should work perfectly.
✅ Final Output
If everything is set up correctly, your Vue app will display:
Hello from Spring Boot!
🧠 What I Learned
- Frontend and backend don’t “automatically connect” — APIs are the bridge
- CORS is not a bug — it’s a browser security feature
- Keeping things simple helps understand the flow better
🔥 Key Takeaways
Use REST APIs to connect frontend and backend
Always handle CORS when working locally
Test your backend separately before integrating
Start small before building complex features
🚀 What’s Next?
Once you understand this setup, try building:
- A simple login system
- A todo app
- A user dashboard
These small projects will help you truly understand full-stack development.
Closing Thoughts
Connecting Vue with Spring Boot felt confusing at first, but once I understood the flow, it became much easier.
"Clean integrations come from clear understanding — not complex code"
If you found this helpful, I’ll be sharing more real-world dev learnings in future logs 🚀
