WebGL Earth or globe.gl in VUE.JS

Question

Can I use "WebGL Earth" or "globe.gl" in vue.js? I search a lot but what I found was that there is "react-globe.gl" for react developers, but can't find the same for vue.

If I can use any of them in vue, how can I import and initialize it?

Answer 1

I am currently am using globe.gl with vue 3, got it running like this.

Can also checkout a template repo I have https://github.com/GBerghoff/Globe.gl-with-Vue-3

<template>
  <div ref="globeDiv"></div>
</template>

<script>
import Globe from "globe.gl";
import { ref, onMounted } from "vue";

export default {
  setup() {
    const globeDiv = ref(null);

    onMounted(() => {
      const myGlobe = Globe();
      myGlobe(globeDiv.value).globeImageUrl(
        "//unpkg.com/three-globe/example/img/earth-night.jpg"
      );
    });

    return {
      globeDiv,
    };
  },
};
</script>