Guide on how to verify if a component with a specific name is registered within the Composition API of Vue 3

Question

Guide on how to verify if a component with a specific name is registered within the Composition API of Vue 3

My current situation involves a template that loads dynamic components based on their names:

<template>
      <div>
        <div>
          <div>
            <component
              :is="getFormRenderer"
            ></component>
          </div>
        </div>
      </div>
</template>

The getFormRenderer function retrieves a string (obtained from an API) which specifies the component by its name.

In this scenario, only two sub-components (telegram_send_message and time_time) are imported and registered:


<script>
import { useStore } from "vuex";
import { computed } from "vue";

import exampleComponentOne from "@/components/forms/exampleComponentOne.vue";
import exampleComponentTwo from "@/components/forms/exampleComponentTwo.vue";
import defaultComponentTwo from "@/components/forms/defaultComponent.vue";

export default {
  name: "ActionEditor",
  setup() {
    const store = useStore();

    const getFormRenderer = computed(() => {
      return (
        store.state.level.actionSelected.plugin
      );
    });
    return {
      getFormRenderer,
    };
  },
  components: {
    exampleComponentOne,
    exampleComponentTwo,
    defaultComponent
  },
};
</script>

Now I am looking to enhance the functionality of the dynamic <component> so that it defaults to defaultComponent.vue if the specified component does not exist in the list.

I have explored using this.hasOwnProperty(), but within the setup() function, this is undefined. Is there a conventional method to accomplish this task?

javascript vue.js vue-component vuejs3

Answer 1

Answer №1

One way to verify the presence of a component in the setup() function is by utilizing either resolveComponent() or resolveDynamicComponent(). These functions search for a component based on its name. It's worth noting that the documentation for resolveDynamicComponent() wrongly mentions it throws a warning for non-existent components, when in fact this behavior belongs to resolveComponent() (as of v3.0.9).

Both methods will return the component name if the component does not exist, which allows you to check if the component exists by ensuring the return type is not a string:

import { computed, resolveDynamicComponent } from 'vue'

export default {
  setup() {
    const isComponent = name => typeof resolveDynamicComponent(name) !== 'string

    const store = useStore();
    const getFormRenderer = computed(() =>
      isComponent(store.state.level.actionSelected.plugin)
        ? store.state.level.actionSelected.plugin
        : 'DefaultComponent'
    );

    return {
      getFormRenderer
    }
  },
  components: {
    //...
  },
}

View a demonstration

Answer 2

One way to verify the presence of a component in the setup() function is by utilizing either resolveComponent() or resolveDynamicComponent(). These functions search for a component based on its name. It's worth noting that the documentation for resolveDynamicComponent() wrongly mentions it throws a warning for non-existent components, when in fact this behavior belongs to resolveComponent() (as of v3.0.9).

Both methods will return the component name if the component does not exist, which allows you to check if the component exists by ensuring the return type is not a string:

import { computed, resolveDynamicComponent } from 'vue'

export default {
  setup() {
    const isComponent = name => typeof resolveDynamicComponent(name) !== 'string

    const store = useStore();
    const getFormRenderer = computed(() =>
      isComponent(store.state.level.actionSelected.plugin)
        ? store.state.level.actionSelected.plugin
        : 'DefaultComponent'
    );

    return {
      getFormRenderer
    }
  },
  components: {
    //...
  },
}

View a demonstration

Answer 3

Answer №2

To check if a component with a specific name is globally registered in the application, you can utilize the app.component() function by passing only the component name as an argument.

In any component within your app, you can use the somewhat obscurely documented getCurrentInstance function - ensuring it is called only within the `setup` or hooks sections. You can then use the returned value to test whether the component is registered.

For global components, employ the
```
getCurrentInstance().appContext.app.component()
```
function (where `appContext.app` refers to the main `app` object created using `createApp()`).
For locally registered components, utilize
```
getCurrentInstance().components['name']
```
.

Take a look at the example below for global components. Please note that the example uses Vue from a CDN, assuming the global Vue object. In actual development scenarios, imports are preferred; for instance,

import { getCurrentInstance } from 'vue'

.

const app = Vue.createApp({})

