In my Vue project, I am incorporating an Stencil.js component in the following manner:
index.html:
<script type="module"
src="https://xxxxxx.s3-eu-west-1.amazonaws.com/topbar.esm.js">
</script>
<script>
window.addEventListener('topbarLoaded', function (data) {
window.topbar = data.detail;
console.log('topbar was loaded and here it is:', window.topbar);
});
</script>
Now, I am trying to access the topbar information within my Vue components. For example,
VueComponent.vue
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component({
name: 'testcomp'
})
export default class PodList extends Vue {
data() {
return {
topbar: window.topbar // Error: Property 'topbar' does not exist on type 'Window & typeof globalThis'
}
}
}
</script>
I want to make all the content of my topbar accessible in every Vue component. Currently, I can access topbar.user in Chrome devtools for user information, but I need this data to be available across all Vue components.