Spring Boot + Vue.js example | Spring Data JPA + REST + MySQL CRUD


In this tutorial, we show you Vue.js Http Client & Spring Boot Server example that uses Spring JPA to do CRUD with MySQL and Vue.js as a front-end technology to make request and receive response.

Related Posts:
How to use Spring JPA MySQL | Spring Boot
Vue Router example – with Nav Bar, Dynamic Route & Nested Routes


– Java 1.8
– Maven 3.3.9
– Spring Tool Suite – Version 3.8.4.RELEASE
– Spring Boot: 2.0.5.RELEASE

– Vue 2.5.17
– Vue Router 3
– Axios 0.18.0


This is full-stack Architecture:



1. Spring Boot Server


2. Vue.js Client



1. Spring Boot Server


Customer class corresponds to entity and table customer.
CustomerRepository is an interface extends CrudRepository, will be autowired in CustomerController for implementing repository methods and custom finder methods.
CustomerController is a REST Controller which has request mapping methods for RESTful requests such as: getAllCustomers, postCustomer, deleteCustomer, findByAge, updateCustomer.
– Configuration for Spring Datasource and Spring JPA properties in application.properties
Dependencies for Spring Boot and MySQL in pom.xml

1.1 Dependency

1.2 Data Model


1.3 JPA Repository


1.4 REST Controller


1.5 Configuration for Spring Datasource & JPA properties


2. Vue.js Client


package.json with 3 main modules: vue, vue-router, axios.
– 4 components: CustomersList, Customer, AddCustomer, SearchCustomer.
router.js defines routes, each route has a path and maps to a component.
http-common.js initializes HTTP Client with baseUrl and headers for axios HTTP methods.
vue.config.js configures port for Vue App.

For more details about how to use Vue Router in this example, please visit:
Vue Router example – with Nav Bar, Dynamic Route & Nested Routes

2.0 Setup Vue Project & Router
Init Project

Point cmd to the folder you want to save Project folder, run command:
vue create vue-springboot

You will see 2 options, choose default:


Add Vue Router to Project

– Run command: npm install vue-router.
– Import router to src/main.js:

Define Routes


App template with Navbar and router-view


2.1 Initialize HTTP Client

Install axios with command: npm install axios.
Then create http-common.js file:

2.2 Components
List of Items


Item Details


Add Item


Search Items


2.3 Configure Port for Vue App



– Spring Boot Server: mvn clean install and mvn spring-boot:run.
– Vue.js Client: npm run serve.

Open Browser with Url: http://localhost:4200/.

Source Code


By grokonez | September 16, 2018.

Last updated on April 10, 2020.

Related Posts

13 thoughts on “Spring Boot + Vue.js example | Spring Data JPA + REST + MySQL CRUD”

  1. This tutorial doesn’t contain the css configuration like “class = button is-small btn-danger”, class=”btn btn-primary”.
    Could you tell me how to make them, cause I can’t show the button and click them to delete…

    1. Hi xuanning meng,

      You can add Bootstrap to public/index.html with one line of code:


  2. hi,

    your tutorial is real good,but i got a problem,wath kind a project should i create in STS,becouse i created a spring boot project with web,jpa,mysql,but i still i get not added the hibernate.jpa dependency,and even so cant make it run. Your example i did make it run ,and i was able to persiste on the mysql db,but when i create a spring project for my own i can’t make functioned,can you help me


  3. Hi, Grokonez, I was finally able to create a project and make it run locally like your example!!
    change this:


    to this:


    Could you make a tutorial to deploy this example on heroku,please? you already got one but with postgres db instead mysql,thanks again,
    happy new year!!

  4. Thanks for the tutorial. Its really nice.

    Question- How would you save the customer if the customer had a composite property say Contact as an object with OneToOne mapping. (is it possible to create the contact object with fields like Tel, email, adress in view and the before save, say customer.contact= contact? contact ==object of type Contact?

  5. Hi,
    Your tutorial was very interesting but when i run the project i got two problems, the first one related to the CORS policy and the second is: Failed to load resource: the server responded with a status of 404 (Not Found) 8080/api/customers
    How can i fix that ? thank you

Got Something To Say:

Your email address will not be published. Required fields are marked *