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

What is the process of importing a JSON data file and utilizing it within a React component?

Python sends back a list containing garbled characters to Ajax

What is the procedure for including a js file in typescript?

Recalling the use of jquery toggle throughout the website?

Utilizing Typescript with Vue 3's Injection Feature

"Stuck in a Standstill: Express/React Commit

jquery allows you to toggle the visibility of content

json array: Tips for adding elements to a new array

Error will be thrown if the initialDueDate parameter is deemed invalid in Javascript

Is it possible to utilize Javascript instead of PHP Curl to present JSON API data?

Issue with the string formatting in Vue.js is causing unexpected behavior

JSON.stringify not behaving as anticipated

Rebooting: Relaunching NodeJS server following deployment

JavaScript - Dynamically loaded CSS: CSS variables are not immediately accessible to JavaScript, but are successfully evaluated within the CSS itself

A method to use jQuery to replace newlines with commas in user input

Leveraging next-generation JavaScript (NextJS), incorporate sass-loader for seamless inclusion of variables in each individual

Removing a dynamic TypeScript object key was successful

Adjust the Vue.js required property to allow null values but not undefined

Personalize Badge Component

Adjusting the size of images in real time