Migration to Vue3 and Vuetify3

.browserslistrc

@@ -1,3 +1,4 @@
 > 1%
 last 2 versions
 not dead
+not ie 11

.eslintrc.js

@@ -4,8 +4,8 @@ module.exports = {
     node: true
   },
   extends: [
-    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
-    'plugin:vue/essential',
+    // consider switching to `plugin:vue/vue3-strongly-recommended` or `plugin:vue/vue3-recommended` for stricter rules.
+    'plugin:vue/vue3-essential',
     'plugin:vuetify/recommended',
     '@vue/standard'
   ],

app-starter/WguAppTemplate.vue

@@ -25,17 +25,17 @@
     <slot name="wgu-after-header" />
 
     <wgu-app-sidebar v-if="sidebarWins.length" v-bind="sidebarConfig">
-        <template v-for="(moduleWin, index) in sidebarWins">
+        <template v-for="(moduleWin, index) in sidebarWins" :key="index">
           <component
-            :is="moduleWin.type" :key="index"
             v-bind="moduleWin"
+            :is="moduleWin.type"
           />
       </template>
     </wgu-app-sidebar>
 
     <slot name="wgu-before-content" />
     <v-main app>
-      <v-container id="ol-map-container" fluid class="fill-height pa-0">
+      <v-container id="ol-map-container" fluid class="fill-height pa-0 position-relative">
         <wgu-map />
         <!-- layer loading indicator -->
         <wgu-maploading-status />
@@ -50,10 +50,10 @@
       </v-container>
     </v-main>
 
-    <template v-for="(moduleWin, index) in floatingWins">
+    <template v-for="(moduleWin, index) in floatingWins" :key="index">
       <component
-        :is="moduleWin.type" :key="index"
         v-bind="moduleWin"
+        :is="moduleWin.type"
       />
     </template>
 
@@ -77,7 +77,7 @@
 </template>
 
 <script>
-import Vue from 'vue'
+import { getCurrentInstance } from 'vue'
 import { WguEventBus } from '../src/WguEventBus'
 import OlMap from '../src/components/ol/Map'
 import HoverTooltip from '../src/components/ol/HoverTooltip'
@@ -118,14 +118,18 @@ export default {
     'wgu-maprecorder-win': MapRecorderWin,
     'sample-module-win': SampleModuleWin
   },
