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 as front-end

Start by creating a new project which includes the web dependencies:

$  spring init -dweb,thymeleaf demo-vue

The following dependencies will be included:

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

Our basic REST Application composed of the following components:

An application class:

package com.example.testrest;

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

@SpringBootApplication
public class DemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }

}

A Controller Class:

package com.example.testrest;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;


@RestController
public class CustomerController
{
    @Autowired
    CustomerRepository repository;
    
    @RequestMapping("/list")
    public List<Customer> findAll()
    {
        return repository.getData();
    }

    @RequestMapping("/one/{id}")
    public Customer findOne(@PathVariable int id)
    {
        return repository.getData().get(id);

    }
}

A Repository Class:

package com.example.testrest;

import org.springframework.stereotype.Component;

import javax.annotation.PostConstruct;
import java.util.ArrayList;
import java.util.List;
@Component
public class CustomerRepository {
    List<Customer> customerList = new ArrayList<Customer>();

    @PostConstruct
    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 POJO:

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();
        this.id = id;
        this.name = name;
        this.surname = surname;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

}

And this is our index.html pages, which is placed under resources/templates and creates dynamically a Table from the JSON Data of our Spring Boot Service:

<div id="app">
    <div v-html="userTable"></div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script>
// register the grid component
new Vue({
  el: '#app',
  data: {
    users: []
  },
  computed: {
    userTable() {
      // actually inserting the HTML in the template
      return this.createTable(this.users)
    }
  },
  methods: {
    getUsers() {
      // getting JSON data from API
      return new Promise((resolve, reject) => {
        const users = fetch('http://localhost:8080/list')
          .then(response => response.json())
          .then(json => {
            resolve(json)
          })
      })
    },
    userRowHtml(user) {
      // creating a single table row of user data
      if (user) {
        let html = ''
        Object.entries(user).forEach(e => {
            html += `<td>${e[1]}</td>`
        })
        return html
      }
      return ''
    },
    userRows(users) {
      // creating the table rows for user data
      if (users && users.length) {
        let html = ''
        users.forEach(e => {
          html += `<tr>${this.userRowHtml(e)}</tr>`
        })
        return html
      }
      return ''
    },
    createTable(users) {
      // creating the table to insert
      if (users && users.length) {
        const headers = Object.keys(this.users[0])
        let html = ''
        html += '<table class="blueTable"><thead><tr>'
        headers.forEach(e => {
          html += `<th>${e}</th>`
        })
        html += '</tr></thead>'
        html += '<tbody>'
        html += this.userRows(users)
        html += '</tbody></table>'
        return html
      }
      return ''
    }
  },
  async mounted() {
    this.users = await this.getUsers()
  }
})

</script>
</body>

Build and run the application with:

$ mvn install spring-boot:run

Here is our first Vue.js application running with a Spring Boot Service:

Vue.js spring boot tutorial

FREE WildFly Application Server - JBoss - Quarkus - Drools Tutorials