title: Vue: Component for specific pages only
body: <p>I am using Vue.js (2) in my Symfony project and currently have my Vue instance with &quot;global&quot; components (in my case called Editor with some CKEditor libraries) precompiled with the default symfony webpack.</p>
  <pre><code>//app.js
  import Vue from 'vue';
  import Editor from './components/Editor';
  
  new Vue({
      el: '#app',
      components: {Editor}
  });
  </code></pre>
  <pre><code>//components/Editor.vue
  &lt;template&gt;
      &lt;div&gt;
          &lt;textarea id=&quot;editor&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
  import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
  import Heading from '@ckeditor/ckeditor5-heading/src/heading';
  //tons of other imports 
  
  export default {
      name: &quot;Editor&quot;,
      mounted() {
          ClassicEditor.create(document.querySelector('#editor'), 
              plugins: [
                  Essentials,
                  Heading,
                  //more plugins used from imports
              ],
              toolbar: [
                  'heading',
                  //more plugins
              ],
          }).then(editor =&gt; {
             
          }).catch(error =&gt; {
             
          });
      }
  }
  &lt;/script&gt;
  </code></pre>
  <p>Since I only have one Vue instance and those include every component by default, my <code>Editor.vue</code> can be used globally. However this means, that my <code>Editor.vue</code> is actually loaded by default on every page request - even if you do not need the editor at all.</p>
  <p>Now the editor itself has many imports (because I customize it quite a lot). This leads to a quite big javascript file containting everything - which again increases loading times.</p>
  <p>My goal is to remove the global component <code>Editor</code> somehow and embed it in another javascript file called <code>editor.js</code>. This file can later on be included on specific pages.</p>
  <p>However I am unsure on how to achieve that. My Vue instance is created inside my <code>app.js</code> and I somehow need to add the Editor component in my <code>editor.js</code> file.</p>