Using Vue in Pages

The vue javascript framework can be added to the JPF pages to make them more dynamic.

Including vue into your page

To include vue into your page consists of 3 steps. First you need to define which DOM node vue will be watching. For example:

<div id="app">
</div>

Then you need to include the vue.min.js file in the page:

<th:block layout:fragment="javascript">
  <script type="text/javascript" th:src="@{/libs/vue/vue.min.js}"></script>
</th:block>

After that you need to declare your script tag with thymeleaf javascript tags enabled:

<script th:inline="javascript">
  /*<![CDATA[*/
    var app = new Vue({
       el: '#app',
    });
  /*]]>*/
</script>

Example above declares the vue app DOM on the #app div.

Using thymeleaf variables in a vue variable

To use thymeleaf variables and methods, you need to put it in a special tag. For example:

var turl = /*[[@{/json/company/query}]]*/;

The example above uses the thymeleaf function @ to create a link to the given path. Note the opening and closing tags using slash star and 2 square brackets.