Automatically load VueJS components based on the prefix of the tag

Question

Automatically load VueJS components based on the prefix of the tag

I am currently working on defining components based on the prefix when Vue parses the content (without using Vuex).

While exploring, I came across Vue.config's isUnknownElement function but couldn't find any documentation about it. By utilizing this function, I can call Vue.component (with an async function) if the prefix matches, avoiding the unknown component error. However, the component doesn't render immediately because the async function is not triggered until the next time the tag is parsed.

Up to now, the only workaround I've discovered is to render the component twice (using a v-if and updating the bound variable).

Is there a more efficient way of achieving this?

Why am I doing this? In my single-page applications, I have a series of custom components all sharing a common prefix and path structure, resulting in the component name matching its path (replacing dashes with slashes). This is why having a universal function to dynamically register each component starting with this prefix would be extremely useful :)

javascript vue.js vue-component

Answer 1

Answer №1

My reason for being here aligns with the OP's, and I'm eager to share the solution I stumbled upon.

The key lies in utilizing the isUnknownElement function, as well as drawing insights from these resources:

(1) https://v2.vuejs.org/v2/guide/components-dynamic-async.html#Async-Components

(2) https://forum.vuejs.org/t/why-use-the-no-function-in-vue-source-code-utils/27675

Vue.config.isUnknownElement = function () {
    let tagName = arguments[0].toLowerCase();
    if (/^vc-/i.test(tagName)) {
      // Tags like 'vc-*' pertain to VueJS components

      // It's crucial to ascertain if the component is already defined:
      // https://stackoverflow.com/questions/37389788/vue-js-check-if-a-component-exists
      if (typeof Vue.options.components[tagName] === 'undefined') {
        // Arrange a lazy-loader for the component
        // Remove 'vc-' prefix from tagName to derive the component's name
        let componentName = tagName.substr(3);
        Vue.component(tagName, function (resolve) {
          // ... Load the component 'componentName' in a "lazy" manner, as per link (1)
        });
      }
    }
    return false;  // Mimicking the default Vue configuration's behavior, see link (2)
  };

I've designated custom components using tags prefixed with 'vc-' (for instance, 'vc-table'). Consequently, when a tag with the specified prefix is encountered by the Vue template compiler, a corresponding component is dynamically defined and loaded in a lazy-loading fashion.

Answer 2

My reason for being here aligns with the OP's, and I'm eager to share the solution I stumbled upon.

The key lies in utilizing the isUnknownElement function, as well as drawing insights from these resources:

(1) https://v2.vuejs.org/v2/guide/components-dynamic-async.html#Async-Components

(2) https://forum.vuejs.org/t/why-use-the-no-function-in-vue-source-code-utils/27675

Vue.config.isUnknownElement = function () {
    let tagName = arguments[0].toLowerCase();
    if (/^vc-/i.test(tagName)) {
      // Tags like 'vc-*' pertain to VueJS components

      // It's crucial to ascertain if the component is already defined:
      // https://stackoverflow.com/questions/37389788/vue-js-check-if-a-component-exists
      if (typeof Vue.options.components[tagName] === 'undefined') {
        // Arrange a lazy-loader for the component
        // Remove 'vc-' prefix from tagName to derive the component's name
        let componentName = tagName.substr(3);
        Vue.component(tagName, function (resolve) {
          // ... Load the component 'componentName' in a "lazy" manner, as per link (1)
        });
      }
    }
    return false;  // Mimicking the default Vue configuration's behavior, see link (2)
  };

I've designated custom components using tags prefixed with 'vc-' (for instance, 'vc-table'). Consequently, when a tag with the specified prefix is encountered by the Vue template compiler, a corresponding component is dynamically defined and loaded in a lazy-loading fashion.

Answer 3

Answer №2

After some experimentation, I managed to get my components to autoload based on the rules I set. My approach was similar to @dosorio's, but I chose to use a different function called isReservedTag.

const isReservedTag = Vue.config.isReservedTag;
Vue.config.isReservedTag = (tag, context) => {
  if ( isReservedTag(tag) ){
    return true;
  }
  // Checking if the tag matches any of my rules
  // If it does, then define my component
  if ( checkMyRule(tag) ){
    Vue.component(tag, (resolve) => {
      // Loading the component
    });
  }
  return false;
};

Answer 4

After some experimentation, I managed to get my components to autoload based on the rules I set. My approach was similar to @dosorio's, but I chose to use a different function called isReservedTag.

const isReservedTag = Vue.config.isReservedTag;
Vue.config.isReservedTag = (tag, context) => {
  if ( isReservedTag(tag) ){
    return true;
  }
  // Checking if the tag matches any of my rules
  // If it does, then define my component
  if ( checkMyRule(tag) ){
    Vue.component(tag, (resolve) => {
      // Loading the component
    });
  }
  return false;
};

Automatically load VueJS components based on the prefix of the tag

Answer №1

Answer №2

Similar questions

Notify when a certain element's ID is visible on the screen using the jQuery appear method

Using JQuery to dynamically change className based on specific logic conditions

Using jQuery to handle multiple buttons with the same ID

tips for implementing JSON loading in Ext JS

Looping Feature in Ionic Framework's Slides Component

Tips for ensuring a custom menu closes when clicking outside of it instead of on the menu itself

How to dynamically add table rows and cells with JavaScript using a single selection input

Using JavaScript to launch a new window for a specific folder

Looking to disable the back button in the browser using next.js?

How can I replicate the functionality of the span element using Javascript?

"Exploring ways to pass live data from the controller to the view in CodeIgniter for dynamic chart values

How to detach functions in JavaScript while preserving their context?

What is the method for retrieving a value from my Node.js module once it has been modified by an asynchronous function?

Backbone sorting is specifically designed for organizing views within the framework

What is the correct syntax for declaring a variable within a switch statement in TypeScript?

Customizing CSS based on URL or parent-child relationship in WordPress

What is the best way to anticipate a return phone call?

React-Redux Error: The function this.props.AppendCharacter is not defined

vue popup input will automatically receive focus

What is the best way to reach nested iframes?