feat: eslint enforce vue/component-name-in-template-casing

frontend/.eslintrc.cjs

@@ -23,7 +23,9 @@ module.exports = {
 
 		// uncategorized rules:
 		'vue/component-api-style': ['error', ['script-setup']],
-		'vue/component-name-in-template-casing': ['warn', 'PascalCase'],
+		'vue/component-name-in-template-casing': ['error', 'PascalCase', {
+			'globals': ['RouterView', 'RouterLink'],
+		}],
 		'vue/custom-event-name-casing': ['error', 'camelCase'],
 		'vue/define-macros-order': 'error',
 		'vue/match-component-file-name': ['error', {

frontend/src/App.vue

@@ -6,7 +6,7 @@
 		</template>
 		<ContentLinkShare v-else-if="authLinkShare" />
 		<NoAuthWrapper v-else>
-			<router-view />
+			<RouterView />
 		</NoAuthWrapper>
 		
 		<KeyboardShortcuts v-if="keyboardShortcutsActive" />

frontend/src/components/base/BaseButton.vue

@@ -12,14 +12,14 @@
 	>
 		<slot />
 	</div>
-	<router-link
+	<RouterLink
 		v-else-if="to !== undefined"
 		ref="button"
 		:to="to"
 		class="base-button"
 	>
 		<slot />
-	</router-link>
+	</RouterLink>
 	<a
 		v-else-if="href !== undefined"
 		ref="button"

frontend/src/components/home/ContentAuth.vue

@@ -33,14 +33,14 @@
 
 				<QuickActions />
 
-				<router-view
+				<RouterView
 					v-slot="{ Component }"
 					:route="routeWithModal"
 				>
 					<keep-alive :include="['project.view']">
 						<component :is="Component" />
 					</keep-alive>
-				</router-view>
+				</RouterView>
 
 				<modal
 					:enabled="typeof currentModal !== 'undefined'"

frontend/src/components/home/ContentLinkShare.vue

@@ -20,7 +20,7 @@
 				{{ currentProject?.title === '' ? $t('misc.loading') : currentProject?.title }}
 			</h1>
 			<div class="box has-text-left view">
-				<router-view />
+				<RouterView />
 				<PoweredByLink />
 			</div>
 		</div>

frontend/src/components/home/Navigation.vue

@@ -4,7 +4,7 @@
 		class="menu-container"
 	>
 		<nav class="menu top-menu">
-			<router-link
+			<RouterLink
 				:to="{name: 'home'}"
 				class="logo"
 			>
@@ -12,10 +12,10 @@
 					width="164"
 					height="48"
 				/>
-			</router-link>
+			</RouterLink>
 			<menu class="menu-list other-menu-items">
 				<li>
-					<router-link
+					<RouterLink
 						v-shortcut="'g o'"
 						:to="{ name: 'home'}"
 					>
@@ -23,10 +23,10 @@
 							<icon icon="calendar" />
 						</span>
 						{{ $t('navigation.overview') }}
-					</router-link>
+					</RouterLink>
 				</li>
 				<li>
-					<router-link
+					<RouterLink
 						v-shortcut="'g u'"
 						:to="{ name: 'tasks.range'}"
 					>
@@ -34,10 +34,10 @@
 							<icon :icon="['far', 'calendar-alt']" />
 						</span>
 						{{ $t('navigation.upcoming') }}
-					</router-link>
+					</RouterLink>
 				</li>
 				<li>
-					<router-link
+					<RouterLink
 						v-shortcut="'g p'"
 						:to="{ name: 'projects.index'}"
 					>
@@ -45,10 +45,10 @@
 							<icon icon="layer-group" />
 						</span>
 						{{ $t('project.projects') }}
-					</router-link>
+					</RouterLink>
 				</li>
 				<li>
-					<router-link
+					<RouterLink
 						v-shortcut="'g a'"
 						:to="{ name: 'labels.index'}"
 					>
@@ -56,10 +56,10 @@
 							<icon icon="tags" />
 						</span>
 						{{ $t('label.title') }}
-					</router-link>
+					</RouterLink>
 				</li>
 				<li>
-					<router-link
+					<RouterLink
 						v-shortcut="'g m'"
 						:to="{ name: 'teams.index'}"
 					>
@@ -67,7 +67,7 @@
 							<icon icon="users" />
 						</span>
 						{{ $t('team.title') }}
-					</router-link>
+					</RouterLink>
 				</li>
 			</menu>
 		</nav>

frontend/src/components/home/TheNavigation.vue

@@ -4,7 +4,7 @@
 		aria-label="main navigation"
 		class="navbar d-print-none"
 	>
-		<router-link
+		<RouterLink
 			:to="{ name: 'home' }"
 			class="logo-link"
 		>
@@ -12,7 +12,7 @@
 				width="164"
 				height="48"
 			/>
-		</router-link>
+		</RouterLink>
 
 		<MenuButton class="menu-button" />
 

frontend/src/components/misc/Pagination.vue

@@ -5,20 +5,20 @@
 		class="pagination is-centered p-4"
 		role="navigation"
 	>
-		<router-link
+		<RouterLink
 			:disabled="currentPage === 1 || undefined"
 			:to="getRouteForPagination(currentPage - 1)"
 			class="pagination-previous"
 		>
 			{{ $t('misc.previous') }}
-		</router-link>
+		</RouterLink>
-		<router-link
+		<RouterLink
 			:disabled="currentPage === totalPages || undefined"
 			:to="getRouteForPagination(currentPage + 1)"
 			class="pagination-next"
 		>
 			{{ $t('misc.next') }}
-		</router-link>
+		</RouterLink>
 		<ul class="pagination-list">
 			<li
 				v-for="(p, i) in pages"
@@ -28,7 +28,7 @@
 					v-if="p.isEllipsis"
 					class="pagination-ellipsis"
 				>&hellip;</span>
-				<router-link
+				<RouterLink
 					v-else
 					class="pagination-link"
 					:aria-label="'Goto page ' + p.number"
@@ -36,7 +36,7 @@
 					:to="getRouteForPagination(p.number)"
 				>
 					{{ p.number }}
-				</router-link>
+				</RouterLink>
 			</li>
 		</ul>
 	</nav>

frontend/src/components/project/views/ProjectTable.vue

@@ -178,14 +178,14 @@
 									:key="t.id"
 								>
 									<td v-if="activeColumns.index">
-										<router-link :to="taskDetailRoutes[t.id]">
+										<RouterLink :to="taskDetailRoutes[t.id]">
 											<template v-if="t.identifier === ''">
 												#{{ t.index }}
 											</template>
 											<template v-else>
 												{{ t.identifier }}
 											</template>
-										</router-link>
+										</RouterLink>
 									</td>
 									<td v-if="activeColumns.done">
 										<Done
@@ -194,9 +194,9 @@
 										/>
 									</td>
 									<td v-if="activeColumns.title">
-										<router-link :to="taskDetailRoutes[t.id]">
+										<RouterLink :to="taskDetailRoutes[t.id]">
 											{{ t.title }}
-										</router-link>
+										</RouterLink>
 									</td>
 									<td v-if="activeColumns.priority">
 										<PriorityLabel

frontend/src/components/sharing/UserTeam.vue

@@ -60,14 +60,14 @@
 					</template>
 					<template v-if="shareType === 'team'">
 						<td>
-							<router-link
+							<RouterLink
 								:to="{
 									name: 'teams.edit',
 									params: { id: s.id },
 								}"
 							>
 								{{ s.name }}
-							</router-link>
+							</RouterLink>
 						</td>
 					</template>
 					<td class="type">

frontend/src/components/tasks/partials/RelatedTasks.vue

@@ -125,7 +125,7 @@
 							class="task-done-checkbox"
 							@update:modelValue="toggleTaskDone(t)"
 						/>
-						<router-link
+						<RouterLink
 							:to="{ name: route.name as string, params: { id: task.id } }"
 							:class="{ 'is-strikethrough': task.done}"
 						>
@@ -141,7 +141,7 @@
 								</span>
 							</span>
 							{{ task.title }}
-						</router-link>
+						</RouterLink>
 					</div>
 					<BaseButton
 						v-if="editEnabled"

frontend/src/components/tasks/partials/SingleTaskInProject.vue

@@ -27,7 +27,7 @@
 				@mousedown.stop.self="focusTaskLink"
 			>
 				<span>
-					<router-link
+					<RouterLink
 						v-if="showProject && typeof project !== 'undefined'"
 						v-tooltip="$t('task.detail.belongsToProject', {project: project.title})"
 						:to="{ name: 'project.index', params: { projectId: task.projectId } }"
@@ -35,7 +35,7 @@
 						:class="{'mr-2': task.hexColor !== ''}"
 					>
 						{{ project.title }}
-					</router-link>
+					</RouterLink>
 
 					<ColorBubble
 						v-if="task.hexColor !== ''"
@@ -49,14 +49,14 @@
 						class="pr-2"
 					/>
 				
-					<router-link
+					<RouterLink
 						ref="taskLink"
 						:to="taskDetailRoute"
 						class="task-link"
 						tabindex="-1"
 					>
 						{{ task.title }}
-					</router-link>
+					</RouterLink>
 				</span>
 
 				<Labels
@@ -133,14 +133,14 @@
 				class="mr-1"
 			/>
 
-			<router-link
+			<RouterLink
 				v-if="showProjectSeparately"
 				v-tooltip="$t('task.detail.belongsToProject', {project: project.title})"
 				:to="{ name: 'project.index', params: { projectId: task.projectId } }"
 				class="task-project"
 			>
 				{{ project.title }}
-			</router-link>
+			</RouterLink>
 
 			<BaseButton
 				:class="{'is-favorite': task.isFavorite}"

frontend/src/views/Home.vue

@@ -15,9 +15,9 @@
 					dateSince: formatDateSince(deletionScheduledAt),
 				})
 			}}
