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)

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:

spring-boot-vue-js-github-crud-create

– Retrieve Tutorials:

spring-boot-vue-js-github-crud-retrieve

– Click on Edit button to go to a Tutorial page:

spring-boot-vue-js-github-crud-retrieve-update

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:

spring-boot-vue-js-github-crud-search

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

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.

You may also like...

Leave a Reply

Your email address will not be published.