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
– john Smith, Commented Apr 3, 2021 at 19:20

tony19 · Accepted Answer · 2022-07-15 23:22:18Z

2

+100

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'
});

edited Jul 15, 2022 at 23:22

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 4, 2021 at 8:49

Michal Levý

38.6k8 gold badges82 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Syllz Over a year ago

Easy and simple answer - no idea how I missed that. Thank you very much, works like a charm

Collectives™ on Stack Overflow

Vue: Component for specific pages only

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related