shuding / cobe

5kB WebGL globe lib.
https://cobe.vercel.app
MIT License
3.15k stars 169 forks source link

the package is not wroking with vue2 / nuxt js. #61

Open singh3069 opened 1 year ago

singh3069 commented 1 year ago

Hey @shuding I have a question that the package has been converted to be an ESM only package. ?

Because while I'm trying to add this package in my project its working for just few minutes and after that is it showing me the error which you can see in the SS. I'm using nuxt js and vue 2. image

I Tried to down grade the node-fetch package to verison 2 but it didn't helped me.

Please have a look and let me know

Thank you.

sameerchoubey commented 1 year ago
Screenshot 2023-02-06 at 1 38 41 PM

I was able to use it by directly importing it on mounted.

singh3069 commented 1 year ago

hey thank you for your reply can have a some code so that I can see it.

singh3069 commented 1 year ago

did you used vue-2 or vue-3 ?

singh3069 commented 1 year ago

and I had it working but there is somether prob with me right know regarding the globe.

sameerchoubey commented 1 year ago

async mounted(){ let phi = 0 let canvas = document.getElementById("cobe") let width = 500 import('cobe').then( obj => { obj.default(canvas, { devicePixelRatio: 2, width: width * 2, height: width * 2, phi: 6.3, theta: 0.51, dark: 1, diffuse: 0.6, scale: 1.08, mapSamples: 16000, mapBrightness: 2.4, baseColor: [0.2352, 0.2352, 0.2352], markerColor: [0.2784, 0.4941, 1], glowColor: [0.1333, 0.1333, 0.1333], offset: [0, width * 2 * 0.6], markers: this.locations, onRender: (state) => { state.width = width * 2 state.height = width * 2 // console.log('state', state) // Called on every animation frame. //state` will be an empty object, return updated params. // state.phi = phi // phi += 0.01 }, }) }).catch(err=>console.log('errr',err))

    // import('cobe').then (obj => {
    //     obj.toggle()
    // }) 
},`

This is how my mounted is looking like.
`<div class="mt-5">
        <canvas
            ref="cobb"
            id="cobe"
            class="mx-auto"
            width="500"
            height="500"
        >
        </canvas>
    </div>`
singh3069 commented 1 year ago

is there any place I can message you personally?