fix: add vite optimizeDeps for runtime-discovered dependencies

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Dockerfile

@@ -12,7 +12,7 @@ COPY . /build
 RUN npm run postinstall && npm run generate && npm run lint
 #RUN yarn start:ci & yarn wait && yarn test:cypress
 
-FROM amd64/nginx:1.29.4@sha256:1ead684dc0a33ef421caa42403272afeae59c8933edcedda6926d964a44d3f01
+FROM amd64/nginx:1.29.7@sha256:03a679e99632afbbd7d56284e5b4125f223c94263f2a7b71ad85f4826401a981
 MAINTAINER Joakim Olsson <joakim@unbound.se>
 
 COPY --from=builder /build/.output/public/ /usr/share/nginx/html/

app/components/pages/events/event-card.vue

@@ -1,7 +1,7 @@
 <template>
   <v-card flat variant="outlined" rounded="xl">
-    <v-card-title v-if="event.band" primary-title>
-      <h3 class="headline mb-0">
+    <v-card-title v-if="event.band">
+      <h3 class="text-h6 mb-0">
         <v-icon
           v-if="hasUser"
           class="ml-1 mr-1 text-medium-emphasis"
@@ -17,7 +17,6 @@
       <v-row dense>
         <v-col
           cols="12"
-          xs="12"
           sm="6"
         >
           <strong class="mr-1" v-text="t('events.date')" />{{
@@ -25,7 +24,7 @@
           }}
           ({{ weekday }} {{ daysUntil }})
         </v-col>
-        <v-col v-if="event.time" cols="12" xs="12" sm="6">
+        <v-col v-if="event.time" cols="12" sm="6">
           <strong class="mr-1" v-text="t('events.time')" />{{
             event.time
           }}
@@ -34,7 +33,6 @@
       <v-row v-if="event.danceHall" dense>
         <v-col
           cols="12"
-          xs="12"
           sm="6"
         >
           <strong class="mr-1" v-text="t('events.hall')" />
@@ -50,7 +48,6 @@
         </v-col>
         <v-col
           cols="12"
-          xs="12"
           sm="6"
         >
           <strong class="mr-1" v-text="t('events.city')" />
@@ -66,7 +63,6 @@
         </v-col>
         <v-col
           cols="12"
-          xs="12"
           sm="6"
         >
           <strong class="mr-1" v-text="t('events.municipality')" />
@@ -84,7 +80,6 @@
         </v-col>
         <v-col
           cols="12"
-          xs="12"
           sm="6"
         >
           <strong class="mr-1" v-text="t('events.state')" />

app/components/pages/events/event-list.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <v-row v-for="event in events" :key="event.id" wrap>
-      <v-col xs="12">
+    <v-row v-for="event in events" :key="event.id">
+      <v-col cols="12">
         <event-card
           :event="event"
           :has-user="hasUser"

app/components/pages/events/event-page.vue

@@ -1,13 +1,13 @@
 <template>
   <div :key="isAuthenticated ? 'true' : 'false'">
-    <v-container :key="range" fluid grid-list-md class="app-fade-in">
-      <v-row v-if="!isAuthenticated" wrap>
-        <v-col xs="12">
+    <v-container :key="range" fluid class="app-fade-in">
+      <v-row v-if="!isAuthenticated">
+        <v-col cols="12">
           <p><b v-text="t('events.login')" /></p>
         </v-col>
       </v-row>
-      <v-row wrap>
-        <v-col xs="12">
+      <v-row>
+        <v-col cols="12">
           <v-text-field
             v-model="origin"
             variant="underlined"
@@ -16,7 +16,7 @@
             :placeholder="t('origins.geolocation')"
           >
             <template #append>
-              <v-tooltip top>
+              <v-tooltip location="top">
                 <template #activator="{ props }">
                   <v-icon
                     icon='mdi-crosshairs-gps'
@@ -28,7 +28,7 @@
               </v-tooltip>
             </template>
             <template #prepend>
-              <v-tooltip v-if="isAuthenticated" top>
+              <v-tooltip v-if="isAuthenticated" location="top">
                 <template #activator="{ props }">
                   <v-icon
                     icon='mdi-bookmark-plus-outline'
@@ -43,7 +43,7 @@
           </v-text-field>
         </v-col>
       </v-row>
-      <v-row wrap>
+      <v-row>
         <v-col>
           <v-btn-toggle
             v-if="smAndUp"
@@ -65,12 +65,12 @@
           />
         </v-col>
       </v-row>
-      <v-row wrap>
+      <v-row>
         <v-col cols="12" sm="8">
           <v-text-field
             v-model="state.search"
             variant="underlined"
