Add HTML based lib into Vue project

Question

I'm trying to include https://github.com/Jinntec/Fore into my Vue project (Vue 2 with Vuetify), although I can't make it work. I tried to include it in my main.js after installing it with npm in main.js.

import Fore from '@jinntec/fore';
Vue.use(Fore);

But I get an error in the console.

Uncaught TypeError: Cannot read properties of undefined (reading 'install')
    at Function.Vue.use (vue.esm.js?4b29:5129:1)
    at eval (main.js?b0ca:11:1)
    at Module../src/main.js (app.js:1227:1)
    at __webpack_require__ (app.js:4415:33)
    at fn (app.js:4667:21)

So I tried adding it to index.html with cdn option. It kinda works, but only if I use v-html on a div for example. The problem is I can't use Vuetify elements. When I use it in a template it stops working. There is something showing up but buttons are just creating errors. This is the copy of: https://jinntec.github.io/Fore/demo/todo.html, the template example.

This is what I can also see with v-html but in v-html the button actually works, but here(template) I get some errors:

1. [Vue warn]: Unknown custom element: <fx-repeat> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
2. Uncaught (in promise) TypeError: Failed to execute 'evaluateXPath': xpathExpression must be a string.
3. Uncaught DOMException: Failed to construct 'CustomElement': The result must not have attributes

I can't use v-html because I want to include Vuetify components (unless there is some way to do it) so is there a way to actually make it work?

---

Edit 1. Is there a way to mark custom elements or select them in the isCustomElement like data or task?

<fx-fore>
  <fx-model id="record">
    <fx-instance>
      <data 'this is from Fore'>
        <task 'this is from Fore' complete="false" due="2019-02-04">Pick up Milk</task>
        <task complete="true" due="2019-01-04">Make tutorial part 1</task>
      </data>
    </fx-instance>
  </fx-model>
</fx-fore>

I also saw that they are using templates https://jinntec.github.io/Fore/demo/todo.html#:~:text=todos%22%20ref%3D%22task%22%3E-,%3Ctemplate%3E,-%3Cfx%2Dcontrol%20id so I think they may interfere with each other?

Answer 1

This library creates native Web components - it is not a Vue component so you can't install it with Vue.use(Fore).

You can read https://vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue to learn how to instruct the Vue template compiler to ignore the tags that belong to the Fore library. For example

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