How to use web components in vuepress-CodePudding

I'm trying to integrate Stoplight to our vuepress site. We are doing this by adding a web component called elements-api which is provided by stoplight.

Here is what I have done so far.

APIStopLight.vue

<template>
    <main >
        <!-- <iframe class = "api-container" width="100%" :src="$frontmatter.url" frameborder="0" ></iframe> -->
    <elements-api class = "stoplight"
      apiDescriptionUrl="/asgardeo/docs/content/apiDocs/scim2.yaml"
      router="hash"
    ></elements-api>
    </main>
</template>

<script>
export default{
    name: 'APIStoplight',
    methods:{
        log(msg){console.log(msg);}
    }
}
</script>

<style src="../theme/styles/components/apiOverview.styl" lang="stylus">

I have added the stoplight libs in .vuepress/config.js as follows.

head: [
  ...some other scripts,
  ['script', {src: 'https://unpkg.com/@stoplight/elements/web-components.min.js'}]
  ...another list of scripts
]

But when I'm running the application, I get the following error.

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

found in

---> at docs/.vuepress/components/APIStoplight.vue at docs/apis/scim2.md at docs/.vuepress/theme/components/MyTransition.vue at docs/.vuepress/theme/components/Page.vue at docs/.vuepress/theme/components/Common.vue at docs/.vuepress/theme/layouts/Layout.vue at node_modules/@vuepress/core/lib/client/components/GlobalLayout.vue

Upon some research, I found this article which says how to use web components with vue.js, but I can't port that into vuepress as vuepress is considerably different from Vue.

Is there anyone who can explain how to use web components in Vuepress? Thanks in advance for all helpful answers.

CodePudding user response：

Eventually, I was able to find a solution myself.

Vuepress supports extending the default Webpack config by adding a chainWebpack config option to docs/.vuepress/config.js. From there I could add the custom element config recommended here and the problem was solved.

module.exports = config({
  ...,
  chainWebpack: config => {
    config.module
    .rule('vue')
    .use('vue-loader')
    .tap(options => ({
      ...options,
      compilerOptions: {
        // treat any tag that starts with ion- as custom elements
        isCustomElement: tag => tag.includes('-')
      }
    }))
  },
  ...
})