-            append-outer-icon="mdi-magnify"
+            append-icon="mdi-magnify"
             :label="t('events.filter')"
             :placeholder="t('events.filter')"
             hide-details

app/components/pages/filters/filter-list.vue

@@ -7,7 +7,7 @@
       <v-list-item v-for="item in model" :key="item" :title="item">
         <template #prepend>
           <v-list-item-action @click="toggleIgnore(type, item)">
-            <v-tooltip top>
+            <v-tooltip location="top">
               <template #activator="{ props }">
                 <v-icon icon='mdi-delete-outline' v-bind="props" />
               </template>

app/components/pages/filters/filter-page.vue

@@ -1,12 +1,12 @@
 <template>
   <div :key="isAuthenticated ? 'true' : 'false'">
-    <v-container fluid grid-list-md class="app-fade-in">
-      <v-row wrap>
+    <v-container fluid class="app-fade-in">
+      <v-row>
         <v-col cols="12">
           <v-card>
-            <v-container fluid grid-list-md>
-              <v-row wrap>
-                <v-col xs="12" sm="12" md="4" lg="4">
+            <v-container fluid>
+              <v-row>
+                <v-col cols="12" sm="12" md="4" lg="4">
                   <list
                     :model="bands || []"
                     title-key="filters.band"
@@ -14,7 +14,7 @@
                     :toggle-ignore="toggleIgnore"
                   />
                 </v-col>
-                <v-col xs="12" sm="12" md="4" lg="4">
+                <v-col cols="12" sm="12" md="4" lg="4">
                   <v-row>
                     <v-col cols="12">
                       <list

app/components/pages/origins/origin-page.vue

@@ -1,8 +1,8 @@
 <template>
   <div :key="isAuthenticated ? 'true' : 'false'">
-    <v-container fluid grid-list-md class="app-fade-in">
-      <v-layout row wrap>
-        <v-col xs="12">
+    <v-container fluid class="app-fade-in">
+      <v-row>
+        <v-col cols="12">
           <v-text-field
             v-model="origin"
             variant="underlined"
@@ -10,7 +10,7 @@
             :placeholder="t('origins.geolocation')"
           >
             <template #append>
-              <v-tooltip top>
+              <v-tooltip location="top">
                 <template #activator="{ props }">
                   <v-icon
                     icon='mdi-crosshairs-gps'
@@ -22,7 +22,7 @@
               </v-tooltip>
             </template>
             <template #prepend>
-              <v-tooltip top>
+              <v-tooltip location="top">
                 <template #activator="{ props }">
                   <v-icon
                     icon='mdi-bookmark-plus-outline'
@@ -36,10 +36,10 @@
             </template>
           </v-text-field>
         </v-col>
-      </v-layout>
-      <v-layout v-for="o in origins" :key="o" row wrap>
-        <v-col xs="12">
-          <v-tooltip top>
+      </v-row>
+      <v-row v-for="o in origins" :key="o">
+        <v-col cols="12">
+          <v-tooltip location="top">
             <template #activator="{ props }">
               <v-icon
                 icon='mdi-delete-outline'
@@ -51,7 +51,7 @@
           </v-tooltip>
           <span>{{ o }}</span>
         </v-col>
-      </v-layout>
+      </v-row>
     </v-container>
     <v-snackbar
       v-model="snackbar.active"

app/layouts/default.vue

@@ -1,7 +1,7 @@
 <template>
   <v-app :key='locale + isAuthenticated'>
-    <v-navigation-drawer v-model='nav' temporary app>
-      <v-list dense>
+    <v-navigation-drawer v-model='nav' temporary>
+      <v-list density="compact">
         <v-list-item v-if='isAuthenticated && user' :title='user.name' :prepend-avatar='user.picture' />
         <v-list-item>
           <v-switch v-model='darkMode' color='primary' :label="t('app.darkMode')" hide-details class='ms-1' />
@@ -35,7 +35,7 @@ v-if='isAuthenticated' link :title="t('app.logout')" prepend-icon='mdi-logout'
                      @click='doLogout' />
       </v-list>
     </v-navigation-drawer>
-    <v-app-bar app scroll-off-screen>
+    <v-app-bar scroll-behavior="hide">
       <v-app-bar-nav-icon @click='nav = !nav' />
       <v-toolbar-title :title='title' />
       <v-spacer />

k8s/deploy.yaml

@@ -52,7 +52,6 @@ spec:
             cpu: 10m
             memory: 10Mi
           limits:
-            cpu: 300m
             memory: 300Mi
 
 

nuxt.config.js

@@ -66,6 +66,22 @@ export default defineNuxtConfig({
         },
       },
     },
