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 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
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 {
setConfig,
}
},
// 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?