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

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:

• Vue 2
• Vue 2 Typescript
• Vue 3
• Vue 3 Typescript

– Backend: Spring Boot + H2: Rest API

Spring Boot + Vue.js + MySQL Github

Tutorial:
Spring Boot + Vue.js + MySQL: CRUD example

Github Source code:
– Frontend:

• Vue 2
• Vue 2 Typescript
• Vue 3
• Vue 3 Typescript

– Backend: Spring Boot + MySQL: Rest API

Spring Boot + Vue.js + PostgreSQL Github

Tutorial: Spring Boot + Vue.js + PostgreSQL: CRUD example

Github Source code:
– Frontend:

• Vue 2
• Vue 2 Typescript
• Vue 3
• Vue 3 Typescript

– Backend: Spring Boot + PostgreSQL: Rest API

Spring Boot + Vue.js + MongoDB Github

Tutorial: Spring Boot + Vue.js + MongoDB: CRUD example

Github Source code:
– Frontend:

• Vue 2
• Vue 2 Typescript
• Vue 3
• Vue 3 Typescript

– Backend: Spring Boot + MongoDB: Rest API

Spring Boot + Vue.js + Oracle Github

Github Source code:
– Frontend:

• Vue 2
• Vue 2 Typescript
• Vue 3
• Vue 3 Typescript

– Backend: Spring Boot + Oracle: Rest API

Spring Boot + Vue.js + Cassandra Github

Github Source code:
– Frontend:

• Vue 2
• Vue 2 Typescript
• Vue 3
• Vue 3 Typescript

– Backend: Spring Boot + Cassandra: Rest API

Spring Boot + Vue.js + SQL Server Github

Github Source code:
– Frontend:

• Vue 2
• Vue 2 Typescript
• Vue 3
• Vue 3 Typescript

– 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:

• Vue 2
• Vue 2 with Typescript
• Vue 3

– Backend:

• Spring Boot + MySQL
• Spring Boot + PostgreSQL
• Spring Boot + MongoDB

– 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.