In my Symfony project, I am utilizing Vue.js (2) and I currently have a Vue instance with "global" components (specifically an Editor component with some CKEditor libraries) precompiled using the default symfony webpack setup.
//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>
Currently, my Editor.vue is being loaded globally by default because it is included in the Vue instance along with every other component. However, this results in unnecessary loading of the editor on every page request, even if it's not needed.
The editor file has numerous imports due to customization, making the javascript file quite large and slowing down loading times.
My objective is to eliminate the global component Editor and instead embed it in a separate javascript file called editor.js, which can be included only on specific pages as needed.
I am unsure about how to achieve this as my Vue instance is created in app.js and I need to somehow add the Editor component in the editor.js file.