Using the ArcGIS API for JavaScript with Vue

@arcgis/cli

The quickest way to get started using the ArcGIS API for JavaScript with Vue is to use the @arcgis/cli.

@arcgis/cli

npm install -g @arcgis/cli

Once you have installed the CLI, you can generate a Vue project.

Scaffold a Vue project

arcgis create arcgis-vue-app -t vue

You can read more details about creating template applications in the @arcgis/cli GitHub repo.

The Vue template application is a starting point for building your own custom application. It is built with @arcgis/webpack-plugin, TypeScript, and webpack.

With Vue CLI and Esri Loader

If you prefer to use the Vue CLI to generate your Vue application, you can use esri-loader to integrate the ArcGIS API for JavaScript into your application.

You can install the Vue CLI to your machine.

Install vue-cli

npm install -g @vue/cli

Once it is installed, you can create a Vue template application. Start with a default application, or customize it to use the features you want.

Create a Vue project

vue create arcgis-vue-app
cd arcgis-vue-app

When your application is installed, install esri-loader.

Install esri-loader

npm install --save esri-loader

Use the ArcGIS API for JavaScript

Integrate the ArcGIS API for JavaScript into your Vue application, using either webpack-plugin or esri-loader.

<template>
    <div></div>
</template>

<script>
import ArcGISMap from 'esri/Map';
import MapView from 'esri/views/MapView';

export default {
    name: 'web-map',
    mounted() {
      const map = new ArcGISMap({
        basemap: 'topo-vector'
      });
      this.view = new MapView({
        container: this.$el,
        map: map,
        center: [-118, 34],
        zoom: 8
      });
    },
    beforeDestroy() {
      // destroy the map view
      if (this.view) {
        this.view.container = null;
      }
    }
};
</script>

<style lang="scss" scoped>
div {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}
</style>

<template>
  <div></div>
</template>

<script>
import { loadModules } from 'esri-loader';

export default {
  name: 'web-map',
  mounted() {
    // lazy load the required ArcGIS API for JavaScript modules and CSS
    loadModules(['esri/Map', 'esri/views/MapView'], { css: true })
    .then(([ArcGISMap, MapView]) => {
      const map = new ArcGISMap({
        basemap: 'topo-vector'
      });

      this.view = new MapView({
        container: this.$el,
        map: map,
        center: [-118, 34],
        zoom: 8
      });
    });
  },
  beforeDestroy() {
    if (this.view) {
      // destroy the map view
      this.view.container = null;
    }
  }
};

</script>

<style scoped>
div {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
</style>

In either case, the component is used in the same way.

App.vue

<template>
    <div id="app">
        <web-map />
    </div>
</template>

<script>
import WebMap from './components/WebMap.vue';

export default {
    name: 'App',
    components: { WebMap }
};
</script>

<style>
html,body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
#app {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
</style>