title: integrate new Vue js 3 app to spring boot/thymeleaf application
body: <p>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.</p>
  <p>So for now In &quot;src&quot; I created new vue app using vue-cli I only changed the port to 8888:</p>
  <p><a href="https://i.stack.imgur.com/aGH0h.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aGH0h.png" alt="enter image description here" /></a></p>
  <p>I can explore it at localhost:8888 and it is working, this is main.js:</p>
  <pre class="lang-js prettyprint-override"><code>import { createApp } from 'vue'
  import App from './App.vue'
  
  createApp(App).mount('#app')
  
  </code></pre>
  <p>and of course the default app.vue:</p>
  <pre><code>&lt;template&gt;
    &lt;img alt=&quot;Vue logo&quot; src=&quot;./assets/logo.png&quot;&gt;
    &lt;HelloWorld msg=&quot;Welcome to Your Vue.js App&quot;/&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import HelloWorld from './components/HelloWorld.vue'
  
  export default {
    name: 'App',
    components: {
      HelloWorld
    }
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  #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;
  }
  &lt;/style&gt;
  
  </code></pre>
  <p><strong>Also</strong> I created thymeleaf file vueapp.html and a controller to route me to it:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;
      xmlns:th=&quot;http://www.thymeleaf.org&quot;
      xmlns:sec=&quot;http://www.thymeleaf.org/thymeleaf-extras-springsecurity3&quot;&gt;
  &lt;body&gt;
      &lt;div id=&quot;wrapper&quot;&gt;
          &lt;div id=&quot;page-content-wrapper&quot;&gt;
              &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script
          th:if=&quot;${#arrays.contains(@environment.getActiveProfiles(),'dev')}&quot;
          src=&quot;http://localhost:8888/dist/build.js&quot;&gt;&lt;/script&gt;
      &lt;script
          th:if=&quot;${!#arrays.contains(@environment.getActiveProfiles(),'dev')}&quot;
          src=&quot;/static/js/build.js&quot;&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <pre class="lang-java prettyprint-override"><code>    @GetMapping(&quot;/vue&quot;)
      public String vueApp(ModelMap model, HttpSession session) {
          
          return &quot;user/vueapp&quot;;
      }
  </code></pre>
  <p>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=&quot;app&quot; also empty</p>
  <p><a href="https://i.stack.imgur.com/5G7uC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5G7uC.png" alt="enter image description here" /></a></p>
  <p>Can any one help me with the best practice to integrate the vue app with thymeleaf</p>
  <p><strong>Note:</strong> I will need vue-router later, I followed <a href="https://www.inmensys.com/blog/spring-boot-and-vuejs/" rel="nofollow noreferrer">this</a> , Thank you.</p>