How to implement quill emojis in vue2editor?

Hello team,

I am using Laravel 5.6 and vue js for a chatting app with package vue2editor for text editor. I needed to implement Emojis in the editor and I found another package called Quill Emoji

As per the docs of vue2editor and other resources, quill emojis can be implemented into my vue component vue2editor.

But the above code gives me the console error:

Uncaught ReferenceError: Quill is not defined

I tried to figure out the problem by contacting the author itself but I think he is busy or not at all interested in addressing my query. Here is the Link[^]

Please help me find out the root cause of this error.

What I have tried:

<template>
    <div id="app">
        <vue-editor v-model="content"></vue-editor>
    </div>
</template>

<script>
    import { VueEditor, Quill } from 'vue2-editor';
    import Emoji from 'quill-emoji/dist/quill-emoji';
    Quill.register('modules/quill-emoji', Emoji);


    export default {
        name: 'vue2editor',
        components: { VueEditor },
        data() {
            return {
                content: "<h1>Some initial content</h1>",
                editorSettings: {
                    modules: {
                        toolbar: {
                            container: [
                                [{'size': ['small', false, 'large']}],
                                ['bold', 'italic', 'underline', 'strike'],
                                ['blockquote', 'code-block'],
                                [{ 'header': 1 }, { 'header': 2 }],
                                [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                                [{ 'script': 'sub' }, { 'script': 'super' }],
                                [{ 'indent': '-1' }, { 'indent': '+1' }],
                                [{ 'direction': 'rtl' }],
                                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                                [{ 'color': [] }, { 'background': [] }],
                                [{ 'font': [] }],
                                [{ 'align': [] }],
                                ['clean'],
                                ['link', 'image', 'video'],
                                ['emoji'],
                            ],
                            handlers: {
                                'emoji': function () {}
                            },
                        },
                        toolbar_emoji: true,
                        short_name_emoji: true,
                        textarea_emoji:true,
                    },
                },
                text: null,
            };
        },
    };
</script>

On another repo on quill in github someone says that : quill-emoji expects the Quill-Object globally

Here is the link

The problem here is how can I add the following code in my webpack.mix.js

new webpack.ProvidePlugin({
  'window.Quill': 'quill/dist/quill.js',
  'Quill': 'quill/dist/quill.js'
})