Vue 3 globe component

Install the official Vue package:

npm install canvas-globe-vue canvas-globe vue

The component manages creation, reactive updates, events, and cleanup for you.

<script setup>
import { CanvasGlobe } from "canvas-globe-vue";

const markers = [
  { lat: 23.03, lon: 72.58, count: 12, live: true },
  { lat: 51.5, lon: -0.12, count: 8 },
];

function openMarker({ marker }) {
  console.log(marker);
}
</script>

<template>
  <CanvasGlobe
    license-key="your-license-key"
    :markers="markers"
    :options="{ preset: 'hologram', tooltip: true }"
    @marker-click="openMarker"
  />
</template>

Every CanvasGlobe option can be passed through options. Use the exposed instance, flyTo, fitTo, and snapshot members when you need imperative control.

For plain custom-element markup, use the official Web Component package.