Vue: Component for specific pages only

Question

I am using Vue.js (2) in my Symfony project and currently have my Vue instance with "global" components (in my case called Editor with some CKEditor libraries) precompiled with the default symfony webpack.

//app.js
import Vue from 'vue';
import Editor from './components/Editor';

new Vue({
    el: '#app',
    components: {Editor}
});

//components/Editor.vue
<template>
    <div>
        <textarea id="editor"></div>
    </div>
</template>

<script>
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: "Editor",
    mounted() {
        ClassicEditor.create(document.querySelector('#editor'), 
            plugins: [
                Essentials,
                Heading,
                //more plugins used from imports
            ],
            toolbar: [
                'heading',
                //more plugins
            ],
        }).then(editor => {
           
        }).catch(error => {
           
        });
    }
}
</script>

Since I only have one Vue instance and those include every component by default, my Editor.vue can be used globally. However this means, that my Editor.vue is actually loaded by default on every page request - even if you do not need the editor at all.

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.

My goal is to remove the global component Editor somehow and embed it in another javascript file called editor.js. This file can later on be included on specific pages.

However I am unsure on how to achieve that. My Vue instance is created inside my app.js and I somehow need to add the Editor component in my editor.js file.

cant u just use a twig parameter in the layout which for example is true for all extending pages that use the editor, then u assign that to a js variable and in app js you only do stuff when its true? — john Smith

Michal Levý Michal Levý · Accepted Answer · 2021-04-04T08:49:48

This should be simple. Just make an Editor component async component

Async components are automatically packed as separate js chunk by Webpack and loaded on demand only when needed...

You either register the component locally (in every component you want to use it):

export default {
  name: "ComponentUsingEditor",
  components: {
    'Editor': () => import('components/Editor.vue')
  }
)

or globally:

app.js

import Vue from 'vue';

Vue.component(
  'Editor',
  () => import('components/Editor.vue')
)

new Vue({
    el: '#app'
});

Vue: Component for specific pages only

1 Answers