Updating npm packages, dependencies, and lint with latest versions.

package.json

@@ -16,42 +16,52 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@popperjs/core": "^2.11.7",
-    "axios": "^1.4.0",
-    "bootstrap": "^5.2.3",
-    "core-js": "^3.30.2",
-    "uuid": "^9.0.0",
-    "vue": "^3.2.47",
-    "vue-gtag": "^2.0.1",
-    "vue-router": "^4.1.6",
+    "@popperjs/core": "^2.11.8",
+    "axios": "^1.13.2",
+    "bootstrap": "^5.3.8",
+    "core-js": "^3.46.0",
+    "uuid": "^13.0.0",
+    "vue": "^3.5.24",
+    "vue-gtag": "^3.6.3",
+    "vue-router": "^4.6.3",
     "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "@types/node": "^20.1.1",
-    "@vue/cli-plugin-babel": "^5.0.8",
-    "@vue/cli-plugin-router": "^5.0.8",
-    "@vue/cli-plugin-vuex": "^5.0.8",
-    "@vue/cli-service": "^5.0.8",
-    "@vue/compiler-sfc": "^3.2.47",
-    "babel-eslint": "^10.1.0",
-    "eslint-plugin-vue": "^9.11.1",
-    "eslint": "^6.7.2",
-    "path-browserify": "^1.0.1"
+    "@babel/eslint-parser": "^7.28.5",
+    "@types/node": "^24.10.1",
+    "@vue/cli-plugin-babel": "^5.0.9",
+    "@vue/cli-plugin-eslint": "^5.0.9",
+    "@vue/cli-plugin-router": "^5.0.9",
+    "@vue/cli-plugin-vuex": "^5.0.9",
+    "@vue/cli-service": "^5.0.9",
+    "@vue/compiler-sfc": "^3.5.24",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^10.5.1",
+    "path-browserify": "^1.0.1",
+    "vue-eslint-parser": "^10.2.0"
   },
   "eslintConfig": {
     "root": true,
     "env": {
-      "node": true
+      "node": true,
+      "browser": true
     },
     "extends": [
-      "plugin:vue/vue3-essential",
+      "plugin:vue/essential",
       "eslint:recommended"
     ],
+    "parser": "vue-eslint-parser",
     "parserOptions": {
-      "parser": "babel-eslint"
+      "parser": "@babel/eslint-parser",
+      "requireConfigFile": false,
+      "ecmaVersion": 2020,
+      "sourceType": "module"
     },
-    "rules": {}
+    "rules": {
+      "vue/multi-word-component-names": "off"
+    }
   },
+
   "browserslist": [
     "> 1%",
     "last 2 versions",

src/components/Files.vue

@@ -31,9 +31,11 @@
           </ul>
         </div>
 
+        <figure class="file-figure">
           <!-- File thumbnail image -->
           <img @click="toggleSelection(file)" :class="getSelectedClass(file)" class="file-thumbnail img-fluid img-thumbnail" :title="file.name" :src="file.thumbnail"/>
           <figcaption class="figure-caption">{{ getFileName(file) }}</figcaption>
+        </figure>
       </div>
 
       <!-- Upload progress bars -->
@@ -160,6 +162,9 @@ export default {
     cursor: pointer;
     width: 100%;
   }
+  .file-figure {
+    margin: 0;
+  }
   .context-menu {
     color: #ffffff;
     position: absolute;

src/main.js

@@ -4,11 +4,18 @@ import router from './router'
 import store from './store'
 import "bootstrap/dist/css/bootstrap.min.css"
 import "bootstrap"
-import VueGtag from "vue-gtag";
+import { createGtag } from "vue-gtag"
 
-// Global site tag (gtag.js)
-const ga_config = {
-    config: { id: process.env.VUE_APP_GA_ID }
+const app = createApp(App)
+
+const tagId = process.env.VUE_APP_GA_ID
+if (tagId) {
+  app.use(createGtag({
+    tagId,
+    pageTracker: {
+      router
+    }
+  }))
 }
 
-createApp(App).use(VueGtag, ga_config, router).use(store).use(router).mount('#app')
+app.use(store).use(router).mount('#app')