How to include mapbox-gl-vue as a plugin with Quasar version 3.2

[JWDobken]

In the past I with quasar-framework version 0.17 I could install mapbox-gl-vue easily by adding the required packages with yarn:

$ yarn create quasar
$ cd quasar-project/
$ yarn add mapbox-gl
$ yarn add mapbox-gl-vue

And extend webpack in quasar.conf.js:

const webpack = require('webpack')
...
    build: {
      extendWebpack (cfg) {
        cfg.plugins.push(
          new webpack.ProvidePlugin({
            mapboxgl: 'mapbox-gl'
          })
        )
    }

and replace the content of IndexPage.vue with:

<template>
  <div id="app">
    <mapbox
      access-token="your access token"
      :map-options="{
        style: 'mapbox://styles/mapbox/light-v9',
        center: [-96, 37.8],
        zoom: 3,
      }"
    />
  </div>
</template>
<script>
import Mapbox from 'mapbox-gl-vue'

export default {
  components: { Mapbox }
}
</script>
<style>
#map {
  width: 100%;
  height: 500px;
}
</style>

With the latest quasar version 2.6.0 I get the following error:

 App •  WARNING  •  UI  in ./node_modules/mapbox-gl-vue/dist/vue-mapbox-gl.esm.js

export 'default' (imported as 't') was not found in 'vue' (possible exports: BaseTransition, Comment, EffectScope, Fragment, KeepAlive, ReactiveEffect, Static, Suspense, Teleport, Text, Transition, TransitionGroup, VueElement, callWithAsyncErrorHandling, callWithErrorHandling, camelize, capitalize, cloneVNode, compatUtils, compile, computed, createApp, createBlock, createCommentVNode, createElementBlock, createElementVNode, createHydrationRenderer, createPropsRestProxy, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, defineAsyncComponent, defineComponent, defineCustomElement, defineEmits, defineExpose, defineProps, defineSSRCustomElement, devtools, effect, effectScope, getCurrentInstance, getCurrentScope, getTransitionRawChildren, guardReactiveProps, h, handleError, hydrate, initCustomFormatter, initDirectivesForSSR, inject, isMemoSame, isProxy, isReactive, isReadonly, isRef, isRuntimeOnly, isShallow, isVNode, markRaw, mergeDefaults, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, openBlock, popScopeId, provide, proxyRefs, pushScopeId, queuePostFlushCb, reactive, readonly, ref, registerRuntimeCompiler, render, renderList, renderSlot, resolveComponent, resolveDirective, resolveDynamicComponent, resolveFilter, resolveTransitionHooks, setBlockTracking, setDevtoolsHook, setTransitionHooks, shallowReactive, shallowReadonly, shallowRef, ssrContextKey, ssrUtils, stop, toDisplayString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, transformVNodeArgs, triggerRef, unref, useAttrs, useCssModule, useCssVars, useSSRContext, useSlots, useTransitionState, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, version, warn, watch, watchEffect, watchPostEffect, watchSyncEffect, withAsyncContext, withCtx, withDefaults, withDirectives, withKeys, withMemo, withModifiers, withScopeId)


 App •  WARNING  • Compilation succeeded but there are warning(s). Please check the log above.

[TobyMosque]

this project as be published 3 years ago, and hadn't support to the Vue3:
try out that other lib:
https://soal.github.io/vue-mapbox/guide/#using-as-es-module