Verify that Node.js, npm, and Vue CLI are installed on your system. Open a command prompt with administrative privileges and run the following commands to check the versions:

node -v
npm -v
vue --version

If version numbers are displayed, the environment is ready.

Initialize a new Vue 3 project by executing:

vue create my-vue-cesium-app

During setup, select manual configuration. Choose Vue 3, then configure options like router history mode, CSS preprocessor, and linting rules as needed. For the router, decide whether to enable history mode based on your server setup. When prompted for CSS preprocessing, select a preferred tool such as Sass. Opt for a linter like ESLint with formatting on save. Place configuration files in dedicated files rather than inline. Skip saving the preset.

After the project is created, open it in an editor and installl Cesium as a development dependency:

npm install cesium --save-dev

Update vue.config.js to configure Webpack for Cesium:

const CopyPlugin = require('copy-webpack-plugin');
const path = require('path');
const webpack = require('webpack');

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

module.exports = {
  configureWebpack: {
    output: {
      sourcePrefix: ''
    },
    resolve: {
      fallback: { https: false, zlib: false, http: false, url: false }
    },
    plugins: [
      new CopyPlugin({
        patterns: [
          { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' },
          { from: path.join(cesiumSource, 'Assets'), to: 'Assets' },
          { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' },
          { from: path.join(cesiumSource, 'ThirdParty'), to: 'ThirdParty' }
        ]
      }),
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify('')
      })
    ]
  }
};

Create a CSS file at src/styles/global.css with basic styles:

html, body, #app {
  height: 100%;
  margin: 0;
  padding: 0;
}

Import this CSS in main.js:

import './styles/global.css';

Obtain an access token from the Cesium website. Replace the placeholder in the App component with your token.

Modify App.vue to initialize the Cesium viewer:

<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import { Ion, Viewer } from 'cesium';
import 'cesium/Build/Cesium/Widgets/widgets.css';

Ion.defaultAccessToken = 'your_access_token_here';

onMounted(() => {
  const viewer = new Viewer('cesiumContainer', {
    animation: true,
    baseLayerPicker: true,
    fullscreenButton: true,
    geocoder: true,
    homeButton: true,
    infoBox: true,
    sceneModePicker: true,
    selectionIndicator: true,
    timeline: true,
    navigationHelpButton: false
  });
  viewer._cesiumWidget._creditContainer.style.display = 'none';
});
</script>

<style scoped>
#cesiumContainer {
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>

Start the development server:

npm run serve

The application will launch with the Cesium viewer embedded.