Using Cesium npm package with Nuxt 3

Hi Toby,

I have indeed and it’s a bit tedious to be honest and it was a lot of trial and error at first but I’ve built multiple projects with it already.

One thing you should probably add is a script to initialise the base URL instead of adding it to the nuxt.config.

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

I’m calling this function right after imports in my app.vue.

I have also added a script that copies the necessary folders from the node_modules when you build your app (requires packages “del” and “recursive-copy” to be installed:

import copy from ‘recursive-copy’;
import { deleteSync } from ‘del’;

const baseDir = ‘node_modules/cesium/Build/CesiumUnminified’;

const targets = [‘Assets//*', 'ThirdParty//', 'Widgets/**/’, ‘Workers/**/*’, ‘Cesium.js’];

deleteSync(targets.map((src) => .output/public/lib/cesium/${src}));

copy(baseDir, ‘.output/public/lib/cesium’, {
expand: true,
overwrite: true,
filter: targets,
});

In order to get it running in dev mode instead of building it every time, I’ve also added a “lib” folder at the project root which includes the same as what the script above copies. Below is what my folder structure looks like.

Note: My latest cesium project is running with nuxt 3.6.5 and I have not tried this with newer versions of nuxt yet.

Sorry for the short answer, not much time currently, hope it helps.

Best,
Jacques

1 Like