Spring Boot with Vue.js
In this post, I will show you some examples that use Spring Boot with Vue.js for full-stack application. You will see Github links for making following projects:
- Spring Boot + Vue + Embedded database (H2)
- Spring Boot + Vue + MySQL
- Spring Boot + Vue + PostgreSQL
- Spring Boot + Vue + MongoDB
- Spring Boot + Vue + Oracle
- Spring Boot + Vue + Cassandra
- Spring Boot + Vue + SQL Server (MSSQL)
- Spring Boot + Vue: JWT Authentication and Authorization
Contents
- Overview
- How to Run
- Spring Boot + Vue + Embedded database Github
- Spring Boot + Vue + MySQL Github
- Spring Boot + Vue + PostgreSQL Github
- Spring Boot + Vue + MongoDB Github
- Spring Boot + Vue + Oracle Github
- Spring Boot + Vue + Cassandra Github
- Spring Boot + Vue + SQL Server Github
- Spring Boot + Vue JWT Authentication & Authorization Github
- Run Vue and Spring Boot on same Port
Overview
The Github source code shows many full stack Spring Boot + Vue.js examples with CRUD Operations. The back-end server uses Spring Boot with Spring Web MVC for REST Controller and Spring Data for interacting with databases. Front-end side is made with Vue 2/Vue 3/Vue Typescript, Vue Router and Bootstrap.
Each of them is the Tutorial CRUD Application in that:
- Each Tutorial has id, title, description, published status.
- We can create, retrieve, update, delete Tutorials.
- We can also find Tutorials by title.
The images below shows screenshots of our System.
– Add Tutorial:
– Retrieve Tutorials:
– Click on Edit button to go to a Tutorial page:
On this Page, you can:
- change status to Published using Publish button
- delete the Tutorial using Delete button
- update the Tutorial details with Update button
– Search Tutorials by title:
How to Run
Spring Boot server:
Open command line at the project root folder, run:
mvn spring-boot:run
The Spring Application will export Rest APIs at port 8080
, CORS configuration for working with port 8081
.
Vue.js Client:
On Vue project root folder, create .vue.config.js file with content:
module.exports = { devServer: { port: 8081 } }
Choose Vue Github source code as you need.
Open command line at the project root folder, run:
npm install npm run serve
Spring Boot + Vue.js + Embedded database Github
Spring Boot + Vue.js + H2: CRUD example
Github Source code:
– Frontend:
– Backend: Spring Boot + H2: Rest API
Spring Boot + Vue.js + MySQL Github
Tutorial:
Spring Boot + Vue.js + MySQL: CRUD example
Github Source code:
– Frontend:
– Backend: Spring Boot + MySQL: Rest API
Spring Boot + Vue.js + PostgreSQL Github
Tutorial: Spring Boot + Vue.js + PostgreSQL: CRUD example
Github Source code:
– Frontend:
– Backend: Spring Boot + PostgreSQL: Rest API
Spring Boot + Vue.js + MongoDB Github
Tutorial: Spring Boot + Vue.js + MongoDB: CRUD example
Github Source code:
– Frontend:
– Backend: Spring Boot + MongoDB: Rest API
Spring Boot + Vue.js + Oracle Github
Github Source code:
– Frontend:
– Backend: Spring Boot + Oracle: Rest API
Spring Boot + Vue.js + Cassandra Github
Github Source code:
– Frontend:
– Backend: Spring Boot + Cassandra: Rest API
Spring Boot + Vue.js + SQL Server Github
Github Source code:
– Frontend:
– Backend: Spring Boot + SQL Server: Rest API
Spring Boot + Vue.js Authentication Github
– Tutorial: Spring Boot + Vue: JWT Authentication and Authorization
Github Source code:
– Frontend:
– Backend:
– Video:
How to run Vue.js and Spring Boot on same Port
Assume that we have 2 projects: Vue.js & Spring Boot.
If we run them separately:
- Spring Boot Server exports Rest Apis at Url:
http://localhost:8080/
- Vue Client runs at url:
http://localhost:8081/
Otherwise, when deploying Vue production-build with Spring Boot project, we only need to run Spring Boot Project for the fullstack (Vue + Spring Boot) system.
In this example, we access http://localhost:8080/
for the UI.
You can find step by step instruction at How to integrate Vue.js with Spring Boot.