# Cesium with Nuxt3

**URL:** <https://community.cesium.com/t/cesium-with-nuxt3/25062>\
**Category:** CesiumJS\
**Created:** [June 29, 2023, 1:58am UTC](https://community.cesium.com/t/cesium-with-nuxt3/25062 "2023-06-29T01:58:36Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jacques27](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/jacques27/32/11887_2.png) [@Jacques27](https://community.cesium.com/u/Jacques27)\
**Post date:** [June 29, 2023, 1:58am UTC](https://community.cesium.com/t/cesium-with-nuxt3/25062/1 "2023-06-29T01:58:36Z")

</div>

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](https://global.discourse-cdn.com/cesium/original/2X/f/fadf15926086889b799742a4b2a6e496cd58fc9b.png)

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

---

<div class="post-metadata">

**Author:** ![Jacques27](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/jacques27/32/11887_2.png) [@Jacques27](https://community.cesium.com/u/Jacques27)\
**Post date:** [June 29, 2023, 4:52am UTC](https://community.cesium.com/t/cesium-with-nuxt3/25062/2 "2023-06-29T04:52:17Z")

</div>

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\>

---

<div class="post-metadata">

**Author:** ![Gabby\_Getz](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/gabby_getz/32/7838_2.png) [@Gabby\_Getz](https://community.cesium.com/u/Gabby_Getz)\
**Post date:** [July 3, 2023, 7:44pm UTC](https://community.cesium.com/t/cesium-with-nuxt3/25062/3 "2023-07-03T19:44:00Z")

</div>

Thanks for the update @Jacques27!