Vue 8.2 create custom element in vite.config, element not created ion view create

Ionic Framework Ionic Vue
1

I am trying to use the latest capacitor google maps.

it says for vue to make sure to define a custom element in vite.config

so, I added it to my vite.config

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => 
          {
            if (tag.startsWith('capacitor-')){
               console.log(" found tag ="+tag); return true
            }
          }
        },
      },
    }),
    legacy()
  ],
```
and I get the message during build
```
> vite build
vite v5.2.12 building for production...
transforming (161) src/views/Config.vue found tag =capacitor-google-map  
✓ 432 modules transformed.
```
BUT that is the wrong filename, it is in src/views/MapView.vue
I think this filename is random, as I get all kinds of filenames


BUT when my view is routed to , the element does not get created


<template>
<ion-page>
    <ion-content>
    <capacitor-google-map id="map" ref="mapRef" style="display: inline-block; width: 100vw; height: 60vh"></capacitor-google-map>

    <!-- <button onclick="createMap()">Create Map</button>  -->
    <ion-button @click="returnToSelect()"  style="height:20vh;" >return</ion-button>
</ion-content>
</ion-page>
</template>

document.getElementById('map')
returns null

      console.log(this.$refs)
      console.log("ref contents")
      console.log(this.$refs.mapRef)

[log] - {“mapRef”:{}}

:high_voltage: [log] - ref contents

:high_voltage: [log] - {}

I know this app is downlevel, but I can’t uplevel it now. and

I need map to work again to get thru user test.

I create the map on didEnter

    ionViewDidEnter() {
        console.log("did enter");
        this.createMap()
    },

the button in the template does get created and works..

2

Nobody has any ideas?