Vue.js es un framework Javascript para la construcción de interfaces HTML5 que lleva pegando muy fuerte desde hace unos años.

Por otro lado Thymeleaf es un motor de plantillas en servidor para generar aplicaciones HTML5 siguiendo el paradigma clásico MVC que por ejemplo implementa Spring.

Por su parte Spring Boot como framework de productividad sobre Spring tiene integraciones para trabajar con ambas tecnologías de forma muy sencilla.

En este post veremos cómo crear una aplicación web que une en la capa de presentación Thymeleaf y Vue, concretamente usando Thymeleaf como motor de plantillas y Vue.js como tecnología MVC en navegador.

Este post se basa en este ejemplo cuyo código podéis encontrar aquí.

Empezaré por crear el proyecto Maven al que añadiré el starter de thymeleaf:

Mi controlador tiene este aspecto:

Como voy a usar Thymeleaf como motor de plantillas crearé la plantilla index.html en src/main/resources/templates/

En la parte Thymeleaf, puedo pintar lo que me devuelve el controlador de forma directa:

Para empezar a usar Vue.js en la página añadiré estas 2 dependencias:

(https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js y https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js )

(usamos Babel como compilador para asegurar compatibilidad entre navegadores)

Para empezar a usar Vue una vez importado basta con crear un div

Y crear una aplicación Vue y atachearla a ese div:

Para completar la funcionalidad añadiré un atributo data a la aplicación Vue para almacenar mi array de datos (un JSON), es mi atributo data players:

Sólo queda crear un componente Vue (player-card) que renderice un jugador (este componente debe estar registrado antes de crear la aplicación Vue):

Para iterar sobre el componente player-card usaré la directiva Vue: v-for que itera sobre cada jugador en el atributo players

Si ejecuto mi aplicación (mvn spring-boot:run) puedo ver el resultado:

Y como se indica en el ejemplo:

“This is an example Vue.js application developed with Spring Boot.

Este archivo se procesa mediante un controlador por defecto de Spring para index.html (/) utilizando el motor de plantillas integrado en Spring Thymeleaf.

Aunque no lo necesitamos, personalizamos la información pasada a esta vista desde thymeleaf agregando un método de controlador para la ruta "/" para demostrar cómo pasar información de Thymeleaf a esta página. La combinación del motor de plantillas y el marco frontend como Vue puede hacer de este un enfoque potente para crear aplicaciones más complejas al tiempo que aprovecha los beneficios de un marco como Vue.js. También puede utilizar las funciones de thymeleaf, aunque este proyecto se centra principalmente en el uso de Vue.js en la interfaz como marco y hace un uso mínimo de Thymeleaf.

Además, no utilizamos ningún enrutamiento ni múltiples componentes en este ejemplo, por lo que lo que se ve es técnicamente una aplicación de una sola página (SPA) sin ninguna ruta configurada.