+    optimizeDeps: {
+      include: [
+        '@vue/devtools-core',
+        '@vue/devtools-kit',
+        '@auth0/auth0-vue',
+        '@apollo/client/core',
+        '@apollo/client/link/context',
+        '@apollo/client/link/ws',
+        '@apollo/client/utilities',
+        '@opentelemetry/api',
+        '@vue/apollo-composable',
+        '@grafana/faro-web-sdk',
+        '@grafana/faro-web-tracing',
+        '@opentelemetry/instrumentation-fetch',
+      ],
+    },
     resolve: {
       dedupe: ['pinia'],
     },

package.json

@@ -16,48 +16,46 @@
     "codegen": "graphql-codegen && eslint graphql/generated/operations.ts --fix"
   },
   "devDependencies": {
-    "@commitlint/cli": "20.3.1",
-    "@commitlint/config-conventional": "20.3.1",
-    "@graphql-codegen/cli": "6.1.0",
+    "@commitlint/cli": "20.5.0",
+    "@commitlint/config-conventional": "20.5.0",
+    "@graphql-codegen/cli": "6.2.1",
     "@graphql-codegen/fragment-matcher": "6.0.0",
-    "@graphql-codegen/typescript": "5.0.7",
-    "@graphql-codegen/typescript-operations": "5.0.7",
-    "@graphql-codegen/typescript-vue-apollo": "4.1.2",
-    "@nuxt/devtools": "3.1.1",
-    "@nuxt/eslint": "1.12.1",
-    "@nuxtjs/eslint-module": "4.1.0",
-    "@nuxtjs/i18n": "10.2.1",
-    "@stylistic/eslint-plugin": "5.6.1",
+    "@graphql-codegen/typescript": "5.0.9",
+    "@graphql-codegen/typescript-operations": "5.0.9",
+    "@graphql-codegen/typescript-vue-apollo": "5.0.0",
+    "@nuxt/devtools": "3.2.4",
+    "@nuxt/eslint": "1.15.2",
+    "@nuxtjs/i18n": "10.2.4",
+    "@stylistic/eslint-plugin": "5.10.0",
     "@vue/test-utils": "2.4.6",
-    "esbuild": "0.27.2",
-    "eslint": "9.39.2",
-    "eslint-plugin-nuxt": "4.0.0",
+    "esbuild": "0.27.4",
+    "eslint": "10.1.0",
     "eslint-plugin-simple-import-sort": "12.1.1",
-    "eslint-plugin-vue": "10.6.2",
-    "nuxt": "4.2.2",
-    "postcss-html": "1.8.0",
-    "sass": "1.97.2",
-    "stylelint": "16.26.1",
+    "eslint-plugin-vue": "10.8.0",
+    "nuxt": "4.4.2",
+    "postcss-html": "1.8.1",
+    "sass": "1.98.0",
+    "stylelint": "17.6.0",
     "stylelint-config-recommended-vue": "1.6.1",
-    "stylelint-config-standard": "39.0.1",
+    "stylelint-config-standard": "40.0.0",
     "typescript": "5.9.3",
-    "typescript-eslint": "8.52.0",
-    "vite-plugin-vuetify": "2.1.2",
-    "vue": "3.5.26",
-    "vue-eslint-parser": "10.2.0",
+    "typescript-eslint": "8.57.2",
+    "vite-plugin-vuetify": "2.1.3",
+    "vue": "3.5.31",
+    "vue-eslint-parser": "10.4.0",
     "vue-router": "4.6.4",
-    "vuetify": "3.11.6"
+    "vuetify": "4.0.4"
   },
   "dependencies": {
-    "@apollo/client": "3.14.0",
+    "@apollo/client": "3.14.1",
     "@auth0/auth0-vue": "2.5.0",
-    "@grafana/faro-web-sdk": "2.1.0",
-    "@grafana/faro-web-tracing": "2.1.0",
+    "@grafana/faro-web-sdk": "2.3.1",
+    "@grafana/faro-web-tracing": "2.3.1",
     "@mdi/font": "7.4.47",
     "@pinia/nuxt": "0.11.3",
     "@vue/apollo-composable": "4.2.2",
     "date-fns": "4.1.0",
-    "graphql": "16.12.0",
+    "graphql": "16.13.2",
     "graphql-tag": "2.12.6",
     "pinia": "3.0.4",
     "pinia-plugin-persistedstate": "4.7.1",

renovate.json

@@ -9,6 +9,16 @@
       "matchPackageNames": [
         "@grafana/faro-**"
       ]
-    }
+    },
+    {
+      "groupName": "stylelint",
+      "matchPackageNames": [
+        "stylelint",
+        "stylelint-config-standard"
       ]
+    }
+  ],
+  "constraints": {
+    "node": ">=24"
+  }
 }