CODEWITHSUNDEEP
vuejs3thymeleafvuetify.jsvitevuetifyjs3
AlexeiP
AlexeiP

Reputation: 653

Vuetify Vue 3 app integrated with Thymeleaf not rendering

I'm trying to insert Vuetify Vue 3 app as a widget into Thymeleaf template. The Thymeleaf template loads successfully, and I can see my Vue app being initialized in the browser console. However, the Vue app does not render.

Thymeleaf page

<!DOCTYPE html>  
<html class="h-100" lang="en">  
<head>  
<meta charset="UTF-8">  
<title>ThymeLeaf client</title>  
<link rel="stylesheet" href="/webjars/bootstrap/5.3.2/css/bootstrap.min.css">  
<script type="module" async crossorigin src="/main.bundle.js"></script>  
<link rel="stylesheet" href="/assets/index.37be1ef8.css">  
</head>  
<body class="d-flex flex-column h-100">  
    <div th:replace="~{fragments/header :: header}"></div>  
    <div th:replace="~{fragments/homeContent :: content}"></div>  
    <div id="app"></div>  
    <div th:replace="~{fragments/footer :: footer}"></div>  
      
    <script src="/webjars/bootstrap/5.3.2/js/bootstrap.min.js"></script>  
</body>  
</html>

where <div id="app"></div> is a div to mount vuetify app.

I noticed in chrome devtools that <div id="app"></div> transformed to <div id="app" data-v-app=""><!----></div>. That means that vue start loading vue app into this element but stops without any error messages.

Also I add console log output in vuetify project where app bootstrapped and see the output

registerPlugins
registerPlugins::loadFonts()
registerPlugins::use plugins
before app.mount('#app') {_uid: 0, _component: {…}, _props: null, _container: null, _context: {…}, …}
App.vue
app.mount('#app') completed

Moreover, in terminal I open backend/target/classes/static folder where vuetify application generate all js/css assets and start http-server. then in browser open http://localhost:8080/ and my app is loaded correctly.

Before moving to Vuetify app I did same steps with plain Vue 3 app generated with VueCLI and everything where just fine (the only difference is that plain Vue3 app built with webpack and VueCLI while Vuetify use Vite to build the bundle).

Any idea what to try next?

Update: I've noticed a message in the console

repairOnline:1 Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

PS. Yes, I'm aware that it is better to build backend and frontend apps as separate projects. For now, this is the tactic step to introduce modern UI into big legacy project.

Upvotes: 0

Views: 185

Answers (1)

feeecatz
feeecatz

Reputation: 89

  1. before :

enter image description here

  1. after :

enter image description here

  1. please, html tag add attribute

xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"

Upvotes: 1

Related Questions