Switch from vue-cli/webpack to Vite

.env

@@ -1,8 +1,8 @@
-VUE_APP_API_URL="https://sotl.as/api"
-VUE_APP_WSS_URL="wss://sotl.as/api"
-VUE_APP_PHOTOS_URL="https://photos.sotl.as"
-VUE_APP_PHOTOS_ORIGINAL_URL="https://sotlas-photos.s3.eu-central-003.backblazeb2.com/original"
-VUE_APP_ELEVATION_API_URL="https://elevation.sotl.as/api"
-VUE_APP_MAPTILER_KEY="iIWOzto6cj259kSj9cSV"
-VUE_APP_AZ_URL="https://az.sotl.as"
+VITE_API_URL="https://sotl.as/api"
+VITE_WSS_URL="wss://sotl.as/api"
+VITE_PHOTOS_URL="https://photos.sotl.as"
+VITE_PHOTOS_ORIGINAL_URL="https://sotlas-photos.s3.eu-central-003.backblazeb2.com/original"
+VITE_ELEVATION_API_URL="https://elevation.sotl.as/api"
+VITE_MAPTILER_KEY="iIWOzto6cj259kSj9cSV"
+VITE_AZ_URL="https://az.sotl.as"
 PUBLIC_PATH=/

babel.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  presets: [
-    '@vue/app'
-  ]
-}

index.html

@@ -4,11 +4,11 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="apple-touch-icon" sizes="180x180" href="<%= BASE_URL %>apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="<%= BASE_URL %>favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="<%= BASE_URL %>favicon-16x16.png">
-    <link rel="manifest" href="<%= BASE_URL %>site.webmanifest">
-    <link rel="mask-icon" href="<%= BASE_URL %>safari-pinned-tab.svg" color="#5bbad5">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
     <meta name="msapplication-TileColor" content="#da532c">
     <meta name="theme-color" content="#ffffff">
     <title>SOTLAS</title>
@@ -32,6 +32,6 @@
       }
     </script>
     <div id="app"></div>
-    <!-- built files will be auto injected -->
+    <script type="module" src="/src/main.js"></script>
   </body>
 </html>

package.json

@@ -6,11 +6,10 @@
     "node": "20.x"
   },
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "prebuild": "vsvg -s ./svg-icons -t ./src/compiled-icons",
-    "build": "vue-cli-service build",
+    "dev": "vite",
+    "build": "vite build",
     "lint": "vue-cli-service lint",
