How should getConfig be defined?

I am trying to develop my own card using Vue.js. I am moving ahead blindly to just have an empty card running so that I know it is integrated in HA. The Vue magic would come after.

To that, I have written a mixture of the example card and Web Components documentation for Vue:

import { defineCustomElement } from ''

const ContentCardExample = defineCustomElement({
    setup() {
        console.log('hello from vue HA')
        const setConfig = (config) => {
            // if (!config.entity) {
            //     throw new Error("You need to define an entity");
            // }
            // this.config = config;
            console.log('setConfig triggered')
        return {
    // normal Vue component options here
    props: {},
    emits: {},
    template: `...`,

    // defineCustomElement only: CSS to be injected into shadow root
    styles: [`/* inlined css */`]

customElements.define("content-card-example", ContentCardExample);

When running it, I get a i.setConfig is not a function error

  • in the console
card custom:content-card-example TypeError: i.setConfig is not a function
    at r (create-element-base.ts:97:11)
    at create-element-base.ts:111:12
    at h (create-element-base.ts:215:12)
    at c (create-element-base.ts:172:12)
    at k (create-card-element.ts:100:3)
    at i.value (hui-view.ts:65:21)
    at i.value (hui-view.ts:305:26)
    at t.addEventListener.once (hui-view.ts:79:16)
    at o (fire_event.ts:76:8)
    at create-element-base.ts:129:5
  • and in HA:

I have a hard time understanding how setConfig is supposed to work (as part of the Web Component?) and where I should define it. Has anyone used it outside of a class definition like in the docs?

I’m not super familiar to Vue.js but this repo suggests a solution: GitHub - iva-stolnik/vue-ha-lovelace-connector