diff --git a/.eslintrc.js b/.eslintrc.js
index d6e67cb..8d3512d 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,31 +1,12 @@
-require('@rushstack/eslint-patch/modern-module-resolution')
-
 module.exports = {
-  root: true,
-  env: {
-    node: true
-  },
   extends: [
-    'plugin:vue/essential',
-    '@vue/standard',
-    '@vue/eslint-config-prettier'
+    // add more generic rulesets here, such as:
+    // 'eslint:recommended',
+    // 'plugin:vue/vue3-recommended',
+    'plugin:vue/recommended' // Use this if you are using Vue.js 2.x.
   ],
-  parserOptions: {
-    parser: 'babel-eslint'
-  },
   rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
-  },
-  overrides: [
-    {
-      files: [
-        '**/__tests__/*.{j,t}s?(x)',
-        '**/tests/unit/**/*.spec.{j,t}s?(x)'
-      ],
-      env: {
-        jest: true
-      }
-    }
-  ]
-}
+    // override/add rules settings here, such as:
+    // 'vue/no-unused-vars': 'error'
+  }
+}
\ No newline at end of file
diff --git a/babel.config.js b/babel.config.js
index 716b023..26aae74 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,3 +1,11 @@
 module.exports = {
-  presets: ['@vue/cli-plugin-babel/preset']
-}
+  presets: [
+    [
+      '@vue/babel-preset-jsx',
+      {
+        vModel: false,
+        compositionAPI: true,
+      },
+    ],
+  ],
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 3e1417b..8ed4285 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,8 @@
     "@openearth/windgl": "^0.1.2",
     "@turf/distance": "^6.3.0",
     "@turf/turf": "^6.3.0",
-    "@vue/composition-api": "^1.0.0-rc.7",
+    "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
+    "@vue/babel-preset-jsx": "^1.4.0",
     "core-js": "^3.6.5",
     "echarts": "^5.4.3",
     "file-saver": "^2.0.5",
@@ -24,7 +25,7 @@
     "oidc-client": "^1.11.5",
     "register-service-worker": "^1.7.1",
     "tiny-cookie": "^2.3.2",
-    "vue": "^2.6.11",
+    "vue": "^2.7.2",
     "vue-echarts": "^6.6.1",
     "vue-gtag": "^1.16.1",
     "vue-router": "^3.2.0",
