title: Vue mixing library and app builds, how to handle Vue instance?
body: <p>When we started with Vue, we've built all our components as libraries and included Vue runtime in the HTML head and had a stupid root instance around the whole body, so we could just use our custom tags wherever we wanted. To optimize the build process and general code cleanup, I now wanted to change this to an app build, which is the default for VueCLI. The problem is, we have two large third party components: <a href="https://github.com/xaksis/vue-good-table" rel="nofollow noreferrer">VueGoodTable</a> and <a href="https://tiptap.dev/" rel="nofollow noreferrer">tiptap (an RTE)</a>, the latter with some customization. So to keep the vendor-chunk small, I wanted to keep these two as two separate libraries as they are not needed everywhere.</p>
  <p>Now the problem is, that these libraries need a global Vue, so they can register themselves also globally. For VGT, we have a small wrapper (also because we use TypeScript):</p>
  <pre><code>import Vue from 'vue';
  import 'vue-good-table/dist/vue-good-table.css';
  import '@/assets/vue-good-table-custom.css';
  const VueGoodTable: any = {
      'vue-good-table': require('vue-good-table').VueGoodTable,
  };
  Vue.component('VueGoodTable', VueGoodTable);
  </code></pre>
  <p>We also have some global filters so I thought I can just expose Vue there as well:</p>
  <pre><code>import Vue from 'vue';
  import dayjs from 'dayjs';
  
  import './assets/global.css';
  
  Vue.filter('formatDate', (dateStr: string) =&gt; {
      if (dateStr) {
          return dayjs(dateStr).format('DD.MM.YYYY HH:mm');
      }
  });
  Vue.filter('displayUser', (userObj: any) =&gt; {
      if (userObj) {
          if (userObj.firstName &amp;&amp; userObj.lastName) {
              return userObj.firstName + ' ' + userObj.lastName;
          }
          return userObj.email;
      }
  });
  
  window.Vue = Vue;
  </code></pre>
  <p>For some reason this works on one page but not the others; <code>Cannot read property 'component' of undefined</code> where we do this: <code>Vue.component('VueGoodTable', VueGoodTable);</code></p>
  <p>Two questions:</p>
  <ol>
  <li>Is this the correct way to expose Vue globally?</li>
  <li>Is there a way to exclude Vue from the app build like it is for library builds? I found an option to include Vue in the library build, but not the other way round.</li>
  </ol>
  <p>Any other suggestions on how to handle this are welcome as well.</p>
  <p>EDIT:
  I found out why it was not working, the vue.config.js was different for the one page that was working. But I'll keep the question open as I'd like to know &quot;better&quot; ways to handle this.</p>