Cesium with Nuxt3

CesiumJS
1

Hello Community,

I’ve built 2 simple web applications earlier this year using Nuxt 3.2.0 and Cesium 1.102 and 1.103 respectively. I was able to get rid of the problem that Cesium would not find the CESIUM_BASE_URL variable by defining a global property in the app.vue file as follows:

Object.defineProperty(globalThis, ‘CESIUM_BASE_URL’, {
value: config.CESIUM_BASE_URL
})

After having been busy with a few other projects, I’m now back with newer versions of Nuxt3 and Cesium. As the last few updates have changed a lot in Cesium, I obviously want to use the newest version, however unfortunately I am now again getting an Error related to the CESIUM_BASE_URL even when I use the same method as above.

image
image761×413 16.3 KB

Has anyone else been running into this problem? Is it a problem only with running Cesium in Nuxt3?
After encountering the problem I first tried reverting the Nuxt version to 3.2.0 and then also Cesium to 1.103, but I actually kept getting the same error.
The only thing that was still different from my previous projects was the Nitro version, which I haven’t been able to change so far (asking for this in the Nuxt3 community at the same time).

I’d appreciate any pointer about how Cesium looks for the base URL, if anything changed (that I might have missed) or how I have to define it so that Cesium actually finds it …

Regards,
Jacques

2

Well, of course I find the answer on my own not long after posting a public question :^)
As someone else might run into the same problem I’ll leave the thread open and add my solution:

Instead of the defineProperty solution, that I used in the previous versions, you need to set window.CESIUM_BASE_URL to the path to where you saved your static files. However, you can’t call window.CESIUM_BASE_URL in a .vue component, so you have to make a function in a separate .js/.ts file (e.g. cesium-config.js), and call that function in the app.vue to set the base URL.

cesium-config.js:

export default function setupCesiumBaseUrl() {
const cesiumBaseUrl = ‘./lib/cesium’
window.CESIUM_BASE_URL = cesiumBaseUrl;
}

app.vue:

<script setup lang="ts> ... import setupCesiumBaseUrl from '@/cesium-config.js'; ... setupCesiumBaseUrl(); </script> <p>Hope it’ll help someone in the future.</p>
3

Thanks for the update @Jacques27!