@@ -42,26 +43,27 @@
     }
   },
   "devDependencies": {
+    "@babel/core": "^7.24.7",
+    "@babel/eslint-parser": "^7.24.7",
     "@mdi/font": "^5.9.55",
     "@rushstack/eslint-patch": "^1.4.0",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-pwa": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-plugin-unit-jest": "~4.5.0",
-    "@vue/cli-plugin-vuex": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/eslint-config-standard": "^5.1.2",
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@vue/cli-plugin-pwa": "~5.0.8",
+    "@vue/cli-plugin-router": "~5.0.8",
+    "@vue/cli-plugin-unit-jest": "~5.0.8",
+    "@vue/cli-plugin-vuex": "~5.0.8",
+    "@vue/cli-service": "~5.0.8",
+    "@vue/eslint-config-prettier": "^8.0.0",
+    "@vue/eslint-config-standard": "^8.0.1",
     "@vue/runtime-dom": "^3.3.4",
     "@vue/test-utils": "^1.0.3",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
+    "eslint": "^8.57.0",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.0",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint-plugin-vue": "^9.26.0",
     "lint-staged": "^9.5.0",
     "markdown-loader": "^6.0.0",
     "sass": "^1.32.0",
@@ -69,7 +71,7 @@
     "vue-cli-plugin-vuetify": "~2.3.1",
     "vue-html-loader": "^1.2.4",
     "vue-svg-loader": "^0.16.0",
-    "vue-template-compiler": "^2.6.11",
+    "vue-template-compiler": "~2.7.14",
     "vuetify-loader": "^1.7.0"
   },
   "gitHooks": {
diff --git a/src/components/NewsLayout.vue b/src/components/NewsLayout.vue
index 99a7336..4ed9660 100644
--- a/src/components/NewsLayout.vue
+++ b/src/components/NewsLayout.vue
@@ -1,16 +1,37 @@
 <template>
-  <v-card color="rgba(0, 0, 0, 0)" rounded outlined class="stories-card">
+  <v-card
+    color="rgba(0, 0, 0, 0)"
+    rounded
+    outlined
+    class="stories-card"
+  >
     <v-list color="rgba(0, 0, 0, 0)">
-      <v-list-item v-for="(feed, index) in feeds" :key="index">
+      <v-list-item
+        v-for="(feed, index) in feeds"
+        :key="index"
+      >
         <v-list-item-content>
-          <v-list-item-title v-text="feed.title" />
-          <v-list-item-subtitle class="text-subtitle-1" v-text="feed.source" />
+          <div v-text="feed.title" />
+          <v-list-item-title>{{ content }}</v-list-item-title>
+          <div
+            class="text-subtitle-1"
+            v-text="feed.source"
+          />
+          <v-list-item-subtitle>{{ content }}</v-list-item-subtitle>
         </v-list-item-content>
 
         <v-list-item-action>
-          <v-list-item-action-text v-text="feed.date" />
-          <v-btn icon :href="feed.URL" target="_blank" rel="noopener">
-            <v-icon color="grey lighten-1">mdi-exit-to-app</v-icon>
+          <div v-text="feed.date" />
+          <v-list-item-action-text>{{ content }}</v-list-item-action-text>
+          <v-btn
+            icon
+            :href="feed.URL"
+            target="_blank"
+            rel="noopener"
+          >
+            <v-icon color="grey lighten-1">
+              mdi-exit-to-app
+            </v-icon>
           </v-btn>
         </v-list-item-action>
       </v-list-item>
diff --git a/src/components/StoriesLayout.vue b/src/components/StoriesLayout.vue
index d4fbb95..568f80b 100644
--- a/src/components/StoriesLayout.vue
+++ b/src/components/StoriesLayout.vue
@@ -1,24 +1,42 @@
 <template>
-  <v-card color="rgba(0, 0, 0, 0)" rounded outlined class="stories-card">
+  <v-card
+    color="rgba(0, 0, 0, 0)"
+    rounded
+    outlined
+    class="stories-card"
+  >
     <v-card-title>
-      <custom-icon :name="theme" iconFolder="themes" class="ma-2" />
-      <span
-        ><strong>{{ theme }}</strong></span
-      >
+      <custom-icon
+        :name="theme"
+        icon-folder="themes"
+        class="ma-2"
+      />
+      <span><strong>{{ theme }}</strong></span>
     </v-card-title>
     <v-list color="rgba(0, 0, 0, 0)">
-      <v-list-item v-for="(story, index) in stories" :key="index">
+      <v-list-item
+        v-for="(story, index) in stories"
+        :key="index"
+      >
         <v-list-item-avatar size="130">
-          <v-img :src="story.icon"></v-img>
+          <v-img :src="story.icon" />
         </v-list-item-avatar>
 
         <v-list-item-content>
-          <v-list-item-title v-text="story.title"></v-list-item-title>
+          <div v-text="story.title" />
+          <v-list-item-title>{{ content }}</v-list-item-title>
         </v-list-item-content>
 
         <v-list-item-action>
-          <v-btn icon :href="story.URL" target="_blank" rel="noopener">
-            <v-icon color="grey lighten-1">mdi-exit-to-app</v-icon>
+          <v-btn
+            icon
+            :href="story.URL"
+            target="_blank"
+            rel="noopener"
+          >
+            <v-icon color="grey lighten-1">
+              mdi-exit-to-app
+            </v-icon>
           </v-btn>
         </v-list-item-action>
       </v-list-item>
@@ -29,6 +47,9 @@
 import CustomIcon from '@/components/CustomIcon'
 
 export default {
+  components: {
+    CustomIcon
+  },
   props: {
     stories: {
       type: Array,
@@ -38,9 +59,6 @@ export default {
       type: String,
       default: null
     }
-  },
-  components: {
-    CustomIcon
   }
 }
 </script>
diff --git a/src/views/Stories.vue b/src/views/Stories.vue
index d902b75..3afefc1 100644
--- a/src/views/Stories.vue
+++ b/src/views/Stories.vue
@@ -1,17 +1,29 @@
 <template>
   <v-flex class="stories pl-15">
     <v-row>
-      <v-col cols="8" class="pa-4">
+      <v-col
+        cols="8"
+        class="pa-4"
+      >
         <v-container>
           <h2 class="h2">
             Stories
           </h2>
-          <div v-for="theme in stories" :key="theme.id">
-            <stories-layout :theme="theme.theme" :stories="theme.stories" />
+          <div
+            v-for="theme in stories"
+            :key="theme.id"
+          >
+            <stories-layout
+              :theme="theme.theme"
+              :stories="theme.stories"
+            />
           </div>
         </v-container>
       </v-col>
-      <v-col cols="4" class="pa-4">
+      <v-col
+        cols="4"
+        class="pa-4"
+      >
         <v-container>
           <h2 class="h2">
             News
@@ -35,7 +47,7 @@ import StoriesLayout from '@/components/StoriesLayout.vue'
 import NewsLayout from '@/components/NewsLayout.vue'
 
 export default {
-  name: 'Stories',
+  name: 'StoriesItem',
   components: {
     StoriesLayout,
     NewsLayout
diff --git a/src/views/auth/callback.vue b/src/views/auth/callback.vue
index 39c2213..5b0ff3a 100644
--- a/src/views/auth/callback.vue
+++ b/src/views/auth/callback.vue
@@ -6,6 +6,7 @@
 import Oidc from 'oidc-client'
 
 export default {
+  name: 'CallbackItem',
   mounted() {
     const store = new Oidc.WebStorageStateStore({ store: window.localStorage })
 
diff --git a/src/views/auth/logout.vue b/src/views/auth/logout.vue
index 412b694..1ccb998 100644
--- a/src/views/auth/logout.vue
+++ b/src/views/auth/logout.vue
@@ -6,6 +6,7 @@
 import Oidc from 'oidc-client'
 
 export default {
+  name: 'LogoutItem',
   mounted() {
     new Oidc.UserManager()
       .signoutRedirectCallback()
diff --git a/src/views/auth/silent.vue b/src/views/auth/silent.vue
index 7a6f664..c85b581 100644
--- a/src/views/auth/silent.vue
+++ b/src/views/auth/silent.vue
@@ -6,6 +6,7 @@
 import Oidc from 'oidc-client'
 
 export default {
+  name: 'SilentItem',
   mounted() {
     new Oidc.UserManager().signinSilentCallback()
   }
diff --git a/src/views/data/datasetIds/LocationId.vue b/src/views/data/datasetIds/LocationId.vue
index f29c7ab..8a7ac23 100644
--- a/src/views/data/datasetIds/LocationId.vue
+++ b/src/views/data/datasetIds/LocationId.vue
@@ -10,16 +10,32 @@
       <h2 class="h2">
         Metocean
       </h2>
-      <v-btn icon class="close-button" @click="close">
+      <v-btn
+        icon
+        class="close-button"
+        @click="close"
+      >
         <v-icon>mdi-close</v-icon>
       </v-btn>
-      <div class="flex-grow-1 py-3 scrollbar" align-space-between>
-        <v-expansion-panels flat accordion multiple color="background">
+      <div
+        class="flex-grow-1 py-3 scrollbar"
+        align-space-between
+      >
+        <v-expansion-panels
+          flat
+          accordion
+          multiple
+          color="background"
+        >
           <v-expansion-panel
             v-for="data in datasets"
             :key="`${locations}-${data.id}-${activeSummaryId}`"
           >
-            <v-expansion-panel-header class="h4" color="background" dark>
+            <v-expansion-panel-header
+              class="h4"
+              color="background"
+              dark
+            >
               {{ data.datasetName }}
             </v-expansion-panel-header>
             <v-expansion-panel-content color="background">
@@ -31,8 +47,8 @@
                 :collapsible="true"
                 :units="data.units"
                 :type="data.type"
-                :timeFormatType="data.timeFormat"
-                :timeSpanType="data.timeSpan"
+                :time-format-type="data.timeFormat"
+                :time-span-type="data.timeSpan"
                 :parameter-id="data.id"
                 :title="data.datasetName"
                 :set-mark-point="data.id === getActiveRasterLayer"
@@ -41,7 +57,11 @@
             </v-expansion-panel-content>
           </v-expansion-panel>
           <v-expansion-panel>
-            <v-expansion-panel-header class="h4" color="background" dark>
+            <v-expansion-panel-header
+              class="h4"
+              color="background"
+              dark
+            >
               Time series
             </v-expansion-panel-header>
             <v-expansion-panel-content color="background">
@@ -49,7 +69,11 @@
             </v-expansion-panel-content>
           </v-expansion-panel>
           <v-expansion-panel>
-            <v-expansion-panel-header class="h4" color="background" dark>
+            <v-expansion-panel-header
+              class="h4"
+              color="background"
+              dark
+            >
               Rose plot
             </v-expansion-panel-header>
             <v-expansion-panel-content color="background">
@@ -57,7 +81,11 @@
             </v-expansion-panel-content>
           </v-expansion-panel>
           <v-expansion-panel>
-            <v-expansion-panel-header class="h4" color="background" dark>
+            <v-expansion-panel-header
+              class="h4"
+              color="background"
+              dark
+            >
               Extreme values
             </v-expansion-panel-header>
             <v-expansion-panel-content color="background">
@@ -65,7 +93,11 @@
             </v-expansion-panel-content>
           </v-expansion-panel>
           <v-expansion-panel>
-            <v-expansion-panel-header class="h4" color="background" dark>
+            <v-expansion-panel-header
+              class="h4"
+              color="background"
+              dark
+            >
               Weather window
             </v-expansion-panel-header>
             <v-expansion-panel-content color="background">
@@ -83,7 +115,7 @@
 </template>
 
 <script>
-import { ref } from '@vue/composition-api'
+import { ref, onMounted, onUnmounted, computed, watch, getCurrentInstance } from 'vue'
 import _ from 'lodash'
 import flatten from 'lodash/flatten'
 import { mapMutations, mapGetters, mapActions } from 'vuex'
@@ -98,11 +130,6 @@ import {
 
 export default {
   components: { GraphLine, TimeSeries, RosePlot, ExtremeValues, WeatherWindow },
-  data() {
-    return {
-      expandedDatasets: []
-    }
-  },
   setup() {
     const option = ref({
       title: {
@@ -145,6 +172,11 @@ export default {
 
     return { option }
   },
+  data() {
+    return {
+      expandedDatasets: []
+    }
+  },
   computed: {
     ...mapGetters([
       'activePointDataPerDataset',