diff --git a/frontend/src/views/tasks/ShowTasks.vue b/frontend/src/components/tasks/ShowTasks.vue
similarity index 100%
rename from frontend/src/views/tasks/ShowTasks.vue
rename to frontend/src/components/tasks/ShowTasks.vue
diff --git a/frontend/src/pages/(home).vue b/frontend/src/pages/(home).vue
index 7240a6544..8152cdff5 100644
--- a/frontend/src/pages/(home).vue
+++ b/frontend/src/pages/(home).vue
@@ -58,7 +58,7 @@
 import {ref, computed} from 'vue'
 
 import Message from '@/components/misc/Message.vue'
-import ShowTasks from '@/views/tasks/ShowTasks.vue'
+import ShowTasks from '@/components/tasks/ShowTasks.vue'
 import ProjectCardGrid from '@/components/project/partials/ProjectCardGrid.vue'
 import AddTask from '@/components/tasks/AddTask.vue'
 
diff --git a/frontend/src/pages/tasks/by/upcoming.vue b/frontend/src/pages/tasks/by/upcoming.vue
new file mode 100644
index 000000000..c0559021f
--- /dev/null
+++ b/frontend/src/pages/tasks/by/upcoming.vue
@@ -0,0 +1,27 @@
+<template>
+	<ShowTasks v-bind="props" />
+</template>
+
+<script setup lang="ts">
+import {parseDateOrString} from '@/helpers/time/parseDateOrString'
+import {getNextWeekDate} from '@/helpers/time/getNextWeekDate'
+
+import ShowTasks from '@/components/tasks/ShowTasks.vue';
+
+definePage({
+	name: 'tasks.range',
+	props: route => ({
+		dateFrom: parseDateOrString(route.query.from as string, new Date()),
+		dateTo: parseDateOrString(route.query.to as string, getNextWeekDate()),
+		showNulls: route.query.showNulls === 'true',
+		showOverdue: route.query.showOverdue === 'true',
+	})
+})
+
+const props = defineProps<{
+	dateFrom?: Date | string,
+	dateTo?: Date | string,
+	showNulls?: boolean,
+	showOverdue?: boolean,
+}>()
+</script>
\ No newline at end of file
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 9d4d6bb7e..a1fdd5fd1 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -29,17 +29,6 @@ const router = createRouter({
 	},
 	routes: [
 		...routes,
-		{
-			path: '/tasks/by/upcoming',
-			name: 'tasks.range',
-			component: () => import('@/views/tasks/ShowTasks.vue'),
-			props: route => ({
-				dateFrom: parseDateOrString(route.query.from as string, new Date()),
-				dateTo: parseDateOrString(route.query.to as string, getNextWeekDate()),
-				showNulls: route.query.showNulls === 'true',
-				showOverdue: route.query.showOverdue === 'true',
-			}),
-		},
 		{
 			// Redirect old list routes to the respective project routes
 			// see: https://router.vuejs.org/guide/essentials/dynamic-matching.html#catch-all-404-not-found-route
diff --git a/frontend/typed-router.d.ts b/frontend/typed-router.d.ts
index 766de252c..72c1937bc 100644
--- a/frontend/typed-router.d.ts
+++ b/frontend/typed-router.d.ts
@@ -46,6 +46,7 @@ declare module 'vue-router/auto-routes' {
     '/projects/(projects)': RouteRecordInfo<'/projects/(projects)', '/projects/(projects)', Record<never, never>, Record<never, never>>,
     '/share/[share]/auth': RouteRecordInfo<'/share/[share]/auth', '/share/:share/auth', { share: ParamValue<true> }, { share: ParamValue<false> }>,
     '/task/[id]': RouteRecordInfo<'/task/[id]', '/task/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
+    'tasks.range': RouteRecordInfo<'tasks.range', '/tasks/by/upcoming', Record<never, never>, Record<never, never>>,
     '/teams/[id]/edit': RouteRecordInfo<'/teams/[id]/edit', '/teams/:id/edit', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/teams/(teams)': RouteRecordInfo<'/teams/(teams)', '/teams/(teams)', Record<never, never>, Record<never, never>>,
     '/teams/new': RouteRecordInfo<'/teams/new', '/teams/new', Record<never, never>, Record<never, never>>,