How to add and use quill mention modules

I used to vue 2.5.* and wanna to use quill-mention.

By your document I write this code to use mention module:

<script>

  // you can also register quill modules in the component
  import Quill from 'quill'
  import mention from 'quill-mention'
  Quill.register('modules/mention ', mention )


export default {
    data () {
      return {
        content: '<h2>I am Example</h2>',
        editorOption: {
             ....

               modules: {
                    mention: {
                        allowedChars: /^[a-zA-Z0-9_]*$/,
                        mentionDenotationChars: ["@"],
                        offsetLeft: ($('body').hasClass('rtl') ? -250 : 0),
                        renderItem: (item)=> {
                            return item.display
                        },
                        source: (searchTerm, renderList, mentionChar)=> {
                            let values = [{id:1,value:"admin",display:"admin "},{id:2,value:"john",display:"john"}];

                            if (searchTerm.length === 0) {
                                renderList(values, searchTerm);
                            } else {
                                const matches = [];
                                for (let i = 0; i < values.length; i++)
                                    if (~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())) matches.push(values[i]);
                                renderList(matches, searchTerm);
                            }
                        }
                    },
                },
             ....
        }
      }
    },
  

but when I type @ mention popover doesn’t display. What should I do?

[LucasvlLima]

put mention objects inside modules object, i guess this import already register the module so comment register and put object mention inside of module: { }

[essivision]

I solved problem with add Quill as global variable in app.js:

import Quill from 'quill';
window.Quill = Quill 

also in Laravel Mix we used autoload instead of above solution like this:

mix.autoload({
    jquery: ['$', 'window.jQuery','window.$'],
    quill: ['window.Quill','Quill']
});