How to retrieve vue instance in external script

Hi, I’m fairly new to vuejs and I’m trying to integrate a custom amd library which is using Vue with a requirejs project and I’m a bit stuck.

Let’s assume I have a script which works like this

require(['mylib'], function(mylib){
           Vue = mylib.Vue;
     //additional code here


            i18n.locale = "<?=$locale?>";
            var vm = new Vue({
                i18n,
                el: '#app',
                render(h) {
                    return h(App, {
                        props: {
                            groups: groups,
                            services: services,
                        }
                    })
                }
            });


})

Now at a separate module using requirejs I would like to retrieve this vm instance.

One way would be to store the vm variable to the window object however I’d like to avoid that so I’m curious if there’s a way to retrieve the vue instance via a reference name or something similar.

For example

require(['mylib'], function(mylib){
    Vue = mylib.Vue 

   //pseudo code
   Vue.getMyInstance('<reference name>');
})

Some code would actually get me the instance that I need.

Additionally is it possible to invoke a function stored in the App component of the Vue Instance externally?

Thanks in advance

You can use ‘define’ - define('some', object_or_function)
Read Requirejs doc.

I’m not sure if this is the correct approach either because I would have to inline the declaration using define and requirejs expects exactly one module defined per file. When trying to do it like this

        define('vminstance',[], function(){
            return vm;
        })

and then subsequently calling

require(['vminstance'], function (vm) {
    console.log('VM:', vm);
});

throws errors about not being able to find the script vminstance.js

Error: Script error for: vminstance

vminstance.js” was blocked due to MIME type (“text/plain”) mismatch (X-Content-Type-Options: nosniff).

yeah, sorry for that
This is the better advice :joy:

//some_module.js
define(['mylib'], function(mylib){
    var Vue = mylib.Vue;
    ...
    var vm = new Vue(...);
    ...
    return vm;
}

//in_other_module.js
require(['some_module'], function(vm){
    //vm is returned from some_module.js
})

no problem and thanks for trying to help :slight_smile:

I can see how that would work but on first invocation of the module only but in_other_module.js will instanciate Vue and then return the instance but that instance won’t be resusable for other modules. Only the first one that invokes it.

So for example

//in_other_module2.js
require(['some_module'], function(vm){})

will throw an error because Vue won’t be able to find the already mounted element to remount it.

That’s why I’m looking for a way to store this instance in a central way to access it later on in other areas beyond my control :frowning: . Think of it as something like a registry where I can register my instance to retrieve later that won’t pollute the window.
(unsuccessfully so far)

i believe that callback passed to define() is called only once per module, so other modules get the same vm

I will test it and see then.

It seems it’s only invoking once with define() :slight_smile:

Nice thank you very much.

I was using require() in my template area before because I needed some data from server-side but I was able to work around it like this as well. I just have to set my needed info after I get the vm instance and reactivity handles the rest.