app.component('mainComponent', {
  template: `
    <component :is="getComp1OrDefault"></component>
    <component :is="getComp2OrDefault"></component>
  `,
  setup() {  
    const vm =  Vue.getCurrentInstance()
    //console.log(vm) 
    const getComp1OrDefault = Vue.computed(() => {
      return vm.appContext.app.component('comp1') ? 'comp1' : `defaultComp`
    });
    
    const getComp2OrDefault = Vue.computed(() => {
      return vm.appContext.app.component('comp2') ? 'comp2' : `defaultComp`
    });
    
    return {
      getComp1OrDefault,
      getComp2OrDefault
    };
  }
})

app.component('comp1', {
  template: `<div>Comp1</div>`
})

app.component('defaultComp', {
  template: `<div>defaultComp</div>`
})

app.mount("#app")

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.7/vue.global.js" integrity="sha512-+i5dAv2T8IUOP7oRl2iqlAErpjtBOkNtREnW/Te+4VgQ52h4tAY5biFFQJmF03jVDWU4R7l47BwV8H6qQ+/MfA==" crossorigin="anonymous"></script>

<div id="app">
  <main-component />
</div>

Answer 4

To check if a component with a specific name is globally registered in the application, you can utilize the app.component() function by passing only the component name as an argument.

In any component within your app, you can use the somewhat obscurely documented getCurrentInstance function - ensuring it is called only within the `setup` or hooks sections. You can then use the returned value to test whether the component is registered.

For global components, employ the
```
getCurrentInstance().appContext.app.component()
```
function (where `appContext.app` refers to the main `app` object created using `createApp()`).
For locally registered components, utilize
```
getCurrentInstance().components['name']
```
.

Take a look at the example below for global components. Please note that the example uses Vue from a CDN, assuming the global Vue object. In actual development scenarios, imports are preferred; for instance,

import { getCurrentInstance } from 'vue'

.

const app = Vue.createApp({})

app.component('mainComponent', {
  template: `
    <component :is="getComp1OrDefault"></component>
    <component :is="getComp2OrDefault"></component>
  `,
  setup() {  
    const vm =  Vue.getCurrentInstance()
    //console.log(vm) 
    const getComp1OrDefault = Vue.computed(() => {
      return vm.appContext.app.component('comp1') ? 'comp1' : `defaultComp`
    });
    
    const getComp2OrDefault = Vue.computed(() => {
      return vm.appContext.app.component('comp2') ? 'comp2' : `defaultComp`
    });
    
    return {
      getComp1OrDefault,
      getComp2OrDefault
    };
  }
})

app.component('comp1', {
  template: `<div>Comp1</div>`
})

app.component('defaultComp', {
  template: `<div>defaultComp</div>`
})

app.mount("#app")

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.7/vue.global.js" integrity="sha512-+i5dAv2T8IUOP7oRl2iqlAErpjtBOkNtREnW/Te+4VgQ52h4tAY5biFFQJmF03jVDWU4R7l47BwV8H6qQ+/MfA==" crossorigin="anonymous"></script>

<div id="app">
  <main-component />
</div>

Guide on how to verify if a component with a specific name is registered within the Composition API of Vue 3

Answer №1

Answer №2

Similar questions

Retrieve and access an array of objects from MongoDB

The color scheme detection feature for matching media is malfunctioning on Safari

The trio of Javascript, Ajax, and FormData are

What is the reason for create-react-app initializing twice?

Ensuring promise doesn't resolve until the IF STATEMENT is executed

Failed to access the 'totalQty' property as it is undefined

Completion of TypeScript code is not working as expected, the variable that is dependent upon is not

Is there a way to restrict the amount of user input that is allowed?

Utilizing jQuery to Perform Calculations with Objects

Completing a form and saving data to a document

The Right Way to Set Up Form Data in VueJS

JQuery Accordion SubMenu/Nested Feature malfunctioning

Steps to run a function for updating a JSON data file

Having Difficulty with Splicing Arrays in React?

Clicking on a table will toggle the checkboxes

How to Call a Nested Object in JavaScript Dynamically?

The variable ReactFauxDOM has not been declared

Tips for adding JSON values to an object

RegEx in JavaScript to identify and match the innerHTML property of all elements

jQuery: Issue with controller function execution when using ajax