Vue.js: check if a component exists

Question

I need to do some stuff in the ready: of the root instance only when some components don't exist (they weren't declared in the HTML).

How can I check if a component exists?

Answer 1

We can get the list of the loaded (global and/or local) components of a Vue instance from the instantiation options which is available through the vm.$options where the vm is the current Vue instance.

vm.$options property holds the whole options of a Vue instance. For example vm.$options.components returns an object containing the loaded components of the current Vue instace vm.

However depending on the way how a component is registered, either globally through Vue.component() or locally within a Vue instance options, the structure of the vm.$options.components would be different.

If the component is registered globally, the component will be added to vm.$options.components [[Prototype]] linkage or its __proto__.

And if the component is registered locally within the Vue instance options, the component will be added to the vm.$options.components object directly as its own property. So that we do not have to walk the proto chain to find the component.

---

In the following example we will see how to access the loaded components in both situations.

Notice the // [1] and // [2] comments in the code which are related to local registered components.

// the globally registered component  Vue.component('global-child', {    template: '<h2>A message from the global component</h2>'  });    var localComponent = Vue.extend({ template: '<h2>A message from the local component</h2>' });      // the root view model  new Vue({    el: 'body',    data: {      allComponents: [],      localComponents: [],      globalComponentIsLoaded: false    },    // local registered components    components: { // [1]      'local-child': localComponent    },    ready: function() {          this.localComponents = Object.keys(this.$options.components); // [2]            this.allComponents = loadedComponents.call(this);      this.globalComponentIsLoaded = componentExists.call(this, 'global-child');    }  });    function loadedComponents() {    var loaded = [];    var components = this.$options.components;    for (var key in components) {      loaded.push(key);    }    return loaded;  }    function componentExists(component) {    var components = loadedComponents.call(this);    if (components.indexOf(component) !== -1) {      return true;    }    return false;  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.js"></script>  <h1>A message from the root Vue instance</h1>  <p>All loaded components are: {{ allComponents | json }}</p>  <p>local components are: {{ localComponents | json }}</p>  <p><code>&lt;global-child&gt;</code> component is loaded: <strong>{{ globalComponentIsLoaded }}</strong></p>  <global-child></global-child>  <local-child></local-child>