+  setup () {
+    const vueInstance = getCurrentInstance();
+    return { vueInstance };
+  },
   data () {
     return {
       isEmbedded: false,
       sidebarConfig: this.getSidebarConfig(),
       overviewMapConfig: this.getOverviewMapConfig(),
       floatingWins: this.getModuleWinData('floating'),
       sidebarWins: this.getModuleWinData('sidebar'),
-      showCopyrightYear: Vue.prototype.$appConfig.showCopyrightYear
+      showCopyrightYear: this.$appConfig.showCopyrightYear
     }
   },
   created () {
@@ -143,7 +147,7 @@ export default {
     for (const key of Object.keys(refs)) {
       cmpLookup[key] = refs[key][0];
     }
-    Vue.prototype.cmpLookup = cmpLookup;
+    this.vueInstance.appContext.config.globalProperties.cmpLookup = cmpLookup;
     // inform registered cmps that the app is mounted and the dynamic
     // components are available
     WguEventBus.$emit('app-mounted');
@@ -154,15 +158,15 @@ export default {
        * @return {Object} Sidebar configuration object.
        */
     getSidebarConfig () {
-      const appConfig = Vue.prototype.$appConfig || {};
+      const appConfig = this.$appConfig || {};
       return appConfig.sidebar;
     },
     /**
        * Returns the configuration object for the overview map from app-config.
        * @return {Object} Overview map configuration object.
        */
     getOverviewMapConfig () {
-      const appConfig = Vue.prototype.$appConfig || {};
+      const appConfig = this.$appConfig || {};
       return appConfig.overviewMap;
     },
     /**
@@ -175,7 +179,7 @@ export default {
        * @return {Array} module window configuration objects
        */
     getModuleWinData (target) {
-      const appConfig = Vue.prototype.$appConfig || {};
+      const appConfig = this.$appConfig || {};
       const modulesConfs = appConfig.modules || {};
       const moduleWins = [];
       for (const key of Object.keys(modulesConfs)) {
@@ -199,7 +203,7 @@ export default {
      * Sets the current i18n language to the global app language lookup.
      */
     setGlobalAppLang () {
-      Vue.prototype.$appLanguage = this.$i18n.locale;
+      this.vueInstance.appContext.config.globalProperties.$appLanguage = this.$i18n.locale;
     }
   },
   watch: {

app-starter/components/AppFooter.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <v-footer color="primary" class="onprimary--text" app>
+  <v-footer color="primary" app>
     <span class="wgu-footer-left" v-html="footerTextLeft"></span>
     <v-spacer></v-spacer>
     <div class="wgu-footer-right">

app-starter/components/AppHeader.vue

@@ -1,11 +1,7 @@
 <template>
   <v-app-bar
-    class="wgu-app-toolbar onprimary--text"
+    class="wgu-app-toolbar"
     color="primary"
-    fixed
-    app
-    clipped-left
-    clipped-right
   >
 
     <!-- slot to inject components at the beginning (before title) -->
@@ -21,32 +17,31 @@
     <!-- slot to inject components before the auto-generated buttons (by config) -->
     <slot name="wgu-tb-before-auto-buttons"></slot>
 
-    <template v-for="(tbButton, index) in tbButtons">
+    <template v-for="(tbButton, index) in tbButtons" :key="index">
       <component
-        :is="tbButton.type" :key="index"
         v-bind="tbButton"
+        :is="tbButton.type"
       />
     </template>
 
     <!-- slot to inject components after the auto-generated buttons (by config) -->
     <slot name="wgu-tb-after-auto-buttons"></slot>
 
-    <v-menu v-if="menuButtons.length" offset-y nudge-bottom="15">
-      <template v-slot:activator="{on}">
+    <v-menu v-if="menuButtons.length" eager offset="15">
+      <template v-slot:activator="{props}">
 
-      <v-btn icon v-on="on"
+      <v-btn v-bind="props"
         class="wgu-menu-button"
-        color="onprimary"
-        :title="$t('wgu-toolbar-menu.title')">
-        <v-icon medium>menu</v-icon>
+        :title="$t('wgu-toolbar-menu.title')"
+        icon="md:menu">
       </v-btn>
       </template>
-      <v-list color="primary">
-          <template v-for="(tbButton, index) in menuButtons">
-            <v-list-item :key="index">
+      <v-list bg-color="primary">
+          <template v-for="(tbButton, index) in menuButtons" :key="index">
+            <v-list-item class="py-0">
               <component
-                  :is="tbButton.type" :key="index"
                   v-bind="tbButton"
+                  :is="tbButton.type" :key="index"
                />
               </v-list-item>
           </template>
@@ -60,8 +55,6 @@
 </template>
 
 <script>
-
-import Vue from 'vue'
 import ToggleButton from '../../src/components/modulecore/ToggleButton'
 import ZoomToMaxExtentButton from '../../src/components/maxextentbutton/ZoomToMaxExtentButton'
 import Geocoder from '../../src/components/geocoder/Geocoder'
@@ -101,7 +94,7 @@ export default {
      * @return {Array} module button configuration objects
      */
     getModuleButtons (target) {
-      const appConfig = Vue.prototype.$appConfig || {};
+      const appConfig = this.$appConfig || {};
       const modulesConfs = appConfig.modules || {};
       const buttons = [];
       for (const key of Object.keys(modulesConfs)) {

app-starter/components/AppSidebar.vue

@@ -2,23 +2,20 @@
   <v-navigation-drawer
       class="wgu-app-sidebar"
       ref="sidebar"
-      app
-      clipped
       :width=sidebarWidth
       v-model="sidebarOpen"
       >
       <!-- Forward the default slot for sidebar content. -->
       <slot></slot>
       <!-- Sidebar toggle button -->
       <template v-slot:prepend>
-        <v-btn small
-          class="wgu-app-sidebar-toggle-btn px0"
-          absolute
-          top
+        <v-btn size="small"
+          class="wgu-app-sidebar-toggle-btn position-absolute px0"
+          location="top right"
           color="secondary"
           @click="sidebarOpen = !sidebarOpen">
-          <v-icon color="onsecondary" v-if="sidebarOpen">chevron_left</v-icon>
-          <v-icon color="onsecondary" v-else>chevron_right</v-icon>
+          <v-icon color="onsecondary" v-if="sidebarOpen">md:chevron_left</v-icon>
+          <v-icon color="onsecondary" v-else>md:chevron_right</v-icon>
         </v-btn>
       </template>
       <!-- Invisible sidebar resizer -->
@@ -30,8 +27,8 @@
 </template>
 
 <script>
-
 import { WguEventBus } from '../../src/WguEventBus';
+import { useGoTo } from 'vuetify'
 
 export default {
   name: 'wgu-app-sidebar',
@@ -44,6 +41,10 @@ export default {
     scrollDuration: { type: Number, required: false, default: 500 },
     resizable: { type: Boolean, required: false, default: false }
   },
+  setup () {
+    const goTo = useGoTo();
+    return { goTo };
+  },
   data () {
     return {
       sidebarOpen: this.visible,
@@ -73,7 +74,7 @@ export default {
      */
     scrollTo (comp) {
       if (this.autoScroll) {
-        this.$vuetify.goTo(comp, {
+        this.goTo(comp, {
           container: '.wgu-app-sidebar > .v-navigation-drawer__content',
           duration: this.scrollDuration
         });
@@ -83,7 +84,7 @@ export default {
      * Resize the sidebar, if the 'resizable' option is enabled.
      */
     onResize () {
-      const sidebarEl = this.$refs.sidebar.$el;
+      const sidebarEl = this.$refs.sidebar.$el.nextSibling;
       sidebarEl.style.transition = 'initial';
 
       // Resize on mouse move

app-starter/components/SampleModule.vue

@@ -30,7 +30,8 @@
 // the module card is a the template for a typical Wegue module
 import ModuleCard from '../../src/components/modulecore/ModuleCard';
 // we import a so called "mixin" that helps us to interact with the map
-import { Mapable } from '../../src/mixins/Mapable';
+// import { Mapable } from '../../src/mixins/Mapable';
+import { useMap } from '../../src/composables/Map';
 // an OpenLayers helper function to display coordinates
 import { toStringXY } from 'ol/coordinate';
 // an OpenLayer helper function to transform coordinate reference systems
@@ -39,21 +40,35 @@ import { transform } from 'ol/proj.js';
 export default {
   name: 'sample-module',
   // make sure to register the 'Mapable' mixin
-  mixins: [Mapable],
+  // mixins: [Mapable],
   inheritAttrs: false,
   components: {
     'wgu-module-card': ModuleCard
   },
   props: {
-    icon: { type: String, required: false, default: 'star' }
+    icon: { type: String, required: false, default: 'md:star' }
   },
   // here we define variables that are used in the HTML above
+  setup () {
+    const { map, layers } = useMap();
+    return { map, layers };
+  },
   data () {
     return {
       zoom: '',
       center: ''
     };
   },
+  watch: {
+    map: {
+      handler (newMap) {
+        if (newMap) {
+          this.onMapBound();
+        }
+      },
+      immediate: true
+    }
+  },
   methods: {
     /**
      * This function is called once the map is bound to the application

app-starter/static/app-conf-minimal.json

@@ -47,8 +47,7 @@
     "wgu-helpwin": {
       "target": "toolbar",
       "win": "floating",
-      "icon": "help"
+      "icon": "md:help"
     }
   }
-
 }

app-starter/static/app-conf-projected.json

@@ -5,8 +5,8 @@
     "themes": {
       "light": {
         "primary": "#EF6C00",
-        "onprimary": "#FFFFFF",
-        "onsecondary": "#FFFFFF"
+        "on-primary": "#FFFFFF",
+        "on-secondary": "#FFFFFF"
       },
       "dark": {
         "secondary": "#FFCC80"
@@ -146,13 +146,13 @@
     "wgu-layerlist": {
       "target": "menu",
       "win": "floating",
-      "icon": "layers",
+      "icon": "md:layers",
       "draggable": false
     },
     "wgu-measuretool": {
       "target": "menu",
       "win": "floating",
-      "icon": "photo_size_select_small",
+      "icon": "md:photo_size_select_small",
       "draggable": false,
       "strokeColor": "#c62828",
       "fillColor": "rgba(198,40,40,0.2)",
@@ -163,8 +163,8 @@
     },
     "wgu-infoclick": {
       "target": "menu",
-      "win":"floating",
-      "icon": "info",
+      "win": "floating",
+      "icon": "md:info",
       "draggable": false,
       "initPos": {
         "left": 8,
@@ -200,11 +200,10 @@
     "wgu-helpwin": {
       "target": "toolbar",
       "win": "floating",
-      "icon": "help"
+      "icon": "md:help"
     },
     "wgu-localeswitcher": {
       "target": "toolbar"
     }
   }
-
 }