Home » vue » How to ignore custom elements in VuePress to avoid the "Unknown custom element" error?

How to ignore custom elements in VuePress to avoid the "Unknown custom element" error?

Posted by: admin November 26, 2021 Leave a comment

Questions:

I am creating documentation for a W3C web components library (Vanilla JavaScript) using VuePress. However, my “custom” web components are generating an error due to VuePress trying to “recognize” them as Vue components the very first time the page loads.

Once the page is loaded my web components work as expected, but the error is there anyway.

This is the error I am getting:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <nova-timeline> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <TimeLineWrapper> at docs/.vuepress/components/TimeLineWrapper.vue

I have created the following structure related to Vuepress

.
├── docs
│   ├── .vuepress
│   │   ├── components
│   │   │   ├── TimeLineWrapper.vue
│   │   ├── config.js
│   │   └── theme
│   ├── README.md
│   ├── components
│   │   ├── README.md
│   │   └── Timeline.md

And this is part of my code:


// docs/.vuepress/components/TimeLineWrapper.vue
<template>
    <nova-timeline ref="timeline"></nova-timeline>
</template>
<script>
  import timeLineJson from "./data/TimeLineData";

  export default {
    data() {
      return {
        timeLineJson: timeLineJson
      };
    },
    mounted() {
      this.$refs.timeline.data = this.timeLineJson.data;
      this.$refs.timeline.configuration = this.timeLineJson.configuration;
    }
  };
</script>

// This is my W3C web component:
<nova-timeline ref="timeline"></nova-timeline>

What I like to know is how to “ignore custom components”, I mean where or how to do this kind of configuration using the VuePress way.

Vue.config.ignoredElements = [
  // Use a `RegExp` to ignore all elements that start with "nova-"
  // 2.5+ only
  /^nova-/
]

https://vuejs.org/v2/api/#ignoredElements

Thanks in advance.

Answers:

I finally manage to find how to add my ignored elements,

1) Create a file named enhanceApp.js in docs/.vuepress/theme

2) Place this content inside of it:

// https://vuepress.vuejs.org/guide/custom-themes.html#app-level-enhancements
export default ({ Vue, options, router, siteData }) => {
  Vue.config.ignoredElements = [
    // Use a `RegExp` to ignore all elements that start with "nova-"
    // 2.5+ only
    /^nova-/
  ];
}

Now, the error will disappear since Vue will ignore our custom web components.