-			<router-link :to="{name: 'user.settings', hash: '#deletion'}">
+			<RouterLink :to="{name: 'user.settings', hash: '#deletion'}">
 				{{ $t('user.deletion.scheduledCancel') }}
-			</router-link>
+			</RouterLink>
 		</Message>
 		<AddTask
 			class="is-max-width-desktop"

frontend/src/views/labels/ListLabels.vue

@@ -21,9 +21,9 @@
 				class="has-text-centered has-text-grey is-italic"
 			>
 				{{ $t('label.newCTA') }}
-				<router-link :to="{name:'labels.create'}">
+				<RouterLink :to="{name:'labels.create'}">
 					{{ $t('label.create.title') }}.
-				</router-link>
+				</RouterLink>
 			</p>
 		</div>
 

frontend/src/views/migrate/Migration.vue

@@ -3,7 +3,7 @@
 		<h1>{{ $t('migrate.title') }}</h1>
 		<p>{{ $t('migrate.description') }}</p>
 		<div class="migration-services">
-			<router-link
+			<RouterLink
 				v-for="{name, id, icon} in availableMigrators"
 				:key="id"
 				class="migration-service-link"
@@ -15,7 +15,7 @@
 					:src="icon"
 				>
 				{{ name }}
-			</router-link>
+			</RouterLink>
 		</div>
 	</div>
 </template>

