Building a front-end with Vue.js and Axios for Spring Boot REST Applications

In this tutorial we will learn how to create a basic front-end with Vue.js and Axios to access a Spring Boot REST Service.

Vue.js is one of the most widely used JavaScript frames for creating web interfaces and single page applications. This guide covers a basic example of a Spring Boot application which uses Vue.js and Axios as front-end

First of all, we need a Spring Boot project which has the following dependencies:

  <parent>     <groupId>org.springframework.boot</groupId>     <artifactId>spring-boot-starter-parent</artifactId>     <version>2.1.9.RELEASE</version>     <relativePath/> <!-- lookup parent from repository -->   </parent>   <groupId>com.example</groupId>   <artifactId>demo-vue</artifactId>   <version>0.0.1-SNAPSHOT</version>   <name>demo</name>   <description>Demo project for Spring Boot</description>    <properties>     <java.version>1.8</java.version>   </properties>    <dependencies>     <dependency>       <groupId>org.springframework.boot</groupId>       <artifactId>spring-boot-starter-web</artifactId>     </dependency>      <dependency>       <groupId>org.springframework.boot</groupId>       <artifactId>spring-boot-starter-test</artifactId>       <scope>test</scope>     </dependency>     <dependency>       <groupId>org.springframework.boot</groupId>       <artifactId>spring-boot-test</artifactId>     </dependency>     <dependency>       <groupId>org.springframework.boot</groupId>       <artifactId>spring-boot-starter-thymeleaf</artifactId>     </dependency>     <dependency>       <groupId></groupId>       <artifactId>rest-assured</artifactId>       <version>3.0.7</version>       <scope>test</scope>     </dependency>   </dependencies> 

Then, we will add the following Classes to our Project:

A Class:

package com.example.testrest;

public class Customer {
  private int id;
  private String name;
  private String surname;

  public String getSurname() {
    return surname;

  public void setSurname(String surname) {
    this.surname = surname;

  public Customer(int id, String name, String surname) {
    super(); = id; = name;
    this.surname = surname;

  public String getName() {
    return name;

  public void setName(String name) { = name;

  public int getId() {
    return id;

  public void setId(int id) { = id;

A Class:

package com.example.testrest;

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

public class CustomerController {
  @Autowired CustomerRepository repository;

  public List<Customer> findAll() {
    return repository.getData();

  public Customer findOne(@PathVariable int id) {
    return repository.getData().get(id);

A Class:

package com.example.testrest;

import org.springframework.stereotype.Component;
import javax.annotation.PostConstruct;
import java.util.ArrayList;
import java.util.List;

public class CustomerRepository {
  List<Customer> customerList = new ArrayList<Customer>();

  public void init() {
    customerList.add(new Customer(1, "Fred", "Flinstone"));
    customerList.add(new Customer(2, "Barney", "Rubble"));
    customerList.add(new Customer(2, "Wilma", "Flinstone"));
    customerList.add(new Customer(2, "Bettey", "Rubble"));
    customerList.add(new Customer(2, "Bamm", "Bamm"));

  public List<Customer> getData() {
    return customerList;

And a Class:

package com.example.testrest;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

public class DemoApplication {
  public static void main(String[] args) {, args);

Within the resources/templates folder, we will add the following index.html page which uses a combination of Vue.js and Axios to iterate over the list of Customer:

	<div id="app">
		<table class="blueTable">
			<thead >
				<tr v-for="user in users" :key="">
	<script src=""></script>
	<script src=""></script>
	<script> new Vue({   el: "#app",   data() {     return {       users: []     }   },   mounted: function() {       axios         .get('http://localhost:8080/list')         .then(response => {           this.users =         })         .catch(function (error) {           console.log(error);         })     } }) </script> 

Run the Application with:

mvn install spring-boot:run 

And here’s our Vue.js and Axios front-end in action:

Vue.js axios spring boot tutorial

That’s it. Enjoy your Spring Boot + Vue.js + Axios application!

Source code for this tutorial: