Composition API Not Working with Web Components

[milky2028]

When building web components with the CLI, components that use @vue/composition-api do not work. I have a minimal repo if anyone needs to see it. I understand if this is a thing that got pushed to the back burner until Vue 3 is stable.

Also, there have been some notes about this project being dead. Please, don't let this project die! If you compare this to some other web components solutions, this one has significantly more downloads on NPM. This data isn't perfect, but it feels like a solid barometer for how important this project is. I'm willing to submit PRs if someone can point me in the right direction.

NPM Downloads Per Week @vue/web-components-wrapper | 468,000 lit-html | 109,000 lit-element | 89,000 @angular/elements | 59,000 @stencil/core | 24,000

[nileshtrivedi]

@milky2028 Please describe what you mean by "not working". And a link to the repo. I too am facing issues but we need to check whether it's a bug in vue / vue-web-component-wrapper or our own code.

[milky2028]

Essentially just that values aren't showing up in the template, nor do they seem to connect to the template. Here is my minimal repo. I committed the output files for the web components build, so you should be able to inspect the output and view the results by just running yarn serve:wc. If you use the regular yarn serve that the vue-cli comes with, both files work as normal.

[nileshtrivedi]

I created a StackOverflow question with minimal reproducing code since I'm not yet sure that there is a bug: https://stackoverflow.com/questions/61506239/vuejs-children-is-empty-when-using-slots-in-the-webcomponent-build

However, VueJS does need to improve their docs on how to make sure that VueComponent and Webcomponent functionality has parity.

[nandin-borjigin]

As for the entry web-component/index.html, composition-counter.min.js is built from Composition-Counter.vue so there is no code installing @vue/composition-api plugin into vue.

In other word, src/main.ts, which contains the necessary code Vue.use(VueCompositionAPI);, is not bundled in your web-component build. Thus setup function does not get called at all (calling setup is a plugin behavior and that very plugin is not installed in the web component build).

[dmaass-diva-e]

@nandin-borjigin You are right, I tested it. After bundling the usage of the VueCompositionAPI it's working.

But now we have another problem: The usage of computed props inside the setup function failed.

export default defineComponent({
  name: 'BaseRichText',
  props: {
    html: {
      type: String,
      required: true,
    },
  },
  setup(props: { html: string }, { root }: CustomSetupContext) {
    const { processHtml, canProcess } = useHtmlAnchorHrefProcessing(root.$test)
    const processedHtml = computed(() =>
      processHtml(props.html, canProcess.value)
    )
   ...

Error message:

TypeError: Cannot read property 'config' of null
    at defineComponentInstance (vue-composition-api.esm.js:148)
    at computed (vue-composition-api.esm.js:1112)
    at setup (BaseRichText.vue:39)
    at mergedSetupFn (vue-composition-api.esm.js:1672)
    at vue-composition-api.esm.js:1458
    at activateCurrentInstance (vue-composition-api.esm.js:1385)
    at initSetup (vue-composition-api.esm.js:1456)
    at VueComponent.wrappedData (vue-composition-api.esm.js:1440)
    at getData (vue.runtime.esm.js:4748)
    at initData (vue.runtime.esm.js:4705)

Maybe the Problem is that a getCurrentInstance() call will also return null ? Can somebody help me with that problem please?