-    "generate-icons": "vsvg -s ./svg-icons -t ./src/compiled-icons"
+    "serve": "vite preview"
   },
   "dependencies": {
     "@dsb-norge/vue-keycloak-js": "github:manuelkasper/vue-keycloak-js#sotlas3",
@@ -26,6 +25,7 @@
     "@tmcw/togeojson": "^3.2.0",
     "axios": "^1.11.0",
     "buefy": "^0.8.20",
+    "bulma": "^0.7.5",
     "cheap-ruler": "^2.5.1",
     "core-js": "^3.37.0",
     "filepond": "^4.30.4",
@@ -53,6 +53,7 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.24.1",
+    "@vitejs/plugin-vue2": "^2.3.3",
     "@vue/cli-plugin-babel": "^5.0.8",
     "@vue/cli-plugin-eslint": "^5.0.8",
     "@vue/cli-service": "^5.0.8",
@@ -63,7 +64,7 @@
     "node-sass": "^9.0.0",
     "sass": "^1.75.0",
     "sass-loader": "^14.2.1",
-    "vue-svgicon": "^3.2.9",
+    "vite": "^6.3.5",
     "vue-template-compiler": "^2.7.14"
   },
   "eslintConfig": {

src/App.vue

@@ -16,11 +16,10 @@ export default {
 </script>
 
 <style lang="scss">
-@import "bulma/sass/utilities/_all";
+@import "bulma/bulma.sass";
 
 $link: $blue;
 
-@import "bulma";
 @import "buefy/src/scss/buefy";
 @import "flagpack/dist/flagpack.css";
 @import '@maptiler/sdk/dist/maptiler-sdk.css';

src/components/BasemapAtInfo.vue

@@ -29,7 +29,7 @@ export default {
   mounted () {
     if (!localStorage.getItem('basemapAtInfoShown')) {
       // Check if we are in Austria
-      axios.get(process.env.VUE_APP_API_URL + '/my_country')
+      axios.get(import.meta.env.VITE_API_URL + '/my_country')
         .then(response => {
           if (response.data.country === 'AT') {
             this.active = true

src/components/Coordinates.vue

@@ -104,7 +104,7 @@ export default {
       if (!this.latitude || !this.longitude || !this.showElevation) {
         return
       }
-      axios.post(process.env.VUE_APP_ELEVATION_API_URL, [[this.latitude, this.longitude]])
+      axios.post(import.meta.env.VITE_ELEVATION_API_URL, [[this.latitude, this.longitude]])
         .then(result => {
           this.elevation = Math.round(result.data[0])
         })
@@ -130,7 +130,7 @@ export default {
         })
     },
     makeAzUrlForType (type) {
-      return process.env.VUE_APP_AZ_URL + '/' + this.reference.replace('-', '/') + '.' + type
+      return import.meta.env.VITE_AZ_URL + '/' + this.reference.replace('-', '/') + '.' + type
     }
   },
   data () {

src/components/EditAlert.vue

@@ -163,7 +163,7 @@ export default {
             } else {
               this.summitLoading = true
               this.summitCodeXxx = false
-              axios.get(process.env.VUE_APP_API_URL + '/summits/' + this.summitCode)
+              axios.get(import.meta.env.VITE_API_URL + '/summits/' + this.summitCode)
                 .then(response => {
                   this.summitLoading = false
                   this.summitInvalid = false

src/components/EditSpot.vue

@@ -144,7 +144,7 @@ export default {
           if (matches) {
             this.summitCode = (matches[1] + '/' + matches[2] + '-' + matches[3]).toUpperCase()
             this.summitLoading = true
-            axios.get(process.env.VUE_APP_API_URL + '/summits/' + this.summitCode)
+            axios.get(import.meta.env.VITE_API_URL + '/summits/' + this.summitCode)
               .then(response => {
                 this.summitLoading = false
                 this.summitInvalid = false

src/components/MapDraw.vue

@@ -293,7 +293,7 @@ export default {
       }
 
       this.loading = true
-      axios.post(process.env.VUE_APP_ELEVATION_API_URL, eleCoordinates)
+      axios.post(import.meta.env.VITE_ELEVATION_API_URL, eleCoordinates)
         .then(result => {
           this.chartData = result.data.map((elevation, i) => {
             return {
@@ -353,7 +353,7 @@ export default {
         }
 
         let coordsSwapped = feature.geometry.coordinates.map(coord => [coord[1], coord[0]])
-        return axios.post(process.env.VUE_APP_ELEVATION_API_URL, coordsSwapped)
+        return axios.post(import.meta.env.VITE_ELEVATION_API_URL, coordsSwapped)
           .then(result => {
             result.data.forEach((elevation, index) => {
               if (feature.geometry.coordinates[index].length === 2) {

src/components/MiniMap.vue

@@ -26,7 +26,6 @@ import MapWebcams from './MapWebcams.vue'
 import mapstyle from '../mixins/mapstyle.js'
 import utils from '../mixins/utils.js'
 import longtouch from '../mixins/longtouch.js'
-import reportMapSession from '../mapsession.js'
 
 export default {
   name: 'MiniMap',
@@ -172,8 +171,6 @@ export default {
         this.map.dragPan.disable()
       }
       this.highlightCurrentSummit()
-
-      reportMapSession()
     },
     onMapClicked (event) {
       if (event.mapboxEvent.originalEvent.hitMarker) {

src/components/NearbySummitsList.vue

@@ -28,7 +28,7 @@ export default {
           this.loading = true
           navigator.geolocation.getCurrentPosition(
             position => {
-              axios.get(process.env.VUE_APP_API_URL + '/summits/near', { params: { lat: position.coords.latitude, lon: position.coords.longitude, limit: 5, maxDistance: 100000 } })
+              axios.get(import.meta.env.VITE_API_URL + '/summits/near', { params: { lat: position.coords.latitude, lon: position.coords.longitude, limit: 5, maxDistance: 100000 } })
                 .then(response => {
                   if (response.data.length === 0) {
                     alert('No summits within 100 km.')

src/components/RouteAttributes.vue

@@ -10,7 +10,7 @@
       </font-awesome-layers>
     </b-tooltip>
     <b-tooltip v-if="route.cableCar" :active="!$mq.mobile" label="Cable car/funicular available" type="is-info" position="is-bottom">
-      <svgicon icon="icons8-cable-car" />
+      <img src="@/assets/svg-icons/icons8-cable-car.svg" class="svg-icon" />
     </b-tooltip>
     <b-tooltip v-if="route.track" :active="!$mq.mobile" label="GPS track available" type="is-info" position="is-bottom">
       <TrackLink :route="route" :summit="summit"><font-awesome-icon class="fa-icon" :icon="['far', 'location']" /></TrackLink>
@@ -22,7 +22,6 @@
 </template>
 
 <script>
-import '../compiled-icons'
 import TrackLink from './TrackLink.vue'
 
 export default {

src/components/SearchField.vue

@@ -95,7 +95,7 @@ const SUMMIT_REF_EXACT_REGEX = /^([A-Z0-9]{1,3})\/([A-Z]{2})-([0-9]{3})$/i
 const SUMMIT_REF_RELAXED_REGEX = /^([A-Z0-9]{1,3})[/ ]?([A-Z]{2})[- ]?([0-9]{3})$/i
 const REGION_NUM_REGEX = /^([A-Z]{2})[ -]?([0-9]{3})$/i
 
-maptilersdk.config.apiKey = process.env.VUE_APP_MAPTILER_KEY
+maptilersdk.config.apiKey = import.meta.env.VITE_MAPTILER_KEY
 
 export default {
   name: 'NavBar',
@@ -267,8 +267,8 @@ export default {
           geoResults = []
         }
         const [activatorResp, summitResp] = await Promise.all([
-          axios.get(process.env.VUE_APP_API_URL + '/activators/search', { params: { q: value, limit: 5 } }),
-          axios.get(process.env.VUE_APP_API_URL + '/summits/search', { params: { q: this.normalizeSummitRef(value), limit: 50 } })
+          axios.get(import.meta.env.VITE_API_URL + '/activators/search', { params: { q: value, limit: 5 } }),
+          axios.get(import.meta.env.VITE_API_URL + '/summits/search', { params: { q: this.normalizeSummitRef(value), limit: 50 } })
         ])
         activatorResults = this.makeActivatorResults(activatorResp.data)
         summitResults = this.makeSummitResults(summitResp.data, proximity)

src/components/SolarData.vue

@@ -36,7 +36,7 @@ export default {
   },
   methods: {
     loadSolarData () {
-      axios.get(process.env.VUE_APP_API_URL + '/solardata/latest', { ignoreError: true })
+      axios.get(import.meta.env.VITE_API_URL + '/solardata/latest', { ignoreError: true })
         .then(response => {
           this.latest = response.data
         })

src/components/SummitAttributes.vue

@@ -1,14 +1,13 @@
 <template>
   <div v-if="attributes && Object.keys(attributes).length > 0" class="attribute-list">
     <ul>
-      <li v-for="item in attributes" :key="item.icon"><div><svgicon :icon="item.icon" color="#555" />{{ item.text }}</div></li>
+      <li v-for="item in attributes" :key="item.icon"><div><img :src="getIconUrl(item.icon)" class="svg-icon" />{{ item.text }}</div></li>
     </ul>
   </div>
 </template>
 
 <script>
 import axios from 'axios'
-import '../compiled-icons'
 
 export default {
   name: 'SummitAttributes',
@@ -45,6 +44,9 @@ export default {
         .then(response => {
           this.tagData = response.data.filter(tag => { return tag.Active && this.tagIconMap[tag.TagID] })
         })
+    },
+    getIconUrl(icon) {
+      return new URL(`../assets/svg-icons/${icon}.svg`, import.meta.url).href
     }
   },
   data () {

src/components/SwisstopoInfo.vue

@@ -38,7 +38,7 @@ export default {
   mounted () {
     if (!localStorage.getItem('swisstopoInfoShown')) {
       // Check if we are in Switzerland
-      axios.get(process.env.VUE_APP_API_URL + '/my_country')
+      axios.get(import.meta.env.VITE_API_URL + '/my_country')
         .then(response => {
           if (response.data.country === 'CH') {
             this.active = true

src/main.js

@@ -2,7 +2,6 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import Buefy from 'buefy'
-import VueSVGIcon from 'vue-svgicon'
 import vueDebounce from 'vue-debounce'
 import VueClipboard from 'vue-clipboard2'
 import MatchMedia from 'vue-match-media/src'
@@ -36,7 +35,6 @@ library.add(faMap, fasCheckCircle, fasChevronCircleDown, fasChevronCircleUp, faP
 library.add(faWikipediaW, faGoogle, faGithub)
 Vue.component('font-awesome-icon', FontAwesomeIcon)
 Vue.component('font-awesome-layers', FontAwesomeLayers)
-Vue.use(VueSVGIcon)
 Vue.use(vueDebounce)
 Vue.use(VueClipboard)
 Vue.use(Buefy, {

src/mapsession.js

@@ -1,14 +0,0 @@
-import axios from 'axios'
-
-let mapSessionReported = false
-
-function reportMapSession () {
-  if (mapSessionReported) {
-    return
-  }
-  axios.post(process.env.VUE_APP_API_URL + '/mapsession', { type: 'maptiler' })
-    .catch(() => {})
-  mapSessionReported = true
-}
-
-export default reportMapSession

src/mixins/api.js

@@ -5,7 +5,7 @@ export default {
   mixins: [ssoauth],
   methods: {
     loadActivations (callsign) {
-      return axios.get(process.env.VUE_APP_API_URL + '/activations/' + callsign)
+      return axios.get(import.meta.env.VITE_API_URL + '/activations/' + callsign)
         .then(response => {
           return response.data
         })
@@ -13,23 +13,23 @@ export default {
     uploadPhoto (summitCode, file, progress, cancelToken) {
       let formData = new FormData()
       formData.append('photo', file)
-      return this.axiosAuth.post(process.env.VUE_APP_API_URL + '/photos/summits/' + summitCode + '/upload', formData, {
+      return this.axiosAuth.post(import.meta.env.VITE_API_URL + '/photos/summits/' + summitCode + '/upload', formData, {
         headers: { 'Content-Type': 'multipart/form-data' },
         onUploadProgress: progress,
         cancelToken
       })
     },
     deletePhoto (summitCode, filename) {
-      return this.axiosAuth.delete(process.env.VUE_APP_API_URL + '/photos/summits/' + summitCode + '/' + filename)
+      return this.axiosAuth.delete(import.meta.env.VITE_API_URL + '/photos/summits/' + summitCode + '/' + filename)
     },
     editPhoto (summitCode, filename, data) {
-      return this.axiosAuth.post(process.env.VUE_APP_API_URL + '/photos/summits/' + summitCode + '/' + filename, data)
+      return this.axiosAuth.post(import.meta.env.VITE_API_URL + '/photos/summits/' + summitCode + '/' + filename, data)
     },
     reorderPhotos (summitCode, filenames) {
-      return this.axiosAuth.post(process.env.VUE_APP_API_URL + '/photos/summits/' + summitCode + '/reorder', { filenames })
+      return this.axiosAuth.post(import.meta.env.VITE_API_URL + '/photos/summits/' + summitCode + '/reorder', { filenames })
     },
     loadActivator (userIdOrCallsign) {
-      return axios.get(process.env.VUE_APP_API_URL + '/activators/' + userIdOrCallsign)
+      return axios.get(import.meta.env.VITE_API_URL + '/activators/' + userIdOrCallsign)
         .then(response => {
           return response.data
         })

src/mixins/mapstyle.js

@@ -35,10 +35,10 @@ export default {
       // Patch MapTiler key
       Object.values(style.sources).forEach(source => {
         if (source.url) {
-          source.url = source.url.replace('{key}', process.env.VUE_APP_MAPTILER_KEY)
+          source.url = source.url.replace('{key}', import.meta.env.VITE_MAPTILER_KEY)
         }
       })
-      style.glyphs = style.glyphs.replace('{key}', process.env.VUE_APP_MAPTILER_KEY)
+      style.glyphs = style.glyphs.replace('{key}', import.meta.env.VITE_MAPTILER_KEY)
 
       // Patch units
       if (this.$store.state.altitudeUnits === 'ft') {
@@ -61,7 +61,7 @@ export default {
       return mapType
     },
     mapApiKey () {
-      return process.env.VUE_APP_MAPTILER_KEY
+      return import.meta.env.VITE_MAPTILER_KEY
     },
     mapUnits () {
       if (this.$store.state.altitudeUnits === 'ft') {

src/mixins/photos.js

@@ -2,9 +2,9 @@ export default {
   methods: {
     photoSrc (photo, size) {
       if (size === 'original') {
-        return process.env.VUE_APP_PHOTOS_ORIGINAL_URL + '/' + photo.filename
+        return import.meta.env.VITE_PHOTOS_ORIGINAL_URL + '/' + photo.filename
       } else {
-        return process.env.VUE_APP_PHOTOS_URL + '/' + size + '/' + photo.filename
+        return import.meta.env.VITE_PHOTOS_URL + '/' + size + '/' + photo.filename
       }
     }
   }

src/mixins/sotadb.js

@@ -6,7 +6,7 @@ export default {
   mixins: [ssoauth, utils],
   methods: {
     loadActivations (callsign) {
-      return axios.get(process.env.VUE_APP_API_URL + '/activations/' + callsign)
+      return axios.get(import.meta.env.VITE_API_URL + '/activations/' + callsign)
         .then(response => {
           return response.data
         })

src/router.js

@@ -23,7 +23,7 @@ Vue.use(Router)
 
 let router = new Router({
   mode: 'history',
-  base: process.env.BASE_URL,
+  base: import.meta.env.BASE_URL,
   routes: [
     {
       path: '/',

src/store.js

@@ -205,7 +205,7 @@ function loadAlerts (noCache) {
   if (noCache) {
     params.noCache = 1
   }
-  axios.get(process.env.VUE_APP_API_URL + '/alerts', { params })
+  axios.get(import.meta.env.VITE_API_URL + '/alerts', { params })
     .then(response => {
       store.commit('setAlerts', response.data)
     })
@@ -214,7 +214,7 @@ function loadAlerts (noCache) {
 loadAlerts(false)
 setInterval(loadAlerts, ALERT_UPDATE_INTERVAL)
 
-Vue.use(VueNativeSock, process.env.VUE_APP_WSS_URL + '/ws', {
+Vue.use(VueNativeSock, import.meta.env.VITE_WSS_URL + '/ws', {
   format: 'json',
   store,
   reconnection: true,

src/views/Activator.vue

@@ -6,7 +6,7 @@
       <div v-if="activator" class="subtitle is-size-7-mobile">
         <div class="activator-info">
           <span><strong>{{ activator.points + activator.bonusPoints }} points</strong><template v-if="activator.bonusPoints > 0"> ({{ activator.bonusPoints }} bonus)</template></span>
-          <span v-if="mountainGoats > 0"><b-tooltip class="goat-tooltip" label="mountain goat"><svgicon class="goat-icon" icon="goat" /></b-tooltip> x {{ mountainGoats }}</span>
+          <span v-if="mountainGoats > 0"><b-tooltip class="goat-tooltip" label="mountain goat"><img src="@/assets/svg-icons/goat.svg" class="goat-icon" /></b-tooltip> x {{ mountainGoats }}</span>
         </div>
         <div class="activator-info">
           <span><font-awesome-icon :icon="['far', 'chevron-circle-up']" class="faicon" /> {{ activator.summits }} activations<template v-if="activationsThisYear"> ({{ activationsThisYear }} this year)</template></span>

src/views/Activators.vue

@@ -63,7 +63,7 @@ export default {
   methods: {
     loadData () {
       this.loading = true
-      axios.get(process.env.VUE_APP_API_URL + '/activators/search', { params: { q: this.filter, skip: (this.curPage - 1) * this.perPage, limit: this.perPage, sort: this.sortField, sortDirection: this.sortDirection } })
+      axios.get(import.meta.env.VITE_API_URL + '/activators/search', { params: { q: this.filter, skip: (this.curPage - 1) * this.perPage, limit: this.perPage, sort: this.sortField, sortDirection: this.sortDirection } })
         .then(response => {
           this.activators = response.data.activators
           this.total = response.data.total

src/views/Association.vue

@@ -79,7 +79,7 @@ export default {
     },
     loadAssociation () {
       this.loadingComponent = this.$buefy.loading.open({ canCancel: true })
-      axios.get(process.env.VUE_APP_API_URL + '/associations/' + this.associationCode)
+      axios.get(import.meta.env.VITE_API_URL + '/associations/' + this.associationCode)
         .then(response => {
           this.association = response.data
           document.title = this.association.name + ' (' + this.associationCode + ') - SOTLAS'
@@ -104,7 +104,7 @@ export default {
       })
     },
     exportUrlPrefix () {
-      return process.env.VUE_APP_API_URL + '/geoexport/associations/' + this.associationCode
+      return import.meta.env.VITE_API_URL + '/geoexport/associations/' + this.associationCode
     },
     myActivationsPerRegion () {
       if (!this.$store.state.myActivatedSummits) {

src/views/AssociationList.vue

@@ -54,7 +54,7 @@ export default {
   mounted () {
     document.title = 'Associations - SOTLAS'
     this.loadingComponent = this.$buefy.loading.open({ canCancel: true })
-    axios.get(process.env.VUE_APP_API_URL + '/associations/all')
+    axios.get(import.meta.env.VITE_API_URL + '/associations/all')
       .then(response => {
         this.associations = response.data
         this.loadingComponent.close()

src/views/Map.vue

@@ -43,7 +43,6 @@ import utils from '../mixins/utils.js'
 import smptracks from '../mixins/smptracks.js'
 import mapstyle from '../mixins/mapstyle.js'
 import longtouch from '../mixins/longtouch.js'
-import reportMapSession from '../mapsession.js'
 
 import { MglMap, MglPopup, MglNavigationControl, MglGeolocateControl, MglScaleControl, MglAttributionControl } from 'vue-mapbox'
 import MapFilterControl from '../components/MapFilterControl.vue'
@@ -98,7 +97,7 @@ export default {
         } catch (e) {}
         this.showMap = true
       } else {
-        axios.get(process.env.VUE_APP_API_URL + '/my_coordinates')
+        axios.get(import.meta.env.VITE_API_URL + '/my_coordinates')
           .then(response => {
             if (response.data.latitude && response.data.longitude) {
               this.center = [response.data.longitude, response.data.latitude]
@@ -244,8 +243,6 @@ export default {
         }
       })
       this.updateRoute()
-
-      reportMapSession()
     },
     onMapClicked (event) {
       if (this.$refs.draw.isDrawing() || event.mapboxEvent.originalEvent.hitMarker) {
@@ -348,7 +345,7 @@ export default {
         })
     },
     fetchSummit (summitCode) {
-      return axios.get(process.env.VUE_APP_API_URL + '/summits/' + summitCode)
+      return axios.get(import.meta.env.VITE_API_URL + '/summits/' + summitCode)
         .then(response => {
           let summit = response.data
           summit.photo = null
@@ -356,7 +353,7 @@ export default {
         })
     },
     fetchAssociation (associationCode) {
-      return axios.get(process.env.VUE_APP_API_URL + '/associations/' + associationCode)
+      return axios.get(import.meta.env.VITE_API_URL + '/associations/' + associationCode)
         .then(response => {
           return response.data
         })
@@ -395,13 +392,6 @@ export default {
       this.map.fitBounds([[summit.coordinates.longitude, summit.coordinates.latitude], [summit.coordinates.longitude, summit.coordinates.latitude]], this.makeFitBoundsOptions())
       this.summit = summit
     },
-    makeCoordinateLink (summitCode, longitude, latitude) {
-      if (summitCode.match(/^HB0?\//)) {
-        return 'https://map.geo.admin.ch/?swisssearch=' + latitude + ',' + longitude
-      } else {
-        return 'https://www.openstreetmap.org/#map=14/' + latitude + '/' + longitude + ''
-      }
-    },
     updateMapURL () {
       if (this.map) {
         let url = '/map/coordinates/' + this.map.getCenter().toArray().reverse().map(a => { return a.toFixed(6) }).join(',') + '/' + this.map.getZoom().toFixed(1)

src/views/NewPhotos.vue

@@ -64,7 +64,7 @@ export default {
       if (this.selectedAssociations.length > 0) {
         associations = this.selectedAssociations.join('|')
       }
-      axios.get(process.env.VUE_APP_API_URL + '/summits/recent_photos/' + associations + '/' + this.days, { params: recentPhotosParams })
+      axios.get(import.meta.env.VITE_API_URL + '/summits/recent_photos/' + associations + '/' + this.days, { params: recentPhotosParams })
         .then(response => {
           this.loadingComponent.close()
           this.summits = response.data.slice(0, -1)
@@ -72,7 +72,7 @@ export default {
         })
     },
     loadAssociations () {
-      axios.get(process.env.VUE_APP_API_URL + '/associations/all')
+      axios.get(import.meta.env.VITE_API_URL + '/associations/all')
         .then(response => {
           this.associations = response.data
         })

src/views/Region.vue

@@ -74,7 +74,7 @@ export default {
       })
     },
     exportUrlPrefix () {
-      return process.env.VUE_APP_API_URL + '/geoexport/regions/' + this.regionCode
+      return import.meta.env.VITE_API_URL + '/geoexport/regions/' + this.regionCode
     },
     exportUrlParams () {
       return (this.showInactive ? { inactive: 1 } : {})
@@ -125,7 +125,7 @@ export default {
     loadRegion () {
       let loads = []
       this.loadingComponent = this.$buefy.loading.open({ canCancel: true })
-      loads.push(axios.get(process.env.VUE_APP_API_URL + '/associations/' + this.associationCode)
+      loads.push(axios.get(import.meta.env.VITE_API_URL + '/associations/' + this.associationCode)
         .then(response => {
           this.association = response.data
           document.title = this.region.name + ' (' + this.associationCode + '/' + this.region.code + ') - SOTLAS'
@@ -136,7 +136,7 @@ export default {
           }
         }))
 
-      loads.push(axios.get(process.env.VUE_APP_API_URL + '/regions/' + this.regionCode)
+      loads.push(axios.get(import.meta.env.VITE_API_URL + '/regions/' + this.regionCode)
         .then(response => {
           let now = moment()
           if (response.data.length === 0) {

src/views/SearchAnything.vue

@@ -96,12 +96,12 @@ export default {
       let loads = []
       let q = this.$route.query.q.trim()
       this.loadingComponent = this.$buefy.loading.open({ canCancel: true })
-      loads.push(axios.get(process.env.VUE_APP_API_URL + '/activators/search', { params: { q, limit: this.limit } })
+      loads.push(axios.get(import.meta.env.VITE_API_URL + '/activators/search', { params: { q, limit: this.limit } })
         .then(response => {
           this.activators = response.data.activators
         }))
 
-      loads.push(axios.get(process.env.VUE_APP_API_URL + '/summits/search', { params: { q, limit: this.limit } })
+      loads.push(axios.get(import.meta.env.VITE_API_URL + '/summits/search', { params: { q, limit: this.limit } })
         .then(response => {
           let now = moment()
           response.data.forEach(summit => {
@@ -120,7 +120,7 @@ export default {
         language: 'en',
         proximity
       }
-      maptilersdk.config.apiKey = process.env.VUE_APP_MAPTILER_KEY
+      maptilersdk.config.apiKey = import.meta.env.VITE_MAPTILER_KEY
       loads.push(
         maptilersdk.geocoding.forward(q, geoOpts)
           .then(geoResp => {

src/views/SolarHistory.vue

@@ -26,7 +26,7 @@ export default {
   methods: {
     loadHistory () {
       // Fetch data from last 30 days
-      axios.get(process.env.VUE_APP_API_URL + '/solardata/history/720')
+      axios.get(import.meta.env.VITE_API_URL + '/solardata/history/720')
         .then(response => {
           this.loadingComponent.close()
 

src/views/Summit.vue

@@ -379,10 +379,10 @@ export default {
         }
 
         // Make a dummy POST to the summit URL to invalidate the browser's cache for future page loads
-        axios.post(process.env.VUE_APP_API_URL + '/summits/' + this.summitCode)
+        axios.post(import.meta.env.VITE_API_URL + '/summits/' + this.summitCode)
       }
 
-      loads.push(axios.get(process.env.VUE_APP_API_URL + '/summits/' + this.summitCode, options)
+      loads.push(axios.get(import.meta.env.VITE_API_URL + '/summits/' + this.summitCode, options)
         .then(response => {
           this.summit = response.data
           document.title = this.summit.name + ' (' + this.summit.code + ') - SOTLAS'
@@ -393,7 +393,7 @@ export default {
           }
         }))
 
-      loads.push(axios.get(process.env.VUE_APP_API_URL + '/associations/' + this.summitCode.substr(0, this.summitCode.indexOf('/')))
+      loads.push(axios.get(import.meta.env.VITE_API_URL + '/associations/' + this.summitCode.substr(0, this.summitCode.indexOf('/')))
         .then(response => {
           this.association = response.data
         }))
@@ -451,9 +451,9 @@ export default {
       this.loadingComponent = this.$buefy.loading.open({ canCancel: false })
 
       // Make a dummy POST to the summit URL to invalidate the browser's cache for future page loads
-      axios.post(process.env.VUE_APP_API_URL + '/summits/' + this.summitCode)
+      axios.post(import.meta.env.VITE_API_URL + '/summits/' + this.summitCode)
 
-      axios.get(process.env.VUE_APP_API_URL + '/summits/' + this.summitCode, { params: { t: new Date().getTime() } })
+      axios.get(import.meta.env.VITE_API_URL + '/summits/' + this.summitCode, { params: { t: new Date().getTime() } })
         .then(response => {
           this.summit = response.data
         })

vite.config.mjs

@@ -0,0 +1,42 @@
+import { defineConfig, loadEnv } from 'vite';
+import vue from '@vitejs/plugin-vue2';
+import path from 'path';
+import { execSync } from 'child_process';
+
+const COMMITHASH = JSON.stringify(execSync('git rev-parse HEAD').toString().trim());
+
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '');
+  const base = env.PUBLIC_PATH || '/';
+
+  return {
+    base,
+    plugins: [vue()],
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, 'src'),
+        'vue/dist/vue.esm': 'vue'
+      },
+    },
+    publicDir: 'public',
+    build: {
+      outDir: 'dist',
+    },
+    optimizeDeps: {
+      include: [
+        'vue-svgicon',
+        'vue-clipboard2',
+        'vue-debounce',
+        'vue-match-media',
+        '@dsb-norge/vue-keycloak-js',
+        'map-promisified'
+      ]
+    },
+    server: {
+      historyApiFallback: true
+    },
+    define: {
+      COMMITHASH,
+    },
+  }
+});

vue.config.js

@@ -1,27 +0,0 @@
-const webpack = require('webpack')
-const { GitRevisionPlugin } = require('git-revision-webpack-plugin')
-
-const gitRevisionPlugin = new GitRevisionPlugin({ branch: true })
-
-module.exports = {
-  productionSourceMap: false,
-  transpileDependencies: ['vue-lazy-youtube-video', 'vue-mapbox'],
-  configureWebpack: {
-    plugins: [
-      gitRevisionPlugin,
-      new webpack.DefinePlugin({
-        'VERSION': JSON.stringify(gitRevisionPlugin.version()),
-        'COMMITHASH': JSON.stringify(gitRevisionPlugin.commithash()),
-        'BRANCH': JSON.stringify(gitRevisionPlugin.branch())
-      })
-    ],
-    resolve: {
-      fallback: {
-        fs: false,
-        path: false
-      },
-      exportsFields: []  // Needed because @maptiler/sdk uses "import" instead of "style" on the .css export in its package.json; see also https://github.com/webpack/webpack/issues/9509#issuecomment-1915084026
-    }
-  },
-  publicPath: process.env.PUBLIC_PATH
-}