Integrate vuejs in existing JSF application

In this post we will see how to integrate some vueJs application using JSF and Spring Rest Controller as backend.

Add Spring Rest API support

Add Spring MVC into dependencies.


Add Spring dispatcher in WEB-INF/web.xml



Create WEB-INF/spring-servlet.xml

<?xml version="1.0" encoding="UTF-8"?>

<beans xmlns=""
       xmlns:mvc="" xmlns:xsi=""

    <context:component-scan base-package=""/>


Create Spring Rest endpoint


import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

public class HelloRestApi {

    @RequestMapping(value = "/hello/{name}", method = RequestMethod.GET)
    public String sayHelloTo(@PathVariable("name") String name) {
        return "Hello "+ name;

Create xhtml page with vuejs application calling rest API

In order to support to v-bind "v-bind" or "v-on" you can add xmlns:v-bind="" and xmlns:v-on="".

<!DOCTYPE html>
<html xmlns="" xmlns:h=""

        <script src=""></script>
        <script src=""></script>
        <div id="app">
            <div>Saying : {{hello}}</div>
                <input v-model="name"/>
                <button v-on:click="sayHello">Say</button>

            //Configuration injection from JSF
            let baseApi = '#{request.contextPath}'
            var app = new Vue ({
                el: '#app',
                data() {
                    return {
                        hello: '',
                        name: 'world'
                mounted() {
                    this.sayHello ()
                methods: {
                    sayHello() {

                        axios.get (baseApi + '/rest/api/hello/' +
                            .then (response => {
                                this.hello =
                            .catch (error => {
                                console.log (error)