title: Use Vue router only for specific subpages of Spring MVC-App
body: <p>we've got an Spring Boot application which mainly uses Spring MVC to serve thymeleaf templates. Additionally, we needed to get more dynamic and reactivity, so we decided using Vue as a multi app approach: Some pages just contains a simple vue component and much static rendered html served from the thymeleaf template. Other pages are fully implemented as a vue app.</p>
  <p><strong>This is the flow</strong>: Thymleaf rendered HTML is given to the client and vue can hook into it creating the page built with vue.</p>
  <p>Calling <code>myapp.com/pageOne</code>:</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// pageOne.js
  import { createApp } from "vue";
  import PageOne from "./PageOne.vue";
  
  const app = createApp(PageOne);
  app.mount("#app");</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- thymeleaf template served by spring mvc --&gt;
  &lt;body&gt;
    &lt;main id="app"/&gt;
  &lt;/body&gt;
  &lt;script src="/js/pageOne.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Calling <code>myapp.com/pageTwo</code>:</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// pageTwo.js
  import { createApp } from "vue";
  import PageTwo from "./PageTwo.vue";
  
  const app = createApp(PageTwo);
  app.mount("#app");</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;main id="app"/&gt;
  &lt;/body&gt;
  &lt;script src="/js/pageTwo.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>This multi page application approach is working nicely! However more and more vue-served pages are created. To get even more benefits from vue, <strong>I'll try to convert this Multi Page Application into a Single Page Application using vue-router</strong>. Therefore I do not need multiple vue apps, but only one. My approach is to load <code>main.js</code> with <em>every</em> thymleaf template:</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// main.js
  import { createApp } from "vue";
  import router from "./router";
  import App from "./App.vue";
  
  const app = createApp(App);
  app.use(router); // use router, configured with PageOne and PageTwo
  app.mount("#app");</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;main id="app"/&gt;
  &lt;/body&gt;
  &lt;script src="/js/main.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>This is also working. Now I've got the problem that if I'm calling a thymeleaf only page, the vue app is also mounted and rendering its content into <code>&lt;main&gt;</code>-Tag. However, this is not desired, I need some mechanism to only mount my vue-app if its not a thymeleaf page but a page which is known by the vue-router. I think a possible could look like this:</p>
  <pre class="lang-js prettyprint-override"><code>// main.js
  import { createApp } from &quot;vue&quot;;
  import router from &quot;./router&quot;;
  import App from &quot;./App.vue&quot;;
  
  const app = createApp(App);
  app.use(router); // use router, configured with PageOne and PageTwo
  
  // if its a thymleaf only page, we dont need to mount the vue app!
  if (isPageServedByPage) {
     app.mount(&quot;#app&quot;);
  }
  </code></pre>
  <p>How can i determine <code>isPageServedByPage</code>? Could I look at what routes were defined at my router? Are there other approaches?</p>
  <p>I apologize for this wall of text :)</p>