Integrating Cesium Map with VueJS: Rendering 3D Map – Part 1

CesiumJS is a robust library for creating 3D globes and maps in a web browser, while Vue.js is a flexible JavaScript framework for building user interfaces.
By integrating CesiumJS with Vue.js, developers can leverage the 3D capabilities of CesiumJS and the modular structure of Vue.js to build interactive geospatial applications.

To get full source code for this tutorial, click here.

To check the live demo for this tutorial, click here.

In this tutorial series, we’ll guide you through the process of integrating CesiumJS into a Vue.js application, from setting up a basic project to rendering a 3D map and beyond, exploring complex features to build a comprehensive geospatial application.

We will start by setting up a new project using Vite, a modern build tool that provides fast development and builds speeds. We will then install the necessary dependencies, including CesiumJS, VueJS, and Pinia. We will also enable TypeScript in our project to ensure type safety.

1.Create latest VueJS application with npm init vue@latest

We will use npm init vue@latest command to create a latest VueJS application. This command will internally use Vite to create project. The created project will be using a build setup based on Vite.
When you run the command, it will ask you to select the options while creating the project. Give project name and make sure you select yes for all options. It will create the project. Then go to vue-layers directory, install dependencies using npm install and run the the project using using npm run dev.
We have created the the simple basic project using Vite as build tool enabling TypeScript and Pinia

After running the project using npm run dev command, you will see below web page running on the local server.

2. Install Cesium using npm

Next, we will install cesiumjs library using npm

3. Integrating CesiumJS with VueJS

The provided Vue.js component integrates CesiumJS for 3D geospatial visualization. It starts by importing necessary dependencies and setting up Cesium’s access token and base URL. In the mounted lifecycle hook, an OpenStreetMap imagery provider is created and used to instantiate a Cesium Viewer, which is attached to the ‘cesiumContainer’ div. The viewer is configured to use OpenStreetMap for its base layer. Lastly, CSS is applied to ensure the viewer takes up the entire window without causing any scrollbars to appear. This setup results in a Vue application with a full-window Cesium Viewer displaying an OpenStreetMap layer.

If you’re trying to set window.CESIUM_BASE_URL to /static/cesium, you should have a public/static/cesium directory in your project with the Cesium files.

CesiumJS relies on a number of static files, such as Web Workers, images, and other assets, which need to be accessible to the client-side JavaScript at runtime. These files are not bundled into the main Cesium.js file, but are loaded separately as needed. By placing the Cesium static files in the public directory, you ensure that they are accessible to the client-side JavaScript and can be loaded correctly at runtime. When the application is built for production, everything in the public directory is copied to the build output directory, maintaining the same directory structure.

4. Output

I hope this tutorial will create a good foundation for you. If you want tutorials on another GIS topic or you have any queries, please send an email at

We also offer freelancing services. Please email us at for any query.

Leave a ReplyCancel reply