From 488d4d75530fc74b9b1dec8c8b4d51a165b4275b Mon Sep 17 00:00:00 2001
From: David Sandoz <david.sandoz@tchoukball.ch>
Date: Fri, 16 Feb 2024 12:17:59 +0100
Subject: [PATCH] refactor: use defineComponent instead of Vue.extend

And fix revealed TypeScript errors
---
 .../competitions/st-match-event-small.vue     | 12 ++--
 .../competitions/st-match-result-list.vue     |  4 +-
 components/competitions/st-match-result.vue   |  4 +-
 .../competitions/st-upcoming-matches.vue      |  4 +-
 components/events/st-calendar-nav.vue         |  4 +-
 components/events/st-event-date.vue           |  4 +-
 components/events/st-event-list.vue           |  4 +-
 components/events/st-event-small.vue          |  4 +-
 components/events/st-event.vue                | 10 ++--
 components/events/st-month-calendar.vue       |  4 +-
 components/icon/st-custom-icon.vue            |  4 +-
 ...st-national-team-competition-team-list.vue |  4 +-
 ...-national-team-competition-update-list.vue |  6 +-
 .../st-national-team-competition-update.vue   |  4 +-
 .../national-teams/st-national-teams.prop.ts  | 28 +++++----
 components/national-teams/st-player.vue       |  8 +--
 components/news/st-news-list.vue              |  4 +-
 components/news/st-news.vue                   |  4 +-
 components/people/st-person.vue               |  6 +-
 components/people/st-role.vue                 | 14 ++---
 components/people/st-staff-person.vue         |  4 +-
 components/resources/st-resource-list.vue     |  4 +-
 components/resources/st-resource.vue          |  4 +-
 components/st-breadcrumb.vue                  |  4 +-
 components/st-burger-button.vue               |  4 +-
 components/st-button.vue                      |  4 +-
 components/st-category-distribution-table.vue |  4 +-
 components/st-club-list.vue                   | 10 ++--
 components/st-domain-labels.vue               |  4 +-
 components/st-flickr-album-gallery.vue        |  4 +-
 components/st-flickr-album-link.vue           |  4 +-
 components/st-flickr-photo.vue                |  4 +-
 components/st-footer.vue                      |  8 +--
 components/st-home-carousel.vue               |  4 +-
 components/st-language-switcher.vue           |  7 ++-
 components/st-link-action.vue                 |  4 +-
 components/st-link-list.vue                   |  6 +-
 components/st-live-stream-banner.vue          |  4 +-
 components/st-medal.vue                       |  8 ++-
 components/st-navigation.vue                  | 15 +++--
 components/st-pagination.vue                  |  4 +-
 components/st-select-navigation.vue           |  8 ++-
 components/st-simple-page.vue                 |  6 +-
 components/tchoukup/st-tchoukup-list.vue      |  8 +--
 layouts/default.vue                           |  4 +-
 mixins/month-params.mixin.ts                  |  4 +-
 mixins/newsletter.mixin.ts                    |  4 +-
 models/match.model.ts                         |  2 +-
 pages/_.vue                                   | 12 +++-
 pages/calendar/_year/_month/index.vue         |  4 +-
 pages/calendar/_year/index.vue                |  4 +-
 pages/calendar/index.vue                      |  4 +-
 pages/clubs.vue                               |  4 +-
 pages/competitions/_competition/_season.vue   |  6 +-
 .../_competition/_season/_phase.vue           |  4 +-
 .../_competition/_season/_phase/index.vue     |  4 +-
 .../_competition/_season/_phase/planning.vue  | 29 ++++++----
 .../_competition/_season/_phase/results.vue   | 23 ++++----
 .../_competition/_season/_phase/standings.vue | 33 +++++++----
 .../_competition/_season/match/_matchId.vue   | 18 +++---
 pages/competitions/_competition/index.vue     |  4 +-
 pages/contact.vue                             |  4 +-
 pages/etc2022.vue                             |  4 +-
 pages/event/_slug.vue                         |  4 +-
 pages/events/_slug.vue                        |  4 +-
 pages/impressum.vue                           |  4 +-
 pages/index.vue                               | 11 +++-
 pages/juniors.vue                             |  4 +-
 pages/medias.vue                              |  4 +-
 pages/national-teams/_team.vue                |  6 +-
 pages/national-teams/_team/index.vue          |  4 +-
 pages/national-teams/_team/players.vue        | 10 ++--
 pages/national-teams/_team/results.vue        | 17 ++++--
 pages/national-teams/_team/staff.vue          |  8 ++-
 .../competitions/_competition.vue             |  4 +-
 .../competitions/_competition/about.vue       |  4 +-
 .../competitions/_competition/index.vue       |  4 +-
 .../competitions/_competition/live.vue        |  4 +-
 .../competitions/_competition/medias.vue      |  4 +-
 .../competitions/_competition/schedule.vue    |  4 +-
 .../competitions/_competition/teams.vue       |  6 +-
 pages/news/_slug.vue                          |  6 +-
 pages/news/index.vue                          |  4 +-
 pages/newsletter/confirm.vue                  |  4 +-
 pages/newsletter/valid.vue                    |  4 +-
 pages/press-releases/_slug.vue                |  6 +-
 pages/press-releases/index.vue                |  4 +-
 pages/referees.vue                            |  4 +-
 pages/regional-associations.vue               |  4 +-
 pages/resources.vue                           |  4 +-
 pages/seasons/_season.vue                     |  6 +-
 pages/seasons/index.vue                       |  4 +-
 pages/structure/_group.vue                    |  4 +-
 pages/structure/index.vue                     |  4 +-
 pages/tchoukup.vue                            |  4 +-
 plugins/cms-service.ts                        |  8 ++-
 plugins/cms-service/national-teams.ts         | 58 ++++++++++++++-----
 plugins/directus.ts                           |  8 ++-
 plugins/leverade.ts                           | 20 +++++--
 tsconfig.json                                 |  4 ++
 utils/utils.ts                                |  4 +-
 101 files changed, 410 insertions(+), 303 deletions(-)

diff --git a/components/competitions/st-match-event-small.vue b/components/competitions/st-match-event-small.vue
index ef7994e7..d31e10f9 100644
--- a/components/competitions/st-match-event-small.vue
+++ b/components/competitions/st-match-event-small.vue
@@ -1,19 +1,20 @@
 <template>
   <st-event-small
-    :start-date="match.parsedDate()"
-    :name="`${match.home_team.name} - ${match.away_team.name}`"
+    v-if="match.parsedDate"
+    :start-date="match.parsedDate"
+    :name="matchName"
     :details="details"
     :to="to"
   />
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import Match from '~/models/match.model';
 import stEventSmall from '~/components/events/st-event-small.vue';
 import CompetitionEdition from '~/models/competition-edition.model';
 