frontend/src/views/tasks/TaskDetailView.vue

@@ -31,12 +31,12 @@
 					>
 						{{ getProjectTitle(p) }}
 					</a>
-					<router-link 
+					<RouterLink 
 						v-else
 						:to="{ name: 'project.index', params: { projectId: p.id } }"
 					>
 						{{ getProjectTitle(p) }}
-					</router-link>
+					</RouterLink>
 					<span
 						v-if="p.id !== project?.id"
 						class="has-text-grey-light"

frontend/src/views/teams/ListTeams.vue

@@ -20,11 +20,11 @@
 				v-for="team in teams"
 				:key="team.id"
 			>
-				<router-link :to="{name: 'teams.edit', params: {id: team.id}}">
+				<RouterLink :to="{name: 'teams.edit', params: {id: team.id}}">
 					<p>
 						{{ team.name }}
 					</p>
-				</router-link>
+				</RouterLink>
 			</li>
 		</ul>
 		<p
@@ -32,9 +32,9 @@
 			class="has-text-centered has-text-grey is-italic"
 		>
 			{{ $t('team.noTeams') }}
-			<router-link :to="{name: 'teams.create'}">
+			<RouterLink :to="{name: 'teams.create'}">
 				{{ $t('team.create.title') }}.
-			</router-link>
+			</RouterLink>
 		</p>
 	</div>
 </template>

frontend/src/views/user/Login.vue

@@ -54,13 +54,13 @@
 						class="label"
 						for="password"
 					>{{ $t('user.auth.password') }}</label>
-					<router-link
+					<RouterLink
 						:to="{ name: 'user.password-reset.request' }"
 						class="reset-password-link"
 						tabindex="6"
 					>
 						{{ $t('user.auth.forgotPassword') }}
-					</router-link>
+					</RouterLink>
 				</div>
 				<Password
 					v-model="password"
@@ -117,13 +117,13 @@
 				class="mt-2"
 			>
 				{{ $t('user.auth.noAccountYet') }}
-				<router-link
+				<RouterLink
 					:to="{ name: 'user.register' }"
 					type="secondary"
 					tabindex="5"
 				>
 					{{ $t('user.auth.createAccount') }}
-				</router-link>
+				</RouterLink>
 			</p>
 		</form>
 

frontend/src/views/user/Register.vue

@@ -101,9 +101,9 @@
 
 			<p class="mt-2">
 				{{ $t('user.auth.alreadyHaveAnAccount') }}
-				<router-link :to="{ name: 'user.login' }">
+				<RouterLink :to="{ name: 'user.login' }">
 					{{ $t('user.auth.login') }}
-				</router-link>
+				</RouterLink>
 			</p>
 		</form>
 	</div>

frontend/src/views/user/Settings.vue

@@ -7,17 +7,17 @@
 						v-for="({routeName, title }, index) in navigationItems"
 						:key="index"
 					>
-						<router-link
+						<RouterLink
 							class="navigation-link"
 							:to="{name: routeName}"
 						>
 							{{ title }}
-						</router-link>
+						</RouterLink>
 					</li>
 				</ul>
 			</nav>
 			<section class="view">
-				<router-view />
+				<RouterView />
 			</section>
 		</div>
 	</div>