Configuring Cesium to run in Vue.js App

[sanjeetsuhag]

Hi @virtualarchitectures,

I was able to get CesiumJS up and running in a Vue app by following these steps:

1. Install the following dependencies:

npm i cesium # This should be a dependency, not a devDependency
npm i --save-dev copy-webpack-plugin
npm i --save-dev webpack

2. Configure your vue.config.js file as follows:

const { defineConfig } = require("@vue/cli-service");
const path = require("path"); // Not importing the builtin-path module was causing your build failure.
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { DefinePlugin } = require("webpack");

const cesiumSource = "node_modules/cesium/Source";
const cesiumWorkers = "../Build/Cesium/Workers";

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    resolve: {
      fallback: { https: false, zlib: false, http: false, url: false },
    },
    plugins: [
      new DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify(""),
      }),
      new CopyWebpackPlugin({
        patterns: [
          { from: path.join(cesiumSource, "Assets"), to: "Assets" },
          { from: path.join(cesiumSource, "ThirdParty"), to: "ThirdParty" },
          { from: path.join(cesiumSource, "Widgets"), to: "Widgets" },
          { from: path.join(cesiumSource, cesiumWorkers), to: "Workers" },
        ],
      }),
    ],
  },
});

3. Add a new CesiumViewer.vue component:

<script>
import { Viewer } from "cesium";
import "cesium/Source/Widgets/widgets.css";

const viewer = new Viewer("app");
viewer.scene.debugShowFramesPerSecond = true;
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#cesium-container {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
</style>

4. Edit your App.vue component to use the CesiumViewer.vue component:

<template>
  <div id="cesium-container">
    <CesiumViewer />
  </div>
</template>

<script>
import CesiumViewer from "./components/CesiumViewer.vue";

export default {
  name: "App",
  components: {
    CesiumViewer,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

Once you run npm run serve, everything should work:

Hope this helps,
Sam.