-export default Vue.extend({
+export default defineComponent({
   components: { stEventSmall },
   props: {
     match: {
@@ -39,6 +40,9 @@ export default Vue.extend({
         },
       });
     },
+    matchName(): string {
+      return `${this.match.home_team?.name} - ${this.match.away_team?.name}`;
+    },
   },
 });
 </script>
diff --git a/components/competitions/st-match-result-list.vue b/components/competitions/st-match-result-list.vue
index 4d1eb9ce..d8795f03 100644
--- a/components/competitions/st-match-result-list.vue
+++ b/components/competitions/st-match-result-list.vue
@@ -13,11 +13,11 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import stMatchResult from '~/components/competitions/st-match-result.vue';
 import Match from '~/models/match.model';
 
-export default Vue.extend({
+export default defineComponent({
   components: {
     stMatchResult,
   },
diff --git a/components/competitions/st-match-result.vue b/components/competitions/st-match-result.vue
index f17ddb8b..d4a8ae90 100644
--- a/components/competitions/st-match-result.vue
+++ b/components/competitions/st-match-result.vue
@@ -43,10 +43,10 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import Match from '~/models/match.model';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     match: {
       type: Object as PropType<Match>,
diff --git a/components/competitions/st-upcoming-matches.vue b/components/competitions/st-upcoming-matches.vue
index 0ec8f379..5c38f5ac 100644
--- a/components/competitions/st-upcoming-matches.vue
+++ b/components/competitions/st-upcoming-matches.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import Match from '~/models/match.model';
 import stMatchEventSmall from '~/components/competitions/st-match-event-small.vue';
 import Phase from '~/models/phase.model';
@@ -48,7 +48,7 @@ import Round from '~/models/round.model';
 import CompetitionEdition from '~/models/competition-edition.model';
 import { NationalCompetitionEdition } from '~/plugins/cms-service';
 
-export default Vue.extend({
+export default defineComponent({
   components: { stMatchEventSmall },
   data() {
     return {
diff --git a/components/events/st-calendar-nav.vue b/components/events/st-calendar-nav.vue
index b72dc56f..0f9e2a4e 100644
--- a/components/events/st-calendar-nav.vue
+++ b/components/events/st-calendar-nav.vue
@@ -33,9 +33,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     month: {
       type: Number,
diff --git a/components/events/st-event-date.vue b/components/events/st-event-date.vue
index 182a6a48..f3552a47 100644
--- a/components/events/st-event-date.vue
+++ b/components/events/st-event-date.vue
@@ -12,10 +12,10 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { isSameDay, isSameMonth, isSameYear } from 'date-fns';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     startDate: {
       type: Date as PropType<Date>,
diff --git a/components/events/st-event-list.vue b/components/events/st-event-list.vue
index 6b5b388f..7f8b75cc 100644
--- a/components/events/st-event-list.vue
+++ b/components/events/st-event-list.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import stEvent from '~/components/events/st-event.vue';
 import { CalendarEvent } from '~/plugins/cms-service';
 
-export default Vue.extend({
+export default defineComponent({
   components: {
     stEvent,
   },
diff --git a/components/events/st-event-small.vue b/components/events/st-event-small.vue
index 470ffd30..ed36b681 100644
--- a/components/events/st-event-small.vue
+++ b/components/events/st-event-small.vue
@@ -23,10 +23,10 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { isSameDay, isSameMonth } from 'date-fns';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     startDate: {
       type: Date as PropType<Date>,
diff --git a/components/events/st-event.vue b/components/events/st-event.vue
index 63eea410..87259385 100644
--- a/components/events/st-event.vue
+++ b/components/events/st-event.vue
@@ -21,7 +21,7 @@
           <st-cancelled-label v-if="isCancelled" class="c-event__cancelled-label" />
         </h3>
         <nuxt-link
-          v-if="eventType.name"
+          v-if="eventType && eventType.name"
           :to="
             localePath({ name: 'events-slug', params: { slug: `${eventType.id}-${$slugify(eventType.name_plural)}` } })
           "
@@ -71,7 +71,7 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 // import { Location } from 'vue-router';
 import { Store } from 'vuex';
 import { CalendarEvent } from '~/plugins/cms-service';
@@ -79,7 +79,7 @@ import { EventType, EventTypes, RootState } from '~/store/state';
 import { getAssetSrcSet, getAssetURL } from '~/plugins/directus';
 import stEventDate from '~/components/events/st-event-date.vue';
 
-export default Vue.extend({
+export default defineComponent({
   components: { stEventDate },
   props: {
     event: {
@@ -154,9 +154,9 @@ export default Vue.extend({
     mainImageDescription(): string {
       return this.event?.image?.description || this.eventType?.image?.description || '';
     },
-    mapsUrl(): string | null {
+    mapsUrl(): string | undefined {
       if (!this.event.venue) {
-        return null;
+        return undefined;
       }
       // This link will fallback to Google Maps if Apple Maps is not available
       return `//maps.apple.com/?q=${this.event.venue.address?.replace('\n', ', ')}`;
diff --git a/components/events/st-month-calendar.vue b/components/events/st-month-calendar.vue
index 900ac42f..baa9cf8e 100644
--- a/components/events/st-month-calendar.vue
+++ b/components/events/st-month-calendar.vue
@@ -41,7 +41,7 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import {
   addDays,
   differenceInCalendarDays,
@@ -68,7 +68,7 @@ interface CalendarDays {
   [key: string]: CalendarDay;
 }
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     month: {
       type: Number,
diff --git a/components/icon/st-custom-icon.vue b/components/icon/st-custom-icon.vue
index 4544d5e4..c994b604 100644
--- a/components/icon/st-custom-icon.vue
+++ b/components/icon/st-custom-icon.vue
@@ -17,8 +17,8 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
+import { defineComponent } from 'vue';
+export default defineComponent({
   props: {
     iconName: {
       type: String,
diff --git a/components/national-teams/st-national-team-competition-team-list.vue b/components/national-teams/st-national-team-competition-team-list.vue
index daa55c3b..7521ebf7 100644
--- a/components/national-teams/st-national-team-competition-team-list.vue
+++ b/components/national-teams/st-national-team-competition-team-list.vue
@@ -38,12 +38,12 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { NationalTeamForCompetition } from './st-national-teams.prop';
 import StPlayer from '~/components/national-teams/st-player.vue';
 import StPerson from '~/components/people/st-person.vue';
 
-export default Vue.extend({
+export default defineComponent({
   components: { StPerson, StPlayer },
   props: {
     teams: {
diff --git a/components/national-teams/st-national-team-competition-update-list.vue b/components/national-teams/st-national-team-competition-update-list.vue
index f2ac3d3b..1c0340a6 100644
--- a/components/national-teams/st-national-team-competition-update-list.vue
+++ b/components/national-teams/st-national-team-competition-update-list.vue
@@ -47,7 +47,7 @@
           <select
             v-model="filters.selectedTeamId"
             class="c-national-team-competition-update-list__team-filter"
-            :aria-label="$t('internationalCompetition.live.updates.filters.teams')"
+            :aria-label="$t('internationalCompetition.live.updates.filters.teams').toString()"
           >
             <option :value="undefined">{{ $t('internationalCompetition.live.updates.filters.noTeamFilter') }}</option>
             <option v-for="team of teams" :key="team.id" :value="team.id">{{ team.name }}</option>
@@ -85,14 +85,14 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { NationalTeamCompetitionUpdate } from './st-national-teams.prop';
 import StNationalTeamCompetitionUpdate from '~/components/national-teams/st-national-team-competition-update.vue';
 
 const UPDATES_PER_PAGE = 10;
 const REFRESH_INTERVAL = 30; // In seconds
 
-export default Vue.extend({
+export default defineComponent({
   components: {
     StNationalTeamCompetitionUpdate,
   },
diff --git a/components/national-teams/st-national-team-competition-update.vue b/components/national-teams/st-national-team-competition-update.vue
index 647a4094..d90b0618 100644
--- a/components/national-teams/st-national-team-competition-update.vue
+++ b/components/national-teams/st-national-team-competition-update.vue
@@ -28,13 +28,13 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { differenceInDays } from 'date-fns';
 import linkifyString from 'linkify-string';
 import { getAssetSrcSet, getAssetURL } from '~/plugins/directus';
 import { NationalTeamCompetitionUpdate } from '~/components/national-teams/st-national-teams.prop';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     update: {
       type: Object as PropType<NationalTeamCompetitionUpdate>,
diff --git a/components/national-teams/st-national-teams.prop.ts b/components/national-teams/st-national-teams.prop.ts
index 59f11dca..8f43909e 100644
--- a/components/national-teams/st-national-teams.prop.ts
+++ b/components/national-teams/st-national-teams.prop.ts
@@ -1,22 +1,23 @@
+import { PartialItem } from '@directus/sdk';
 import { Gender, Role } from '~/plugins/cms-service';
-import { DirectusImage } from '~/plugins/directus';
+import { DirectusImage, DirectusPerson } from '~/plugins/directus';
 
 export interface Player {
   id: number;
   first_name: string;
   last_name: string;
-  number: number;
+  number?: number;
   is_captain: boolean;
-  birth_year: number;
-  gender: Gender;
-  club: {
+  birth_year?: number;
+  gender?: Gender;
+  club?: {
     name: string;
   };
-  positions: string[];
-  date_start: string;
-  date_end: string;
-  track_record: string;
-  portrait_square_head: string;
+  positions: number[];
+  date_start?: string;
+  date_end?: string;
+  track_record?: string;
+  portrait_square_head?: string;
 }
 
 export interface NationalTeamCompetition {
@@ -72,7 +73,10 @@ export interface NationalTeam {
 export interface NationalTeamForCompetition {
   id: number;
   competition: NationalTeamCompetition;
-  team: Pick<NationalTeam, 'name'>;
+  team: Pick<NationalTeam, 'name' | 'slug'>;
   players: Player[];
-  coaches: number[];
+  coaches: PartialItem<DirectusPerson>[];
 }
+
+// Just to clear a Nuxt warning.
+export default {};
diff --git a/components/national-teams/st-player.vue b/components/national-teams/st-player.vue
index b1d78a7c..270a3036 100644
--- a/components/national-teams/st-player.vue
+++ b/components/national-teams/st-player.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import stPerson, { PersonDetail } from '~/components/people/st-person.vue';
 import { Player } from '~/components/national-teams/st-national-teams.prop';
 import { Gender } from '~/plugins/cms-service';
 
-export default Vue.extend({
+export default defineComponent({
   components: { stPerson },
   props: {
     player: {
@@ -22,8 +22,8 @@ export default Vue.extend({
     },
   },
   computed: {
-    subName(): string | null {
-      return this.player.is_captain ? this.$t('nationalTeams.captain').toString() : null;
+    subName(): string | undefined {
+      return this.player.is_captain ? this.$t('nationalTeams.captain').toString() : undefined;
     },
     details(): PersonDetail[] {
       const details = [];
diff --git a/components/news/st-news-list.vue b/components/news/st-news-list.vue
index 59a59b91..8ba1f0a0 100644
--- a/components/news/st-news-list.vue
+++ b/components/news/st-news-list.vue
@@ -36,14 +36,14 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { NewsEntry } from '~/components/news/st-news';
 import { Domain } from '~/plugins/cms-service';
 import { getAssetSrcSet, getAssetURL } from '~/plugins/directus';
 
 const MAX_NEWS_PER_ROW = 4;
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     news: {
       type: Array as PropType<NewsEntry[]>,
diff --git a/components/news/st-news.vue b/components/news/st-news.vue
index d584a56a..bf5939b6 100644
--- a/components/news/st-news.vue
+++ b/components/news/st-news.vue
@@ -19,13 +19,13 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { NewsEntry } from '~/components/news/st-news';
 import { BreadcrumbItem } from '~/components/st-breadcrumb.vue';
 import { Domain } from '~/plugins/cms-service';
 import { getAssetURL, getAssetSrcSet } from '~/plugins/directus';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     newsEntry: {
       type: Object as PropType<NewsEntry>,
diff --git a/components/people/st-person.vue b/components/people/st-person.vue
index ae6e8eeb..56115635 100644
--- a/components/people/st-person.vue
+++ b/components/people/st-person.vue
@@ -4,7 +4,7 @@
       v-if="avatarAssetId"
       :src="avatarSrc"
       :srcset="avatarSrcSet"
-      :alt="$t('person.photoOf', { name })"
+      :alt="$t('person.photoOf', { name }).toString()"
       class="c-person__avatar"
     />
     <div v-else class="c-person__avatar">
@@ -30,7 +30,7 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { getAssetURL } from '~/plugins/directus';
 
 export interface PersonDetail {
@@ -40,7 +40,7 @@ export interface PersonDetail {
   href?: string;
 }
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     avatarAssetId: {
       type: String,
diff --git a/components/people/st-role.vue b/components/people/st-role.vue
index fd65ea22..61cf218c 100644
--- a/components/people/st-role.vue
+++ b/components/people/st-role.vue
@@ -5,7 +5,7 @@
       v-for="holder in role.holders"
       :key="holder.id"
       :name="`${holder.first_name} ${holder.last_name}`"
-      :sub-name="roleAsSubname ? nameForHolders : null"
+      :sub-name="roleAsSubname ? nameForHolders : undefined"
       :avatar-asset-id="holder.portrait_square_head"
       :details="getHolderDetails(holder)"
       class="c-role__person"
@@ -15,15 +15,15 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import stPerson, { PersonDetail } from '~/components/people/st-person.vue';
-import { Gender, Person, Role } from '~/plugins/cms-service';
+import { Gender, Person, Role, RoleWithPartialGroupAndHolders } from '~/plugins/cms-service';
 
-export default Vue.extend({
+export default defineComponent({
   components: { stPerson },
   props: {
     role: {
-      type: Object as PropType<Role>,
+      type: Object as PropType<Role | RoleWithPartialGroupAndHolders>,
       required: true,
     },
     roleAsSubname: Boolean,
@@ -40,9 +40,9 @@ export default Vue.extend({
     },
   },
   methods: {
-    getHolderDetails(holder: Person): PersonDetail[] {
+    getHolderDetails(holder: Person | Partial<Person> | undefined): PersonDetail[] {
       const details = [];
-      if (holder.email) {
+      if (holder?.email) {
         details.push({
           icon: 'envelope',
           text: holder.email,
diff --git a/components/people/st-staff-person.vue b/components/people/st-staff-person.vue
index c0775351..9bdf3884 100644
--- a/components/people/st-staff-person.vue
+++ b/components/people/st-staff-person.vue
@@ -21,11 +21,11 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import stPerson, { PersonDetail } from '~/components/people/st-person.vue';
 import { Gender, Person, Role } from '~/plugins/cms-service';
 
-export default Vue.extend({
+export default defineComponent({
   components: { stPerson },
   props: {
     person: {
diff --git a/components/resources/st-resource-list.vue b/components/resources/st-resource-list.vue
index 86d2b621..b4ea6393 100644
--- a/components/resources/st-resource-list.vue
+++ b/components/resources/st-resource-list.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { Resource } from '~/plugins/cms-service';
 import stResource from '~/components/resources/st-resource.vue';
 
-export default Vue.extend({
+export default defineComponent({
   components: { stResource },
   props: {
     resources: {
diff --git a/components/resources/st-resource.vue b/components/resources/st-resource.vue
index a4c6a630..fa02b375 100644
--- a/components/resources/st-resource.vue
+++ b/components/resources/st-resource.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { TranslateResult } from 'vue-i18n';
 import { Resource } from '~/plugins/cms-service';
 import { humanFileSize } from '~/utils/utils';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     resource: {
       type: Object as PropType<Resource>,
diff --git a/components/st-breadcrumb.vue b/components/st-breadcrumb.vue
index 4f254145..5b2f3f8f 100644
--- a/components/st-breadcrumb.vue
+++ b/components/st-breadcrumb.vue
@@ -15,14 +15,14 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 
 export interface BreadcrumbItem {
   pageName: string;
   displayName: string;
 }
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     items: {
       type: Array as PropType<BreadcrumbItem[]>,
diff --git a/components/st-burger-button.vue b/components/st-burger-button.vue
index c8d93bb7..6a344f49 100644
--- a/components/st-burger-button.vue
+++ b/components/st-burger-button.vue
@@ -11,8 +11,8 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
+import { defineComponent } from 'vue';
+export default defineComponent({
   model: {
     prop: 'open',
     event: 'toggle',
diff --git a/components/st-button.vue b/components/st-button.vue
index 8d055e39..8b5fb718 100644
--- a/components/st-button.vue
+++ b/components/st-button.vue
@@ -15,9 +15,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     type: {
       type: String,
diff --git a/components/st-category-distribution-table.vue b/components/st-category-distribution-table.vue
index 980ff49c..cadeceb2 100644
--- a/components/st-category-distribution-table.vue
+++ b/components/st-category-distribution-table.vue
@@ -44,9 +44,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     seasonStartYear: {
       type: Number,
diff --git a/components/st-club-list.vue b/components/st-club-list.vue
index a63c6522..8cb62c91 100644
--- a/components/st-club-list.vue
+++ b/components/st-club-list.vue
@@ -6,20 +6,22 @@
         v-if="club.logo"
         :src="logoSrc(club.logo)"
         :srcset="logoSrcSet(club.logo)"
-        :alt="$t('clubs.logoOf', { name: club.name })"
+        :alt="$t('clubs.logoOf', { name: club.name }).toString()"
         class="c-club-list__club-logo"
       />
-      <a :href="club.website" class="c-club-list__club-website">{{ getWebsiteDisplay(club.website) }}</a>
+      <a v-if="club.website" :href="club.website" class="c-club-list__club-website">
+        {{ getWebsiteDisplay(club.website) }}
+      </a>
     </li>
   </ul>
 </template>
 
 <script lang="ts">
 import { PartialItem } from '@directus/sdk';
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { DirectusClub, getAssetURL } from '~/plugins/directus';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     clubs: {
       type: Array as PropType<PartialItem<DirectusClub>[]>,
diff --git a/components/st-domain-labels.vue b/components/st-domain-labels.vue
index 021565c2..61951453 100644
--- a/components/st-domain-labels.vue
+++ b/components/st-domain-labels.vue
@@ -9,10 +9,10 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { Domain } from '~/plugins/cms-service';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     domains: {
       type: Array as PropType<Domain[]>,
diff --git a/components/st-flickr-album-gallery.vue b/components/st-flickr-album-gallery.vue
index 7c87f36d..d9e83960 100644
--- a/components/st-flickr-album-gallery.vue
+++ b/components/st-flickr-album-gallery.vue
@@ -7,10 +7,10 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { FlickrPhoto } from '~/plugins/flickr';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     photos: {
       type: Array as PropType<FlickrPhoto[]>,
diff --git a/components/st-flickr-album-link.vue b/components/st-flickr-album-link.vue
index 8e07f241..88eaff31 100644
--- a/components/st-flickr-album-link.vue
+++ b/components/st-flickr-album-link.vue
@@ -18,10 +18,10 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { FlickrPhotoset } from '~/plugins/flickr';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     album: {
       type: Object as PropType<FlickrPhotoset>,
diff --git a/components/st-flickr-photo.vue b/components/st-flickr-photo.vue
index ea81613b..b68a518c 100644
--- a/components/st-flickr-photo.vue
+++ b/components/st-flickr-photo.vue
@@ -5,10 +5,10 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { FlickrPhoto } from '~/plugins/flickr';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     photo: {
       type: Object as PropType<FlickrPhoto>,
diff --git a/components/st-footer.vue b/components/st-footer.vue
index 2b722fa4..5c38b0c5 100644
--- a/components/st-footer.vue
+++ b/components/st-footer.vue
@@ -44,7 +44,7 @@
         <a v-for="partner of partners" :key="partner.slug" :href="partner.href">
           <img
             :src="`/images/logo-${partner.slug}.svg`"
-            :alt="$t('footer.logoFrom', { orgName: partner.name })"
+            :alt="$t('footer.logoFrom', { orgName: partner.name }).toString()"
             :title="partner.name"
             class="c-footer__org-logo"
           />
@@ -55,7 +55,7 @@
         <a v-for="affiliation of affiliations" :key="affiliation.slug" :href="affiliation.href">
           <img
             :src="`/images/logo-${affiliation.slug}.svg`"
-            :alt="$t('footer.logoFrom', { orgName: affiliation.name })"
+            :alt="$t('footer.logoFrom', { orgName: affiliation.name }).toString()"
             :title="affiliation.name"
             class="c-footer__org-logo"
           />
@@ -70,9 +70,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   data() {
     return {
       partners: [
diff --git a/components/st-home-carousel.vue b/components/st-home-carousel.vue
index 18e0e156..fe9ba0e7 100644
--- a/components/st-home-carousel.vue
+++ b/components/st-home-carousel.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { getAssetSrcSet, getAssetURL } from '~/plugins/directus';
 
 export interface CarouselItem {
@@ -38,7 +38,7 @@ export interface CarouselItem {
 
 // TODO: Switch to Swiper when we'll be using Vue 3.
 //       https://swiperjs.com/vue
-export default Vue.extend({
+export default defineComponent({
   props: {
     items: {
       type: Array as PropType<CarouselItem[]>,
diff --git a/components/st-language-switcher.vue b/components/st-language-switcher.vue
index 41f84352..6921d1a1 100644
--- a/components/st-language-switcher.vue
+++ b/components/st-language-switcher.vue
@@ -16,15 +16,16 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { LocaleObject } from '@nuxtjs/i18n';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   computed: {
     currentLocale() {
       return this.$i18n.locale;
     },
     availableLocales() {
-      return this.$i18n.locales;
+      return this.$i18n.locales as LocaleObject[];
     },
   },
 });
diff --git a/components/st-link-action.vue b/components/st-link-action.vue
index 000d4d8f..8c5965e3 100644
--- a/components/st-link-action.vue
+++ b/components/st-link-action.vue
@@ -16,9 +16,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     type: {
       type: String,
diff --git a/components/st-link-list.vue b/components/st-link-list.vue
index 5276d2cc..ac4de58f 100644
--- a/components/st-link-list.vue
+++ b/components/st-link-list.vue
@@ -2,7 +2,7 @@
   <nav>
     <h2 class="u-visually-hidden">{{ name }}</h2>
     <ul class="c-link-list">
-      <li v-for="item in items" :key="item.name" class="c-link-list-item">
+      <li v-for="item in items" :key="item.name.toString()" class="c-link-list-item">
         <nuxt-link :to="item.href">
           {{ item.name }}
         </nuxt-link>
@@ -12,10 +12,10 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { MenuItem } from '~/store/state';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     /**
      * Name of the navigation, visible to screen readers.
diff --git a/components/st-live-stream-banner.vue b/components/st-live-stream-banner.vue
index 025e69a5..68a7cf97 100644
--- a/components/st-live-stream-banner.vue
+++ b/components/st-live-stream-banner.vue
@@ -21,10 +21,10 @@
 
 <script lang="ts">
 import { isPast, subMinutes } from 'date-fns';
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { LiveStream } from '~/plugins/cms-service';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     liveStreams: {
       type: Array as PropType<LiveStream[]>,
diff --git a/components/st-medal.vue b/components/st-medal.vue
index 864f4ef0..2a0a1592 100644
--- a/components/st-medal.vue
+++ b/components/st-medal.vue
@@ -1,10 +1,12 @@
 <template>
-  <div class="c-medal" :class="medalVariantClass" :title="$t('nationalTeams.results.rank', { rank })">{{ rank }}</div>
+  <div class="c-medal" :class="medalVariantClass" :title="$t('nationalTeams.results.rank', { rank }).toString()">
+    {{ rank }}
+  </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
+import { defineComponent } from 'vue';
+export default defineComponent({
   props: {
     rank: {
       type: Number,
diff --git a/components/st-navigation.vue b/components/st-navigation.vue
index 76b95857..16dd8c47 100644
--- a/components/st-navigation.vue
+++ b/components/st-navigation.vue
@@ -23,7 +23,7 @@
         <component
           :is="item.href ? 'nuxt-link' : 'button'"
           v-else
-          :to="localePath(item.href)"
+          :to="item.href ? localePath(item.href) : undefined"
           :aria-haspopup="item.children && !!item.children.length"
           :aria-expanded="openStates[itemIndex]"
           class="u-unstyled-button c-navigation__item-name"
@@ -37,9 +37,12 @@
           class="u-unstyled-list c-navigation__sub-items"
         >
           <li v-for="(subItem, subItemIndex) in item.children" :key="subItemIndex" class="c-navigation__sub-item">
-            <nuxt-link :to="localePath(subItem.href)" @click.native="onItemClickNative(subItem)">{{
-              subItem.name
-            }}</nuxt-link>
+            <nuxt-link
+              :to="subItem.href ? localePath(subItem.href) : undefined"
+              @click.native="onItemClickNative(subItem)"
+            >
+              {{ subItem.name }}
+            </nuxt-link>
           </li>
         </ul>
       </li>
@@ -48,11 +51,11 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import vClickOutside from 'v-click-outside';
 import { MenuItem } from '~/store/state';
 
-export default Vue.extend({
+export default defineComponent({
   directives: {
     clickOutside: vClickOutside.directive,
   },
diff --git a/components/st-pagination.vue b/components/st-pagination.vue
index a1caac6a..4e0f41dc 100644
--- a/components/st-pagination.vue
+++ b/components/st-pagination.vue
@@ -38,9 +38,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     currentPage: {
       type: Number,
diff --git a/components/st-select-navigation.vue b/components/st-select-navigation.vue
index 01ceadd4..0cbb3227 100644
--- a/components/st-select-navigation.vue
+++ b/components/st-select-navigation.vue
@@ -16,17 +16,19 @@
     </button>
     <ul v-if="open" class="u-unstyled-list c-select-navigation__options">
       <li v-for="(option, index) in options" :key="index" class="c-select-navigation__option">
-        <nuxt-link :to="localePath(option.href)" @click.native="onItemClickNative(option)">{{ option.name }}</nuxt-link>
+        <nuxt-link :to="option.href ? localePath(option.href) : undefined" @click.native="onItemClickNative(option)">
+          {{ option.name }}
+        </nuxt-link>
       </li>
     </ul>
   </nav>
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { MenuItem } from '~/store/state';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     /**
      * Name of the navigation, visible to screen readers.
diff --git a/components/st-simple-page.vue b/components/st-simple-page.vue
index 77a09b52..a3e7f7ff 100644
--- a/components/st-simple-page.vue
+++ b/components/st-simple-page.vue
@@ -13,18 +13,18 @@
     </template>
 
     <template v-for="role in keyRoles">
-      <st-role v-if="role.holders.length > 0" :key="role.id" class="c-simple-page__role" :role="role" />
+      <st-role v-if="role.holders && role.holders.length > 0" :key="role.id" class="c-simple-page__role" :role="role" />
     </template>
   </section>
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { Resource, Role } from '~/plugins/cms-service';
 import stRole from '~/components/people/st-role.vue';
 import StResourceList from '~/components/resources/st-resource-list.vue';
 
-export default Vue.extend({
+export default defineComponent({
   components: { stRole, StResourceList },
   props: {
     title: {
diff --git a/components/tchoukup/st-tchoukup-list.vue b/components/tchoukup/st-tchoukup-list.vue
index 150ede1a..fc983e98 100644
--- a/components/tchoukup/st-tchoukup-list.vue
+++ b/components/tchoukup/st-tchoukup-list.vue
@@ -1,7 +1,7 @@
 <template>
   <ul class="c-tchoukup-list u-unstyled-list">
     <li v-for="issue of issues" :key="`tchoukup-${issue.id}`" class="c-tchoukup-list__entry">
-      <a class="c-tchoukup-list__image-container" :href="getIssueDownloadLink(issue)" :download="download">
+      <a class="c-tchoukup-list__image-container" :href="getIssueDownloadLink(issue)">
         <img
           v-if="issue.cover"
           class="c-tchoukup-list__image"
@@ -17,7 +17,7 @@
         />
       </a>
       <h3 class="c-tchoukup-list__title t-headline-3">
-        <a :href="getIssueDownloadLink(issue)" :download="download">
+        <a :href="getIssueDownloadLink(issue)">
           {{ $t('tchoukup.no') }} {{ issue.number }} – {{ getReleaseMonth(issue) }}
         </a>
       </h3>
@@ -27,13 +27,13 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { Tchoukup } from '~/components/tchoukup/st-tchoukup';
 import { getAssetSrcSet, getAssetURL } from '~/plugins/directus';
 
 const MAX_NEWS_PER_ROW = 4;
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     issues: {
       type: Array as PropType<Tchoukup[]>,
diff --git a/layouts/default.vue b/layouts/default.vue
index 04a98b8b..95e463fe 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -34,11 +34,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { MenuItem } from '~/store/state';
 import { LiveStream } from '~/plugins/cms-service';
 
-export default Vue.extend({
+export default defineComponent({
   data() {
     return {
       isDrawerOpen: false,
diff --git a/mixins/month-params.mixin.ts b/mixins/month-params.mixin.ts
index f59b0258..de90f4c3 100644
--- a/mixins/month-params.mixin.ts
+++ b/mixins/month-params.mixin.ts
@@ -1,7 +1,7 @@
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { isDigitsString } from '~/utils/utils';
 
-export default Vue.extend({
+export default defineComponent({
   validate({ params }) {
     return isDigitsString(params.year) && isDigitsString(params.month);
   },
diff --git a/mixins/newsletter.mixin.ts b/mixins/newsletter.mixin.ts
index f6c66bec..2075c4e4 100644
--- a/mixins/newsletter.mixin.ts
+++ b/mixins/newsletter.mixin.ts
@@ -1,10 +1,10 @@
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
 const newsletterSlugs = ['general', 'instructors', 'medias-fr', 'medias-de'];
 
 export type NewsletterSlug = (typeof newsletterSlugs)[number];
 
-export default Vue.extend({
+export default defineComponent({
   asyncData({ route }) {
     return {
       selectedNewsletter:
diff --git a/models/match.model.ts b/models/match.model.ts
index 5ea19ddc..0f2ab6c1 100644
--- a/models/match.model.ts
+++ b/models/match.model.ts
@@ -166,7 +166,7 @@ export default class Match {
     }
   }
 
-  parsedDate() {
+  get parsedDate(): Date | undefined {
     if (this.datetime) {
       return parseLeveradeDate(this.datetime);
     }
diff --git a/pages/_.vue b/pages/_.vue
index 7ba9079a..977e9e0b 100644
--- a/pages/_.vue
+++ b/pages/_.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { MetaInfo } from 'vue-meta';
 import { decode } from 'html-entities';
 import stSimplePage from '~/components/st-simple-page.vue';
@@ -13,7 +13,7 @@ import stSimplePage from '~/components/st-simple-page.vue';
  * Based on the given path, we call the Directus API to get the page content.
  * If there's no match, we redirect to the 404 page.
  */
-export default Vue.extend({
+export default defineComponent({
   components: { stSimplePage },
   async asyncData({ app, route, redirect, error, i18n }) {
     let splitPath = route.path.match('^/.{2}(/.*)$');
@@ -59,6 +59,14 @@ export default Vue.extend({
       }
     }
   },
+  data() {
+    return {
+      title: '',
+      body: '',
+      keyRoles: [],
+      resources: [],
+    };
+  },
   head(): MetaInfo {
     // We use this as any because body comes from asyncData and it is not recognised as being part of the Vue component.
     // This is going to be fixed in Nuxt 2.16.
diff --git a/pages/calendar/_year/_month/index.vue b/pages/calendar/_year/_month/index.vue
index 89850d7c..9f8dab91 100644
--- a/pages/calendar/_year/_month/index.vue
+++ b/pages/calendar/_year/_month/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   nuxtI18n: {
     paths: {
       fr: '/calendrier/:year/:month',
diff --git a/pages/calendar/_year/index.vue b/pages/calendar/_year/index.vue
index b4399816..44017a48 100644
--- a/pages/calendar/_year/index.vue
+++ b/pages/calendar/_year/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   nuxtI18n: {
     paths: {
       fr: '/calendrier/:year',
diff --git a/pages/calendar/index.vue b/pages/calendar/index.vue
index 422d2c3c..461abb7e 100644
--- a/pages/calendar/index.vue
+++ b/pages/calendar/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   nuxtI18n: {
     paths: {
       fr: '/calendrier',
diff --git a/pages/clubs.vue b/pages/clubs.vue
index abaef16c..1f6557b9 100644
--- a/pages/clubs.vue
+++ b/pages/clubs.vue
@@ -12,11 +12,11 @@
 
 <script lang="ts">
 import { PartialItem } from '@directus/sdk';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import stClubList from '~/components/st-club-list.vue';
 import { DirectusClub } from '~/plugins/directus';
 
-export default Vue.extend({
+export default defineComponent({
   components: { stClubList },
   data() {
     return {
diff --git a/pages/competitions/_competition/_season.vue b/pages/competitions/_competition/_season.vue
index a5626287..f457fe5a 100644
--- a/pages/competitions/_competition/_season.vue
+++ b/pages/competitions/_competition/_season.vue
@@ -10,7 +10,7 @@
         </nuxt-link>
       </h2>
       <st-navigation
-        v-if="showPhasesNavigation"
+        v-if="showPhasesNavigation && competitionEdition"
         :items="phasesNavigation"
         :name="$t('otherNavigation', { name: `${competitionEdition.name}, ${season.name}` })"
         class="c-competition-edition__phase-navigation"
@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { MenuItem } from '~/store/state';
 import { BreadcrumbItem } from '~/components/st-breadcrumb.vue';
 import CompetitionEdition from '~/models/competition-edition.model';
@@ -42,7 +42,7 @@ import {
 } from '~/plugins/leverade';
 import { Await } from '~/types/types.utils';
 
-export default Vue.extend({
+export default defineComponent({
   nuxtI18n: {
     paths: {
       fr: '/competitions/:competition/:season',
diff --git a/pages/competitions/_competition/_season/_phase.vue b/pages/competitions/_competition/_season/_phase.vue
index bc4a2b52..e6f29d4f 100644
--- a/pages/competitions/_competition/_season/_phase.vue
+++ b/pages/competitions/_competition/_season/_phase.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import Season from '~/models/season.model';
 import Phase from '~/models/phase.model';
 import Round from '~/models/round.model';
@@ -19,7 +19,7 @@ import CompetitionEdition from '~/models/competition-edition.model';
 import { LeveradeGroupType } from '~/plugins/leverade';
 import { MenuItem } from '~/store/state';
 
-export default Vue.extend({
+export default defineComponent({
   nuxtI18n: {
     paths: {
       fr: '/competitions/:competition/:season/:phase',
diff --git a/pages/competitions/_competition/_season/_phase/index.vue b/pages/competitions/_competition/_season/_phase/index.vue
index 127ec4b6..f997b8e2 100644
--- a/pages/competitions/_competition/_season/_phase/index.vue
+++ b/pages/competitions/_competition/_season/_phase/index.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import Phase from '~/models/phase.model';
 import Round from '~/models/round.model';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     phase: {
       type: Object as PropType<Phase>,
diff --git a/pages/competitions/_competition/_season/_phase/planning.vue b/pages/competitions/_competition/_season/_phase/planning.vue
index 84053c2b..acbd5a81 100644
--- a/pages/competitions/_competition/_season/_phase/planning.vue
+++ b/pages/competitions/_competition/_season/_phase/planning.vue
@@ -7,9 +7,9 @@
             class="c-planning__match"
             :to="localePath({ name: 'competitions-competition-season-match-matchId', params: { matchId: match.id } })"
           >
-            <st-event-date :start-date="match.parsedDate()" always-one-line />
+            <st-event-date v-if="match.parsedDate" :start-date="match.parsedDate" always-one-line />
             <div v-if="showMatchRound" class="c-planning__match-round">
-              {{ getRound(match.round_id) ? getRound(match.round_id).name : '' }}
+              {{ getRoundName(match) }}
             </div>
             <h4 v-if="match.homeTeamName || match.awayTeamName" class="c-planning__match-name">
               <div class="c-planning__match-team c-planning__match-team--home">
@@ -39,10 +39,12 @@
               <template v-else>
                 <template v-if="showTime(match)">
                   <fa-icon icon="clock" class="c-planning__match-icon" />
-                  {{ $formatDate(match.parsedDate(), 'HH:mm') }}
+                  {{ match.parsedDate ? $formatDate(match.parsedDate, 'HH:mm') : '' }}
+                </template>
+                <template v-if="match.facility">
+                  <fa-icon icon="location-dot" class="c-planning__match-icon" />
+                  {{ match.facility.name }}, {{ match.facility.city }}
                 </template>
-                <fa-icon icon="location-dot" class="c-planning__match-icon" />
-                {{ match.facility.name }}, {{ match.facility.city }}
               </template>
             </div>
           </nuxt-link>
@@ -54,7 +56,7 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import Season from '~/models/season.model';
 import Phase from '~/models/phase.model';
 import Match from '~/models/match.model';
@@ -63,7 +65,7 @@ import StEventDate from '~/components/events/st-event-date.vue';
 import { LeveradeGroupType } from '~/plugins/leverade';
 import Round from '~/models/round.model';
 
-export default Vue.extend({
+export default defineComponent({
   nuxtI18n: {
     paths: {
       StEventDatefr: '/competitions/:competition/:season/:phase/programme',
@@ -90,9 +92,9 @@ export default Vue.extend({
   },
   head() {
     const title = this.$t('competitions.headTitle.planning', {
-      phaseName: this.phase.name,
-      editionName: this.competitionEdition.name,
-      seasonName: this.season.name,
+      phaseName: (this as any).phase.name,
+      editionName: (this as any).competitionEdition.name,
+      seasonName: (this as any).season.name,
     }).toString();
     return {
       title,
@@ -118,12 +120,15 @@ export default Vue.extend({
     showTime(match: Match) {
       // This can be a problem if a match is actually scheduled at midnight.
       // Unfortunately, there's currently no way to differentiate a match for which the date is not set from one where it is scheduled at midnight.
-      const matchParsedDate = match.parsedDate();
-      return matchParsedDate && this.$formatDate(matchParsedDate, 'HH:mm') !== '00:00';
+      return match.parsedDate && this.$formatDate(match.parsedDate, 'HH:mm') !== '00:00';
     },
     getRound(roundId: string): Round | undefined {
       return this.phase?.rounds?.find((round) => round.id === roundId);
     },
+    getRoundName(match: Match): string {
+      const round = this.getRound(match.round_id);
+      return round?.name || '';
+    },
   },
 });
 </script>
diff --git a/pages/competitions/_competition/_season/_phase/results.vue b/pages/competitions/_competition/_season/_phase/results.vue
index 02b0059e..08d8cf14 100644
--- a/pages/competitions/_competition/_season/_phase/results.vue
+++ b/pages/competitions/_competition/_season/_phase/results.vue
@@ -3,9 +3,9 @@
     <template v-if="roundsToShow.length > 0">
       <ul class="u-unstyled-list c-results__round">
         <li v-for="round of roundsToShow" :key="round.id" class="c-results__round">
-          <template v-if="!round.faceoffs.length">
+          <template v-if="!round.faceoffs || !round.faceoffs.length">
             <h3 class="t-headline-2 c-results__round-name">{{ round.name }}</h3>
-            <st-match-result-list :matches="round.matches" />
+            <st-match-result-list :matches="round.matches || []" />
           </template>
 
           <template v-else>
@@ -16,10 +16,10 @@
                   <template v-if="round.faceoffs.length > 1">{{ index + 1 }}</template>
                 </h3>
 
-                <div v-if="isFaceoffAutoQualified(faceoff)">
-                  {{ $t('competitions.results.autoQualified', { teamName: faceoff[`${faceoff.winner}_team`].name }) }}
+                <div v-if="isFaceoffAutoQualified(faceoff) && faceoff.winner">
+                  {{ $t('competitions.results.autoQualified', { teamName: getFaceoffWinnerName(faceoff) }) }}
                 </div>
-                <st-match-result-list v-else :matches="faceoff.matches" />
+                <st-match-result-list v-else :matches="faceoff.matches || []" />
               </template>
             </div>
           </template>
@@ -31,7 +31,7 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import Season from '~/models/season.model';
 import Phase from '~/models/phase.model';
 import Round from '~/models/round.model';
@@ -39,7 +39,7 @@ import stMatchResultList from '~/components/competitions/st-match-result-list.vu
 import Faceoff from '~/models/faceoff.model';
 import CompetitionEdition from '~/models/competition-edition.model';
 
-export default Vue.extend({
+export default defineComponent({
   nuxtI18n: {
     paths: {
       fr: '/competitions/:competition/:season/:phase/resultats',
@@ -65,9 +65,9 @@ export default Vue.extend({
   },
   head() {
     const title = this.$t('competitions.headTitle.results', {
-      phaseName: this.phase.name,
-      editionName: this.competitionEdition.name,
-      seasonName: this.season.name,
+      phaseName: (this as any).phase.name,
+      editionName: (this as any).competitionEdition.name,
+      seasonName: (this as any).season.name,
     }).toString();
     return {
       title,
@@ -111,6 +111,9 @@ export default Vue.extend({
       const firstMatch = faceoff.matches[0];
       return !!(firstMatch.home_team || firstMatch.away_team);
     },
+    getFaceoffWinnerName(faceoff: Faceoff): string {
+      return faceoff.winner ? faceoff[`${faceoff.winner}_team`]?.name || '' : '';
+    },
   },
 });
 </script>
diff --git a/pages/competitions/_competition/_season/_phase/standings.vue b/pages/competitions/_competition/_season/_phase/standings.vue
index 89196a32..2da612b9 100644
--- a/pages/competitions/_competition/_season/_phase/standings.vue
+++ b/pages/competitions/_competition/_season/_phase/standings.vue
@@ -16,9 +16,9 @@
           </tr>
         </thead>
         <tbody>
-          <tr v-for="standing of standings" :key="standing.team.id">
+          <tr v-for="(standing, index) of standings" :key="standing.team ? standing.team.id : `unknown-${index}`">
             <td class="c-standings__table-cell">{{ standing.position }}</td>
-            <td class="c-standings__table-cell">
+            <td v-if="standing.team" class="c-standings__table-cell">
               <div class="c-standings__team">
                 <img
                   v-if="standing.team.avatarMediumUrl"
@@ -30,7 +30,7 @@
               </div>
             </td>
             <td v-for="statKey of standingsStatKeys" :key="statKey" class="c-standings__table-cell">
-              {{ standing.stats.find((stat) => stat.type === statKey).value }}
+              {{ getStatValueForKey(standing, statKey) }}
             </td>
           </tr>
         </tbody>
@@ -40,15 +40,21 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import VueI18n from 'vue-i18n';
 import Season from '~/models/season.model';
 import Phase from '~/models/phase.model';
 import Team from '~/models/team.model';
 import CompetitionEdition from '~/models/competition-edition.model';
-import { LeveradeGroupType } from '~/plugins/leverade';
+import { LeveradeGroupType, LeveradeStandings, LeveradeTeam } from '~/plugins/leverade';
 
-export default Vue.extend({
+interface StandingRow<T> {
+  position: number;
+  team: T | undefined;
+  stats: LeveradeStandings['standingsrows'][0]['standingsstats'];
+}
+
+export default defineComponent({
   nuxtI18n: {
     paths: {
       fr: '/competitions/:competition/:season/:phase/classement',
@@ -71,7 +77,7 @@ export default Vue.extend({
   },
   data() {
     return {
-      rawStandings: [] as any[],
+      rawStandings: [] as StandingRow<LeveradeTeam>[],
       stats: [],
     };
   },
@@ -90,9 +96,9 @@ export default Vue.extend({
 
     const teamsResponse = await this.$leverade.getTeams(this.phase.competition_edition_id);
     const standingsResponse = await this.$leverade.getStandings(this.phase.id);
-    this.rawStandings = standingsResponse.data.meta.standingsrows.map((row: any) => ({
+    this.rawStandings = standingsResponse.data.meta.standingsrows.map((row) => ({
       position: row.position,
-      rawTeam: teamsResponse.data.data.find((team) => +team.id === row.id),
+      team: teamsResponse.data.data.find((team) => +team.id === row.id),
       stats: row.standingsstats,
     }));
   },
@@ -141,10 +147,10 @@ export default Vue.extend({
         'score',
       ];
     },
-    standings(): any[] {
+    standings(): StandingRow<Team>[] {
       return this.rawStandings.map((standingRow) => ({
         position: standingRow.position,
-        team: new Team(standingRow.rawTeam),
+        team: standingRow.team ? new Team(standingRow.team) : undefined,
         stats: standingRow.stats,
       }));
     },
@@ -154,6 +160,11 @@ export default Vue.extend({
     '$route.params.season': '$fetch',
     '$route.params.competition': '$fetch',
   },
+  methods: {
+    getStatValueForKey(standing: StandingRow<Team>, statKey: string): number {
+      return standing.stats.find((stat) => stat.type === statKey)?.value || 0;
+    },
+  },
 });
 </script>
 
diff --git a/pages/competitions/_competition/_season/match/_matchId.vue b/pages/competitions/_competition/_season/match/_matchId.vue
index 1c41345e..6de3ac23 100644
--- a/pages/competitions/_competition/_season/match/_matchId.vue
+++ b/pages/competitions/_competition/_season/match/_matchId.vue
@@ -1,10 +1,10 @@
 <template>
   <div v-if="match">
     <nuxt-link class="c-match__phase-round" :to="phaseRoundLink">
-      <span v-if="isPhaseNameVisible">
+      <span v-if="isPhaseNameVisible && phase">
         {{ phase.name }}
       </span>
-      <span v-if="isRoundNameVisible">
+      <span v-if="isRoundNameVisible && round">
         {{ round.name }}
       </span>
     </nuxt-link>
@@ -58,9 +58,9 @@
       </ul>
     </div>
     <div id="match-details" class="c-match__details">
-      <st-event-date v-if="match.parsedDate()" :start-date="match.parsedDate()" always-one-line />
-      <div v-if="match.parsedDate()">
-        <fa-icon icon="clock" class="c-match__icon" /> {{ $formatDate(match.parsedDate(), 'HH:mm') }}
+      <st-event-date v-if="match.parsedDate" :start-date="match.parsedDate" always-one-line />
+      <div v-if="match.parsedDate">
+        <fa-icon icon="clock" class="c-match__icon" /> {{ $formatDate(match.parsedDate, 'HH:mm') }}
       </div>
       <button v-if="match.facility" class="u-unstyled-button c-match__venue" @click="showVenueDetails">
         <fa-icon icon="location-dot" class="c-match__icon" /> {{ match.facility.name }},
@@ -78,13 +78,13 @@
           <strong>{{ match.facility.name }}</strong> <br />
           {{ match.facility.address }}<br />
           {{ match.facility.postal_code }} {{ match.facility.city }}<br />
-          <a :href="match.mapsUrl">{{ $t('venue.openInMaps') }}</a>
+          <a v-if="match.mapsUrl" :href="match.mapsUrl">{{ $t('venue.openInMaps') }}</a>
         </div>
       </div>
       <client-only>
         <iframe
           v-if="match.hasFacility"
-          :src="match.getSwisstopoMapUrl($i18n.locale)"
+          :src="match.getSwisstopoMapUrl($i18n.locale) || ''"
           frameborder="0"
           class="c-match__map"
         ></iframe>
@@ -98,7 +98,7 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import Match from '~/models/match.model';
 import StEventDate from '~/components/events/st-event-date.vue';
 import {
@@ -120,7 +120,7 @@ import CompetitionEdition from '~/models/competition-edition.model';
 import Phase from '~/models/phase.model';
 import { NationalCompetitionEdition } from '~/plugins/cms-service';
 
-export default Vue.extend({
+export default defineComponent({
   components: {
     StEventDate,
   },
diff --git a/pages/competitions/_competition/index.vue b/pages/competitions/_competition/index.vue
index f53ab4fc..eec5a5e9 100644
--- a/pages/competitions/_competition/index.vue
+++ b/pages/competitions/_competition/index.vue
@@ -1,8 +1,8 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import Competition from '~/models/competition.model';
 
-export default Vue.extend({
+export default defineComponent({
   nuxtI18n: {
     paths: {
       fr: '/competitions/:competition',
diff --git a/pages/contact.vue b/pages/contact.vue
index c94d560f..89a0725a 100644
--- a/pages/contact.vue
+++ b/pages/contact.vue
@@ -83,11 +83,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { MetaInfo } from 'vue-meta';
 import VueHcaptcha from '@hcaptcha/vue-hcaptcha';
 
-export default Vue.extend({
+export default defineComponent({
   components: {
     VueHcaptcha,
   },
diff --git a/pages/etc2022.vue b/pages/etc2022.vue
index baf19427..04f92ae9 100644
--- a/pages/etc2022.vue
+++ b/pages/etc2022.vue
@@ -13,11 +13,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { MetaInfo } from 'vue-meta';
 import { MenuItem } from '~/store/state';
 
-export default Vue.extend({
+export default defineComponent({
   data() {
     return {
       navigation: [
diff --git a/pages/event/_slug.vue b/pages/event/_slug.vue
index b0ba4499..564ce8ab 100644
--- a/pages/event/_slug.vue
+++ b/pages/event/_slug.vue
@@ -9,14 +9,14 @@
 
 <script lang="ts">
 import { decode } from 'html-entities';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { MetaInfo } from 'vue-meta';
 import stEvent from '~/components/events/st-event.vue';
 import { BreadcrumbItem } from '~/components/st-breadcrumb.vue';
 import { CalendarEvent } from '~/plugins/cms-service';
 import { getAssetURL } from '~/plugins/directus';
 
-export default Vue.extend({
+export default defineComponent({
   nuxtI18n: {
     paths: {
       fr: '/evenement/:slug',
diff --git a/pages/events/_slug.vue b/pages/events/_slug.vue
index 8e5cfca2..ae5f9f3d 100644
--- a/pages/events/_slug.vue
+++ b/pages/events/_slug.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import stEventList from '~/components/events/st-event-list.vue';
 import { BreadcrumbItem } from '~/components/st-breadcrumb.vue';
 import { CalendarEvent } from '~/plugins/cms-service';
 
-export default Vue.extend({
+export default defineComponent({
   components: { stEventList },
   nuxtI18n: {
     paths: {
diff --git a/pages/impressum.vue b/pages/impressum.vue
index 610de70e..869d8e15 100644
--- a/pages/impressum.vue
+++ b/pages/impressum.vue
@@ -3,10 +3,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import CatchAllPage from '~/pages/_.vue';
 
-export default Vue.extend({
+export default defineComponent({
   extends: CatchAllPage,
 });
 </script>
diff --git a/pages/index.vue b/pages/index.vue
index a6fa633a..de410b4f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -41,7 +41,7 @@
       <nav>
         <ul class="c-index__tchoukball-nav u-unstyled-list">
           <li v-for="item of tchoukballNavigation" :key="item.name" class="c-index__tchoukball-nav-item">
-            <nuxt-link :to="item.path[$i18n.locale]">{{ $t(`tchoukball.nav.${item.name}`) }}</nuxt-link>
+            <nuxt-link :to="item.path[currentLocale]">{{ $t(`tchoukball.nav.${item.name}`) }}</nuxt-link>
           </li>
         </ul>
       </nav>
@@ -65,7 +65,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { MetaInfo } from 'vue-meta';
 import { CarouselItem } from '~/components/st-home-carousel.vue';
 import { CalendarEvent } from '~/plugins/cms-service';
@@ -73,7 +73,7 @@ import stEventSmall from '~/components/events/st-event-small.vue';
 import stUpcomingMatches from '~/components/competitions/st-upcoming-matches.vue';
 import { FlickrPhotoset } from '~/plugins/flickr';
 
-export default Vue.extend({
+export default defineComponent({
   components: {
     stEventSmall,
     stUpcomingMatches,
@@ -177,6 +177,11 @@ export default Vue.extend({
       meta: [{ property: 'og:title', content: this.$t('title').toString() }],
     };
   },
+  computed: {
+    currentLocale() {
+      return this.$i18n.locale as 'fr' | 'de';
+    },
+  },
 });
 </script>
 
diff --git a/pages/juniors.vue b/pages/juniors.vue
index 5edac39f..0ccf10a7 100644
--- a/pages/juniors.vue
+++ b/pages/juniors.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { Store } from 'vuex';
 import CatchAllPage from '~/pages/_.vue';
 import { RootState } from '~/store/state';
 
-export default Vue.extend({
+export default defineComponent({
   extends: CatchAllPage,
   nuxtI18n: {
     paths: {
diff --git a/pages/medias.vue b/pages/medias.vue
index a04bcabe..0ce0079d 100644
--- a/pages/medias.vue
+++ b/pages/medias.vue
@@ -3,10 +3,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import CatchAllPage from '~/pages/_.vue';
 
-export default Vue.extend({
+export default defineComponent({
   extends: CatchAllPage,
   nuxtI18n: {
     paths: {
diff --git a/pages/national-teams/_team.vue b/pages/national-teams/_team.vue
index 97b034f0..58999fe8 100644
--- a/pages/national-teams/_team.vue
+++ b/pages/national-teams/_team.vue
@@ -2,7 +2,7 @@
   <section class="l-main-content-section">
     <st-loader v-if="$fetchState.pending" :main="true" />
     <p v-else-if="$fetchState.error">{{ $t('error.otherError') }} : {{ $fetchState.error.message }}</p>
-    <template v-else>
+    <template v-else-if="team">
       <h2 class="t-headline-1">{{ team.name }}</h2>
       <img
         v-if="team.team_photo"
@@ -25,13 +25,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { MetaInfo } from 'vue-meta';
 import { NationalTeam } from '~/components/national-teams/st-national-teams.prop';
 import { getAssetSrcSet, getAssetURL } from '~/plugins/directus';
 import { MenuItem } from '~/store/state';
 
-export default Vue.extend({
+export default defineComponent({
   nuxtI18n: {
     paths: {
       fr: '/equipes-nationales/:team',
diff --git a/pages/national-teams/_team/index.vue b/pages/national-teams/_team/index.vue
index b25af838..78947920 100644
--- a/pages/national-teams/_team/index.vue
+++ b/pages/national-teams/_team/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
+import { defineComponent } from 'vue';
+export default defineComponent({
   asyncData({ app, route, redirect }) {
     // Setting default tab for a team to be the players list
     redirect(app.localePath({ name: 'national-teams-team-players', params: { team: route.params.team } }));
diff --git a/pages/national-teams/_team/players.vue b/pages/national-teams/_team/players.vue
index 6b69f9fb..a9aed4b6 100644
--- a/pages/national-teams/_team/players.vue
+++ b/pages/national-teams/_team/players.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { NationalTeam } from '~/components/national-teams/st-national-teams.prop';
 import StPlayer from '~/components/national-teams/st-player.vue';
 
-export default Vue.extend({
+export default defineComponent({
   components: { StPlayer },
   nuxtI18n: {
     paths: {
@@ -38,8 +38,8 @@ export default Vue.extend({
     }
   },
   head() {
-    const title = this.$t(`nationalTeams.headTitle.players.${this.team.gender}`, {
-      teamName: this.team.name.toLowerCase(),
+    const title = this.$t(`nationalTeams.headTitle.players.${(this as any).team.gender}`, {
+      teamName: (this as any).team.name.toLowerCase(),
     }).toString();
     return {
       title,
@@ -48,7 +48,7 @@ export default Vue.extend({
         {
           hid: 'og:description',
           property: 'og:description',
-          content: this.$t(`nationalTeams.description.players.${this.team.gender}`).toString(),
+          content: this.$t(`nationalTeams.description.players.${(this as any).team.gender}`).toString(),
         },
       ],
     };
diff --git a/pages/national-teams/_team/results.vue b/pages/national-teams/_team/results.vue
index d426dd25..b6632cae 100644
--- a/pages/national-teams/_team/results.vue
+++ b/pages/national-teams/_team/results.vue
@@ -15,7 +15,12 @@
             v-if="result.competition.logo"
             :src="logoSrc(result.competition.logo)"
             :srcset="logoSrcSet(result.competition.logo)"
-            :alt="$t('nationalTeams.results.logoOf', { name: result.competition.name, year: result.competition.year })"
+            :alt="
+              $t('nationalTeams.results.logoOf', {
+                name: result.competition.name,
+                year: result.competition.year,
+              }).toString()
+            "
             class="c-results__competition-logo"
           />
           <h4 class="t-headline-3 c-results__competition-name">
@@ -34,7 +39,7 @@
       <h3 class="u-visually-hidden">{{ $t('nationalTeams.results.nationsCup') }}</h3>
       <img
         :src="`/images/logo-nations-cup.svg`"
-        :alt="$t('footer.logoFrom', { orgName: $t('nationalTeams.results.nationsCup') })"
+        :alt="$t('footer.logoFrom', { orgName: $t('nationalTeams.results.nationsCup') }).toString()"
         class="c-results__nations-cup-logo"
       />
       <ul class="u-unstyled-list">
@@ -51,11 +56,11 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { NationalTeam } from '~/components/national-teams/st-national-teams.prop';
 import { getAssetURL } from '~/plugins/directus';
 
-export default Vue.extend({
+export default defineComponent({
   nuxtI18n: {
     paths: {
       fr: '/equipes-nationales/:team/resultats',
@@ -69,7 +74,9 @@ export default Vue.extend({
     },
   },
   head() {
-    const title = this.$t(`nationalTeams.headTitle.results`, { teamName: this.team.name.toLowerCase() }).toString();
+    const title = this.$t(`nationalTeams.headTitle.results`, {
+      teamName: (this as any).team.name.toLowerCase(),
+    }).toString();
     return {
       title,
       meta: [
diff --git a/pages/national-teams/_team/staff.vue b/pages/national-teams/_team/staff.vue
index 9da61c82..e6288293 100644
--- a/pages/national-teams/_team/staff.vue
+++ b/pages/national-teams/_team/staff.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { NationalTeam } from '~/components/national-teams/st-national-teams.prop';
 import stRole from '~/components/people/st-role.vue';
 
-export default Vue.extend({
+export default defineComponent({
   components: { stRole },
   nuxtI18n: {
     paths: {
@@ -29,7 +29,9 @@ export default Vue.extend({
     },
   },
   head() {
-    const title = this.$t(`nationalTeams.headTitle.staff`, { teamName: this.team.name.toLowerCase() }).toString();
+    const title = this.$t(`nationalTeams.headTitle.staff`, {
+      teamName: (this as any).team.name.toLowerCase(),
+    }).toString();
     return {
       title,
       meta: [
diff --git a/pages/national-teams/competitions/_competition.vue b/pages/national-teams/competitions/_competition.vue
index e12d869b..4840ed84 100644
--- a/pages/national-teams/competitions/_competition.vue
+++ b/pages/national-teams/competitions/_competition.vue
@@ -21,13 +21,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { MetaInfo } from 'vue-meta';
 import { NationalTeamCompetition } from '~/components/national-teams/st-national-teams.prop';
 import { getAssetURL } from '~/plugins/directus';
 import { MenuItem } from '~/store/state';
 
-export default Vue.extend({
+export default defineComponent({
   data() {
     return {
       competition: undefined as NationalTeamCompetition | undefined,
diff --git a/pages/national-teams/competitions/_competition/about.vue b/pages/national-teams/competitions/_competition/about.vue
index 6d8a6a7d..4fe894e2 100644
--- a/pages/national-teams/competitions/_competition/about.vue
+++ b/pages/national-teams/competitions/_competition/about.vue
@@ -5,10 +5,10 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { NationalTeamCompetition } from '~/components/national-teams/st-national-teams.prop';
 
-export default Vue.extend({
+export default defineComponent({
   nuxtI18n: {
     paths: {
       fr: '/equipes-nationales/competitions/:competition/a-propos',
diff --git a/pages/national-teams/competitions/_competition/index.vue b/pages/national-teams/competitions/_competition/index.vue
index fd53dded..bbe03fd5 100644
--- a/pages/national-teams/competitions/_competition/index.vue
+++ b/pages/national-teams/competitions/_competition/index.vue
@@ -3,10 +3,10 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { MenuItem } from '~/store/state';
 
-export default Vue.extend({
+export default defineComponent({
   nuxtI18n: {
     paths: {
       fr: '/equipes-nationales/competitions/:competition',
diff --git a/pages/national-teams/competitions/_competition/live.vue b/pages/national-teams/competitions/_competition/live.vue
index 882e4926..2c94537d 100644
--- a/pages/national-teams/competitions/_competition/live.vue
+++ b/pages/national-teams/competitions/_competition/live.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { isWithinInterval } from 'date-fns';
 import stNationalTeamCompetitionUpdateList from '~/components/national-teams/st-national-team-competition-update-list.vue';
 import { NationalTeamCompetition } from '~/components/national-teams/st-national-teams.prop';
 
-export default Vue.extend({
+export default defineComponent({
   nuxtI18n: {
     paths: {
       fr: '/equipes-nationales/competitions/:competition/live',
diff --git a/pages/national-teams/competitions/_competition/medias.vue b/pages/national-teams/competitions/_competition/medias.vue
index ec3ceed8..c64fd344 100644
--- a/pages/national-teams/competitions/_competition/medias.vue
+++ b/pages/national-teams/competitions/_competition/medias.vue
@@ -8,10 +8,10 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { NationalTeamCompetition } from '~/components/national-teams/st-national-teams.prop';
 
-export default Vue.extend({
+export default defineComponent({
   nuxtI18n: {
     paths: {
       fr: '/equipes-nationales/competitions/:competition/medias',
diff --git a/pages/national-teams/competitions/_competition/schedule.vue b/pages/national-teams/competitions/_competition/schedule.vue
index 619c6dd4..2f7ca9fe 100644
--- a/pages/national-teams/competitions/_competition/schedule.vue
+++ b/pages/national-teams/competitions/_competition/schedule.vue
@@ -5,10 +5,10 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { NationalTeamCompetition } from '~/components/national-teams/st-national-teams.prop';
 
-export default Vue.extend({
+export default defineComponent({
   nuxtI18n: {
     paths: {
       fr: '/equipes-nationales/competitions/:competition/programme',
diff --git a/pages/national-teams/competitions/_competition/teams.vue b/pages/national-teams/competitions/_competition/teams.vue
index 360f8342..e0df2d3a 100644
--- a/pages/national-teams/competitions/_competition/teams.vue
+++ b/pages/national-teams/competitions/_competition/teams.vue
@@ -2,19 +2,19 @@
   <div>
     <st-loader v-if="$fetchState.pending" :main="true" />
     <p v-else-if="$fetchState.error">{{ $t('error.otherError') }} : {{ $fetchState.error.message }}</p>
-    <st-national-team-competition-team-list v-else :teams="teams" />
+    <st-national-team-competition-team-list v-else-if="teams" :teams="teams" />
   </div>
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import {
   NationalTeamCompetition,
   NationalTeamForCompetition,
 } from '~/components/national-teams/st-national-teams.prop';
 import StNationalTeamCompetitionTeamList from '~/components/national-teams/st-national-team-competition-team-list.vue';
 
-export default Vue.extend({
+export default defineComponent({
   components: { StNationalTeamCompetitionTeamList },
   nuxtI18n: {
     paths: {
diff --git a/pages/news/_slug.vue b/pages/news/_slug.vue
index 4918b2ff..0ed201d4 100644
--- a/pages/news/_slug.vue
+++ b/pages/news/_slug.vue
@@ -2,19 +2,19 @@
   <section class="l-main-content-section">
     <st-loader v-if="$fetchState.pending" :main="true" />
     <p v-else-if="$fetchState.error">{{ $t('error.otherError') }} : {{ $fetchState.error.message }}</p>
-    <st-news v-else :news-entry="newsEntry" />
+    <st-news v-else-if="newsEntry" :news-entry="newsEntry" />
   </section>
 </template>
 
 <script lang="ts">
 import { decode } from 'html-entities';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { MetaInfo } from 'vue-meta';
 import { NewsEntry } from '~/components/news/st-news';
 import stNews from '~/components/news/st-news.vue';
 import { getAssetURL } from '~/plugins/directus';
 
-export default Vue.extend({
+export default defineComponent({
   components: { stNews },
   data() {
     return {
diff --git a/pages/news/index.vue b/pages/news/index.vue
index efa88d41..1dfa3393 100644
--- a/pages/news/index.vue
+++ b/pages/news/index.vue
@@ -20,14 +20,14 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { MetaInfo } from 'vue-meta';
 import stLoader from '~/components/st-loader.vue';
 import stNewsList from '~/components/news/st-news-list.vue';
 import { NewsEntry } from '~/components/news/st-news';
 import StPagination from '~/components/st-pagination.vue';
 
-export default Vue.extend({
+export default defineComponent({
   components: { stLoader, stNewsList, StPagination },
   data() {
     return {
diff --git a/pages/newsletter/confirm.vue b/pages/newsletter/confirm.vue
index 37ee278a..49aa114f 100644
--- a/pages/newsletter/confirm.vue
+++ b/pages/newsletter/confirm.vue
@@ -7,10 +7,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import newsletterMixin from '~/mixins/newsletter.mixin';
 
-export default Vue.extend({
+export default defineComponent({
   mixins: [newsletterMixin],
   head() {
     return {
diff --git a/pages/newsletter/valid.vue b/pages/newsletter/valid.vue
index 29d0ded4..587afb37 100644
--- a/pages/newsletter/valid.vue
+++ b/pages/newsletter/valid.vue
@@ -7,10 +7,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import newsletterMixin from '~/mixins/newsletter.mixin';
 
-export default Vue.extend({
+export default defineComponent({
   mixins: [newsletterMixin],
   head() {
     return {
diff --git a/pages/press-releases/_slug.vue b/pages/press-releases/_slug.vue
index c68f66eb..abaf1469 100644
--- a/pages/press-releases/_slug.vue
+++ b/pages/press-releases/_slug.vue
@@ -2,7 +2,7 @@
   <section class="l-main-content-section">
     <st-loader v-if="$fetchState.pending" :main="true" />
     <p v-else-if="$fetchState.error">{{ $t('error.otherError') }} : {{ $fetchState.error.message }}</p>
-    <article v-else class="c-press-release">
+    <article v-else-if="pressRelease" class="c-press-release">
       <st-breadcrumb :items="breadcrumb" />
       <div v-if="isDraft" class="c-press-release__draft-label">{{ $t('pressReleases.draft') }}</div>
       <div v-if="pressRelease.context" class="c-press-release__context">{{ pressRelease.context }}</div>
@@ -18,7 +18,7 @@
 
 <script lang="ts">
 import { decode } from 'html-entities';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { MetaInfo } from 'vue-meta';
 import { PressRelease } from '~/components/press-releases/press-releases';
 import { BreadcrumbItem } from '~/components/st-breadcrumb.vue';
@@ -27,7 +27,7 @@ import { RoleWithPartialGroupAndHolders } from '~/plugins/cms-service';
 
 const MEDIA_COORDINATOR_ROLE = 62;
 
-export default Vue.extend({
+export default defineComponent({
   components: { stRole },
   nuxtI18n: {
     paths: {
diff --git a/pages/press-releases/index.vue b/pages/press-releases/index.vue
index 3c9a4abd..8d0d64fd 100644
--- a/pages/press-releases/index.vue
+++ b/pages/press-releases/index.vue
@@ -42,11 +42,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { MenuItem } from '~/store/state';
 import { PressRelease } from '~/components/press-releases/press-releases';
 
-export default Vue.extend({
+export default defineComponent({
   nuxtI18n: {
     paths: {
       fr: '/communiques-de-presse',
diff --git a/pages/referees.vue b/pages/referees.vue
index 7194cd0f..46086708 100644
--- a/pages/referees.vue
+++ b/pages/referees.vue
@@ -33,9 +33,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   nuxtI18n: {
     paths: {
       fr: '/arbitres',
diff --git a/pages/regional-associations.vue b/pages/regional-associations.vue
index 2d53b57d..85ead204 100644
--- a/pages/regional-associations.vue
+++ b/pages/regional-associations.vue
@@ -10,11 +10,11 @@
 
 <script lang="ts">
 import { PartialItem } from '@directus/sdk';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import stClubList from '~/components/st-club-list.vue';
 import { DirectusClub } from '~/plugins/directus';
 
-export default Vue.extend({
+export default defineComponent({
   components: { stClubList },
   data() {
     return {
diff --git a/pages/resources.vue b/pages/resources.vue
index f44efd47..f99351e2 100644
--- a/pages/resources.vue
+++ b/pages/resources.vue
@@ -52,13 +52,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import stResourceList from '~/components/resources/st-resource-list.vue';
 import { Domain, Resource, ResourceType } from '~/plugins/cms-service';
 
 const ALL_OPTION = 'all';
 
-export default Vue.extend({
+export default defineComponent({
   components: { stResourceList },
   nuxtI18n: {
     paths: {
diff --git a/pages/seasons/_season.vue b/pages/seasons/_season.vue
index 56105b83..49b6d14b 100644
--- a/pages/seasons/_season.vue
+++ b/pages/seasons/_season.vue
@@ -3,7 +3,7 @@
     <st-breadcrumb :items="breadcrumb" class="c-season__breadcrumb" />
     <st-loader v-if="$fetchState.pending" :main="true" />
     <p v-else-if="$fetchState.error">{{ $t('error.otherError') }} : {{ $fetchState.error.message }}</p>
-    <template v-else>
+    <template v-else-if="season">
       <h2 class="t-headline-1">{{ $tc('season.name', 1) }} {{ season.name }}</h2>
       <h3 class="t-headline-2">{{ $t('competitions.title') }}</h3>
       <st-link-list
@@ -16,14 +16,14 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import CompetitionEdition from '~/models/competition-edition.model';
 import Season from '~/models/season.model';
 import { BreadcrumbItem } from '~/components/st-breadcrumb.vue';
 import { MenuItem } from '~/store/state';
 import { NationalCompetitionEdition } from '~/plugins/cms-service';
 
-export default Vue.extend({
+export default defineComponent({
   nuxtI18n: {
     paths: {
       fr: '/saisons/:season',
diff --git a/pages/seasons/index.vue b/pages/seasons/index.vue
index fa508c92..8674c38c 100644
--- a/pages/seasons/index.vue
+++ b/pages/seasons/index.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import Season from '~/models/season.model';
 import { DirectusSeason } from '~/plugins/directus';
 import { MenuItem } from '~/store/state';
 
-export default Vue.extend({
+export default defineComponent({
   nuxtI18n: {
     paths: {
       fr: '/saisons',
diff --git a/pages/structure/_group.vue b/pages/structure/_group.vue
index 228c3aa7..c9a01daf 100644
--- a/pages/structure/_group.vue
+++ b/pages/structure/_group.vue
@@ -19,12 +19,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import stStaffPerson from '~/components/people/st-staff-person.vue';
 import { BreadcrumbItem } from '~/components/st-breadcrumb.vue';
 import { Group, Person } from '~/plugins/cms-service';
 
-export default Vue.extend({
+export default defineComponent({
   nuxtI18n: {
     paths: {
       fr: '/structure/:group',
diff --git a/pages/structure/index.vue b/pages/structure/index.vue
index 04fc4843..ab77e6ff 100644
--- a/pages/structure/index.vue
+++ b/pages/structure/index.vue
@@ -14,11 +14,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { Group } from '~/plugins/cms-service';
 import { MenuItem } from '~/store/state';
 
-export default Vue.extend({
+export default defineComponent({
   nuxtI18n: {
     paths: {
       fr: '/structure',
diff --git a/pages/tchoukup.vue b/pages/tchoukup.vue
index b79ba0ef..08de72f6 100644
--- a/pages/tchoukup.vue
+++ b/pages/tchoukup.vue
@@ -15,13 +15,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { MetaInfo } from 'vue-meta';
 import CatchAllPage from '~/pages/_.vue';
 import stTchoukupList from '~/components/tchoukup/st-tchoukup-list.vue';
 import { Tchoukup } from '~/components/tchoukup/st-tchoukup';
 
-export default Vue.extend({
+export default defineComponent({
   components: {
     stTchoukupList,
   },
diff --git a/plugins/cms-service.ts b/plugins/cms-service.ts
index 8b40923d..fcf7a3a2 100644
--- a/plugins/cms-service.ts
+++ b/plugins/cms-service.ts
@@ -25,7 +25,7 @@ import {
   NationalTeamForCompetition,
   NationalTeamResult,
 } from '~/components/national-teams/st-national-teams.prop';
-import { processRawPlayers } from '~/plugins/cms-service/national-teams';
+import { processRawCoaches, processRawPlayers } from '~/plugins/cms-service/national-teams';
 import { PressRelease } from '~/components/press-releases/press-releases';
 import { toISOLocal } from '~/utils/utils';
 
@@ -119,6 +119,8 @@ export interface CalendarEvent {
   name: string;
   date_start: Date;
   date_end: Date;
+  time_start: string;
+  time_end: string;
   isFullDay: boolean;
   showEndTime: boolean;
   status: string;
@@ -1743,8 +1745,8 @@ const cmsService: Plugin = (context, inject) => {
           name: teamTranslations.name,
           slug: teamTranslations.slug,
         },
-        players: processRawPlayers(rawTeam.players?.map((player) => player?.national_team_players_id)) as any[],
-        coaches: rawTeam.coaches?.map((coach) => coach?.people_id) as any[],
+        players: processRawPlayers(rawTeam.players?.map((player) => player?.national_team_players_id)),
+        coaches: processRawCoaches(rawTeam.coaches?.map((coach) => coach?.people_id)),
       };
     });
   };
diff --git a/plugins/cms-service/national-teams.ts b/plugins/cms-service/national-teams.ts
index 16a99c4e..f7ff81d1 100644
--- a/plugins/cms-service/national-teams.ts
+++ b/plugins/cms-service/national-teams.ts
@@ -1,25 +1,38 @@
 import { PartialItem } from '@directus/sdk';
-import { DirectusPlayer } from '../directus';
+import { DirectusPerson, DirectusPlayer } from '../directus';
+import { Gender } from '../cms-service';
+import { Player } from '~/components/national-teams/st-national-teams.prop';
 
-export const processRawPlayers = (rawPlayers: (PartialItem<DirectusPlayer> | undefined)[] | undefined) => {
+export const processRawPlayers = (rawPlayers: (PartialItem<DirectusPlayer> | undefined)[] | undefined): Player[] => {
   if (!rawPlayers) {
     return [];
   }
 
-  const players = rawPlayers.map((player) => {
-    if (player?.positions) {
-      return {
-        ...player,
-        positions: player.positions.map((position) => {
-          if (position) {
-            return position.player_positions_id;
-          }
-          return position;
-        }),
-      };
+  const players: Player[] = rawPlayers.reduce((playersAcc, player) => {
+    if (!player?.id || !player.positions || !player.first_name || !player.last_name) {
+      return playersAcc;
     }
-    return player;
-  });
+
+    return [
+      ...playersAcc,
+      {
+        ...player,
+        id: player.id,
+        first_name: player.first_name,
+        last_name: player.last_name,
+        is_captain: !!player.is_captain,
+        gender: player.gender as Gender,
+        club: player.club?.name ? { name: player.club.name } : undefined,
+        positions:
+          player.positions.reduce((positions, position) => {
+            if (position?.player_positions_id) {
+              return [...positions, position.player_positions_id];
+            }
+            return positions;
+          }, [] as number[]) || [],
+      },
+    ];
+  }, [] as Player[]);
 
   // We sort the players because the API can't do it yet (only at the root)
   // Captain first, then alphabetically by last name, and then first name.
@@ -31,3 +44,18 @@ export const processRawPlayers = (rawPlayers: (PartialItem<DirectusPlayer> | und
     );
   });
 };
+
+export const processRawCoaches = (
+  rawCoaches: (PartialItem<DirectusPerson> | undefined)[] | undefined
+): PartialItem<DirectusPerson>[] => {
+  if (!rawCoaches) {
+    return [];
+  }
+
+  return rawCoaches.reduce((coaches, coach) => {
+    if (!coach) {
+      return coaches;
+    }
+    return [...coaches, coach];
+  }, [] as PartialItem<DirectusPerson>[]);
+};
diff --git a/plugins/directus.ts b/plugins/directus.ts
index 9272fd95..6184f83d 100644
--- a/plugins/directus.ts
+++ b/plugins/directus.ts
@@ -22,12 +22,14 @@ export interface DirectusRole {
   holders: DirectusRolePerson[];
 }
 
+export type DirectusGender = 'male' | 'female' | 'other';
+
 export interface DirectusPerson {
   id: number;
   first_name: string;
   last_name: string;
   portrait_square_head: string;
-  gender: string;
+  gender: DirectusGender;
   email: string;
   // eslint-disable-next-line no-use-before-define
   roles: DirectusRolePerson[];
@@ -205,7 +207,7 @@ export interface DirectusPlayer {
   number: number;
   is_captain: boolean;
   birth_year: number;
-  gender: string;
+  gender: DirectusGender;
   club: {
     name: string;
   };
@@ -253,7 +255,7 @@ export interface DirectusTeamResult {
 
 export interface DirectusTeam {
   id: number;
-  gender: string;
+  gender: DirectusGender;
   translations: {
     name: string;
     slug: string;
diff --git a/plugins/leverade.ts b/plugins/leverade.ts
index edb79027..dc55c886 100644
--- a/plugins/leverade.ts
+++ b/plugins/leverade.ts
@@ -1,11 +1,11 @@
 import { Plugin } from '@nuxt/types';
 import { AxiosResponse, AxiosRequestConfig } from 'axios';
-import { Await } from '~/types/types.utils';
 
-export interface LeveradeResponse<T, E = {}> {
+export interface LeveradeResponse<T, E = {}, M = unknown> {
   data: {
     data: T;
     included?: E[];
+    meta: M;
   };
 }
 
@@ -251,6 +251,18 @@ export interface LeveradeLicense extends LeveradeEntity {
   };
 }
 
+export interface LeveradeStandings {
+  standingsrows: {
+    id: number;
+    name: string;
+    position: number;
+    standingsstats: {
+      type: string;
+      value: number;
+    }[];
+  }[];
+}
+
 export interface LeveradeProfile extends LeveradeEntity {
   type: 'profile';
   attributes: {
@@ -269,7 +281,7 @@ export interface Leverade {
       LeveradeGroup | LeveradeMatch | LeveradeFaceoff | LeveradeRound | LeveradeTeam | LeveradeFacility | LeveradeResult
     >
   >;
-  getStandings: (groupId: number | string) => Promise<any>;
+  getStandings: (groupId: number | string) => Promise<LeveradeResponse<unknown, unknown, LeveradeStandings>>;
   getUpcomingMatches: (
     seasonLeveradeId: string
   ) => Promise<
@@ -335,7 +347,7 @@ const leveradePlugin: Plugin = ({ $config, $axios, $formatDate }, inject) => {
   };
 
   const getStandings: Leverade['getStandings'] = (groupId) => {
-    return getCachedQuery<Await<ReturnType<Leverade['getStandings']>>>(`/groups/${groupId}/standings`);
+    return getCachedQuery(`/groups/${groupId}/standings`);
   };
 
   const getUpcomingMatches: Leverade['getUpcomingMatches'] = (seasonLeveradeId) => {
diff --git a/tsconfig.json b/tsconfig.json
index 361d1024..48abb532 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -17,5 +17,9 @@
     },
     "types": ["@nuxt/types", "@nuxtjs/i18n", "@nuxtjs/axios", "@types/node", "@nuxtclub/slugify"]
   },
+  "vueCompilerOptions": {
+    "target": 2.7
+    // "target": 2, // For Vue version <= 2.6.14
+  },
   "exclude": ["node_modules", ".nuxt", "dist"]
 }
diff --git a/utils/utils.ts b/utils/utils.ts
index 98a947d9..ba84d08f 100644
--- a/utils/utils.ts
+++ b/utils/utils.ts
@@ -34,10 +34,10 @@ export const humanFileSize = (bytes: number, dp = 1, locale = 'en') => {
  *
  * This makes sure the timezone information is properly added to the Date.
  */
-export const parseLeveradeDate = (leveradeDate: string): Date | null => {
+export const parseLeveradeDate = (leveradeDate: string): Date | undefined => {
   // We manually and explicitely set that the provided date is UTC (Z)
   const parsedDate = parse(`${leveradeDate} Z`, 'yyyy-MM-dd HH:mm:ss X', new Date());
-  return parsedDate || null;
+  return parsedDate || undefined;
 };
 
 export const toISOLocal = (d: Date) => {