A big mistake I made back when I first tried to create a custom panel was to rely on components already loaded by hass. Whenever there was an update, things disappeared and I had to find something else. Super fast code rot.
I decided I wanted to use Vue3 for custom alarm and security stuff again but the default build for a vue project is setup with its own index.html and designed to create a component on a tag in that index.html. This doesn’t work for the hass custom panel.
However, I did find that Vue3 has a function available (defineCustomElement) just for what we need. With a default boiler plate project, the last line in main.ts is:
createApp(App).mount('#app')
Replace that with:
import { defineCustomElement } from 'vue'
const app = defineCustomElement(App)
customElements.define('my-panel', app)
And now the built project will have App available as a custom element ‘my-panel’ in the same way that the docs https://developers.home-assistant.io/docs/frontend/custom-ui/creating-custom-panels/ specify.
Just thought I’d share as I didn’t find anything in the forums here about it.
