Vue

<script setup>
import { onBeforeUnmount, onMounted, ref, watch } from "vue";
import { createGlobe } from "canvas-globe";

const props = defineProps({ markers: { type: Array, default: () => [] } });
const canvas = ref(null);
let globe;

onMounted(() => {
  globe = createGlobe(canvas.value, {
    markers: props.markers,
    preset: "hologram",
    tooltip: true,
    licenseKey: "your_license_key",
  });
});

watch(() => props.markers, (markers) => globe?.setMarkers(markers));
onBeforeUnmount(() => globe?.destroy());
</script>

<template>
  <canvas ref="canvas" style="display:block;width:100%;aspect-ratio:1" />
</template>

For simpler markup, import canvas-globe/element once and use the Web Component.