'integrate new Vue js 3 app to spring boot/thymeleaf application

I already have an application built with spring boot/thymeleaf as a template engine and everything is working fine, now I need to add new section to the application I need to build it with Vue js 3, I would like to make it inside my development environment and also to be able to deploy it with my main app into tomcat server and of course load it from inside my original app.

So for now In "src" I created new vue app using vue-cli I only changed the port to 8888:

enter image description here

I can explore it at localhost:8888 and it is working, this is main.js:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

and of course the default app.vue:

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Also I created thymeleaf file vueapp.html and a controller to route me to it:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org"
    xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<body>
    <div id="wrapper">
        <div id="page-content-wrapper">
            <div id="app"></div>
        </div>
    </div>

    <script
        th:if="${#arrays.contains(@environment.getActiveProfiles(),'dev')}"
        src="http://localhost:8888/dist/build.js"></script>
    <script
        th:if="${!#arrays.contains(@environment.getActiveProfiles(),'dev')}"
        src="/static/js/build.js"></script>

</body>
</html>

    @GetMapping("/vue")
    public String vueApp(ModelMap model, HttpSession session) {
        
        return "user/vueapp";
    }

The thymeleaf already Loaded, the build.js also loaded but Vue app content is not loaded the page still empty and the div with id="app" also empty

enter image description here

Can any one help me with the best practice to integrate the vue app with thymeleaf

Note: I will need vue-router later, I followed this , Thank you.

spring-bootvue.jsthymeleafvuejs3


Solution 1:[1]

If using vue.js is simple, I recommend doing the following:

  1. Remove Vue from your project.

  2. Add the follow dependencies:

    • org.webjars.npm » vue » 3.x.x
    • org.webjars » webjars-locator

  3. Configure the location about your resources adding this in .properties file:

    • spring.thymeleaf.prefix=file:src/main/resources/templates/
    • spring.web.resources.static-locations=file:src/main/resources/static/

  4. Now you should re-locate your main.js into static location, for example: src/main/resources/static/js/main.js and remember called to Vue.createApp

  5. Now you should re-locate your vueapp.html into templates location, for example: src/main/resources/templates/vueapp.html

For more specific detail please visit this github project: thymeleaf-vue3-webflux Now if you have a big app I recommend kill the monolithic, you should create front and back separate.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions