does EditableGeoJsonLayer support in vue?

[nipeone]

I refer to "use EditableGeoJsonLayer without react". but not works. i have any errors?

version like this below:

"dependencies": {
    "@deck.gl-community/editable-layers": "^9.0.3",
    "@deck.gl-community/layers": "^9.0.3",
    "deck.gl": "^9.1.3",
    "pinia": "^3.0.1",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0"
  }

<template>
  <div id="map" ref="mapContainer"></div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref } from 'vue';
import { Deck } from '@deck.gl/core';
import { GeoJsonLayer } from '@deck.gl/layers';
import { EditableGeoJsonLayer, DrawRectangleMode } from '@deck.gl-community/editable-layers';

const mapContainer = ref<HTMLDivElement | null>(null);
let deck: Deck | null = null;

// empty GeoJSON data
const myFeatureCollection = {
  type: 'FeatureCollection',
  features: []
};

const COUNTRIES =
  "https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_scale_rank.geojson"; //eslint-disable-line
const AIR_PORTS =
  "https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson";

const INITIAL_VIEW_STATE = {
  latitude: 51.47,
  longitude: 0.45,
  zoom: 4,
  bearing: 0,
  pitch: 0
};

const getLayers = () => {
  const layers = [
    new GeoJsonLayer({
      id: 'base-map',
      data: COUNTRIES,
      // Styles
      stroked: true,
      filled: true,
      lineWidthMinPixels: 2,
      opacity: 0.4,
      getLineColor: [60, 60, 60],
      getFillColor: [200, 200, 200]
    }),

    new GeoJsonLayer({
      id: 'airports',
      data: AIR_PORTS,
      // Styles
      filled: true,
      pointRadiusMinPixels: 2,
      pointRadiusScale: 2000,
      getRadius: (f) => 11 - f.properties.scalerank,
      getFillColor: [200, 0, 80, 180],
      // Interactive props
      pickable: true,
      autoHighlight: true,
      onClick: (info) => {
        if (info.object) {
          alert(`${info.object.properties.name} (${info.object.properties.abbrev})`);
        }
      }
    }),

    new EditableGeoJsonLayer({
      id: 'nebula',
      data: myFeatureCollection,
      selectedFeatureIndexes: [],
      mode: DrawRectangleMode,

      // Styles
      filled: true,
      pointRadiusMinPixels: 2,
      pointRadiusScale: 2000,
      extruded: true,
      getElevation: 1000,
      getFillColor: [200, 0, 80, 180],

      // Interactive props
      pickable: true,
      autoHighlight: true,

      onEdit: ({ updatedData }) => {
        console.log(updatedData);
        // myFeatureCollection.features = updatedData.features;
        // deck?.setProps({ layers: getLayers() });
      }
    })
  ];

  return layers;
};

onMounted(() => {
  const layers = getLayers();
  const editableGeoJsonLayer = layers[2];

  deck = new Deck({
    container: mapContainer.value!,
    initialViewState: INITIAL_VIEW_STATE,
    // Disable double-click to zoom since that completes the shape
    controller: {
      doubleClickZoom: false
    },
    layers: layers,
    getCursor: editableGeoJsonLayer.getCursor.bind(editableGeoJsonLayer)
  });
});

onBeforeUnmount(() => {
  if (deck) {
    deck.finalize();
  }
});
</script>

<style scoped>
#map {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>