Fixed vue deprecation warnings for router-link

src/components/TheSidebar.vue

@@ -15,7 +15,6 @@
 			:class="{ 'bg-background-main': activeTablink === link.name }"
 			:to="{ name: link.routerName }"
 			class="relative flex items-center h-16 no-underline group main_tablinks hover:bg-background-main text-foreground"
-			tag="a"
 			@click.native="activeTablink = link.name"
 		>
 			<i

src/components/pages/Artist.vue

@@ -49,11 +49,13 @@
 			<tbody>
 				<tr v-for="release in sortedData" :key="release.releaseID">
 					<router-link
-						tag="td"
+						custom
+						v-slot="{ navigate }"
 						class="flex items-center clickable"
 						:data-cm-link="release.releaseLink"
 						:to="{ name: 'Album', params: { id: release.releaseID } }"
 					>
+						<td @click="navigate" @keypress.enter="navigate" role="link">
 							<img class="mr-4 rounded coverart" :src="release.releaseCover" style="width: 56px; height: 56px" />
 							<i v-if="release.isReleaseExplicit" class="material-icons title-icon title-icon--explicit">explicit</i>
 							<div>
@@ -70,6 +72,7 @@
 									{{ $tc(`globals.listTabs.${release.releaseType}`) }}
 								</span>
 							</div>
+						</td>
 					</router-link>
 					<td class="w-32 text-center xl:w-40">{{ release.releaseDate }}</td>
 					<td class="w-20 text-center xl:w-32">{{ release.releaseTracksNumber }}</td>

src/components/pages/Charts.vue

@@ -51,16 +51,18 @@
 						<router-link
 							:to="{ name: 'Artist', params: { id: track.artist.id } }"
 							class="table__cell table__cell--medium table__cell--center clickable"
-							tag="td"
+							custom
+							v-slot="{ navigate }"
 						>
-							{{ track.artist.name }}
+							<td @click="navigate" @keypress.enter="navigate" role="link">{{ track.artist.name }}</td>
 						</router-link>
 						<router-link
 							:to="{ name: 'Album', params: { id: track.album.id } }"
 							class="table__cell--medium table__cell--center clickable"
-							tag="td"
+							custom
+							v-slot="{ navigate }"
 						>
-							{{ track.album.title }}
+							<td @click="navigate" @keypress.enter="navigate" role="link">{{ track.album.title }}</td>
 						</router-link>
 						<td class="table__cell--small table__cell--center">
 							{{ convertDuration(track.duration) }}

src/components/pages/Favorites.vue

@@ -29,9 +29,11 @@
 			</div>
 			<div v-if="(playlists.length + spotifyPlaylists.length) > 0" class="release-grid">
 				<div v-for="release in playlists" :key="release.id" class="release">
-					<router-link :to="{ name: 'Playlist', params: { id: release.id } }" class="cursor-pointer" tag="div">
+					<router-link :to="{ name: 'Playlist', params: { id: release.id } }" class="cursor-pointer" custom v-slot="{ navigate }">
+						<div @click="navigate" @keypress.enter="navigate" role="link">
 							<CoverContainer :cover="release.picture_medium" :link="release.link" is-rounded @click.stop="addToQueue" />
 							<p class="primary-text">{{ release.title }}</p>
+						</div>
 					</router-link>
 
 					<p class="secondary-text">
@@ -45,9 +47,11 @@
 				</div>
 
 				<div v-for="release in spotifyPlaylists" :key="release.id" class="release">
-					<router-link :to="{ name: 'Spotify Playlist', params: { id: release.id } }" class="cursor-pointer" tag="div">
+					<router-link :to="{ name: 'Spotify Playlist', params: { id: release.id } }" class="cursor-pointer" custom v-slot="{ navigate }">
+						<div @click="navigate" @keypress.enter="navigate" role="link">
 							<CoverContainer :cover="release.picture_medium" :link="release.link" is-rounded @click.stop="addToQueue" />
 							<p class="primary-text">{{ release.title }}</p>
+						</div>
 					</router-link>
 
 					<p class="secondary-text">
@@ -72,11 +76,14 @@
 					:key="release.id"
 					:to="{ name: 'Album', params: { id: release.id } }"
 					class="release clickable"
-					tag="div"
+					custom
+					v-slot="{ navigate }"
 				>
+					<div @click="navigate" @keypress.enter="navigate" role="link">
 						<CoverContainer :cover="release.cover_medium" :link="release.link" is-rounded @click.stop="addToQueue" />
 						<p class="primary-text">{{ release.title }}</p>
 						<p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p>
+					</div>
 				</router-link>
 			</div>
 		</div>
@@ -91,10 +98,13 @@
 					:key="release.id"
 					:to="{ name: 'Artist', params: { id: release.id } }"
 					class="release clickable"
-					tag="div"
+					custom
+					v-slot="{ navigate }"
 				>
+					<div @click="navigate" @keypress.enter="navigate" role="link">
 						<CoverContainer :cover="release.picture_medium" :link="release.link" is-circle @click.stop="addToQueue" />
 						<p class="primary-text">{{ release.name }}</p>
+					</div>
 				</router-link>
 			</div>
 		</div>
@@ -127,16 +137,18 @@
 					<router-link
 						:to="{ name: 'Artist', params: { id: track.artist.id } }"
 						class="table__cell table__cell--medium table__cell--center clickable"
-						tag="td"
+						custom
+						v-slot="{ navigate }"
 					>
-						{{ track.artist.name }}
+						<td @click="navigate" @keypress.enter="navigate" role="link">{{ track.artist.name }}</td>
 					</router-link>
 					<router-link
 						:to="{ name: 'Album', params: { id: track.album.id } }"
 						class="table__cell--medium table__cell--center clickable"
-						tag="td"
+						custom
+						v-slot="{ navigate }"
 					>
-						{{ track.album.title }}
+						<td @click="navigate" @keypress.enter="navigate" role="link">{{ track.album.title }}</td>
 					</router-link>
 					<td class="table__cell--small">
 						{{ convertDuration(track.duration) }}

src/components/pages/Home.vue

@@ -4,8 +4,8 @@
 
 		<section v-if="!isLoggedIn" ref="notLogged" class="py-6 border-0 border-t border-solid border-grayscale-500">
 			<p id="home_not_logged_text" class="mb-4">{{ $t('home.needTologin') }}</p>
-			<router-link tag="button" class="btn btn-primary" name="button" :to="{ name: 'Settings' }">
+			<router-link custom v-slot="{ navigate }" class="btn btn-primary" name="button" :to="{ name: 'Settings' }">
-				{{ $t('home.openSettings') }}
+				<button @click="navigate" @keypress.enter="navigate" role="link">{{ $t('home.openSettings') }}</button>
 			</router-link>
 		</section>
 
@@ -15,12 +15,14 @@
 				<router-link
 					v-for="release in playlists"
 					:key="release.id"
-					tag="div"
+					custom
+					v-slot="{ navigate }"
 					class="release clickable"
 					:to="{ name: 'Playlist', params: { id: release.id } }"
 					tabindex="0"
 					@keyup.enter.native="$router.push({ name: 'Playlist', params: { id: release.id } })"
 				>
+					<div @click="navigate" @keypress.enter="navigate" role="link">
 						<CoverContainer is-rounded :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" />
 						<p class="primary-text">{{ release.title }}</p>
 						<p class="secondary-text">
@@ -31,6 +33,7 @@
 								)}`
 							}}
 						</p>
+					</div>
 				</router-link>
 			</div>
 		</section>
@@ -41,16 +44,19 @@
 				<router-link
 					v-for="release in albums"
 					:key="release.id"
-					tag="div"
+					custom
+					v-slot="{ navigate }"
 					class="release clickable"
 					:to="{ name: 'Album', params: { id: release.id } }"
 					:data-id="release.id"
 					tabindex="0"
 					@keyup.enter.native="$router.push({ name: 'Album', params: { id: release.id } })"
 				>
+					<div @click="navigate" @keypress.enter="navigate" role="link">
 						<CoverContainer is-rounded :cover="release.cover_medium" :link="release.link" @click.stop="addToQueue" />
 						<p class="primary-text">{{ release.title }}</p>
 						<p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p>
+					</div>
 				</router-link>
 			</div>
 		</section>

src/components/pages/LinkAnalyzer.vue

@@ -27,37 +27,43 @@
 					<h1 class="m-0">{{ title }}</h1>
 					<h2 v-if="type === 'track'" class="m-0 mb-3 text-lg">
 						<i18n path="globals.by" tag="span">
+							<template #artist>
 								<router-link
-								tag="span"
+									custom
-								place="artist"
+									v-slot="{ navigate }"
 									class="clickable"
 									:to="{ name: 'Artist', params: { id: data.artist.id } }"
 								>
-								{{ data.artist.name }}
+									<span place="artist" @click="navigate" @keypress.enter="navigate" role="link">{{ data.artist.name }}</span>
 								</router-link>
+							</template>
 						</i18n>
 						•
 						<i18n path="globals.in" tag="span">
+							<template #album>
 								<router-link
-								tag="span"
+									custom
-								place="album"
+									v-slot="{ navigate }"
 									class="clickable"
 									:to="{ name: 'Album', params: { id: data.album.id } }"
 								>
-								{{ data.album.title }}
+									<span @click="navigate" @keypress.enter="navigate" role="link">{{ data.album.title }}</span>
 								</router-link>
+							</template>
 						</i18n>
 					</h2>
 					<h2 v-else-if="type === 'album'" class="m-0 mb-3 text-lg">
 						<i18n path="globals.by" tag="span">
+							<template #artist>
 								<router-link
-								tag="span"
+									custom
-								place="artist"
+									v-slot="{ navigate }"
 									class="clickable"
 									:to="{ name: 'Artist', params: { id: data.artist.id } }"
 								>
-								{{ data.artist.name }}
+									<span @click="navigate" @keypress.enter="navigate" role="link">{{ data.artist.name }}</span>
 								</router-link>
+							</template>
 						</i18n>
 						{{ ` • ${$tc('globals.listTabs.trackN', data.nb_tracks)}` }}
 					</h2>
@@ -137,8 +143,8 @@
 			</template>
 
 			<div v-if="type === 'album'">
-				<router-link tag="button" class="btn btn-primary" name="button" :to="{ name: 'Album', params: { id } }">
+				<router-link custom v-slot="{ navigate }" class="btn btn-primary" name="button" :to="{ name: 'Album', params: { id } }">
-					{{ $t('linkAnalyzer.table.tracklist') }}
+					<button @click="navigate" @keypress.enter="navigate" role="link">{{ $t('linkAnalyzer.table.tracklist') }}</button>
 				</router-link>
 			</div>
 		</div>

src/components/pages/Tracklist.vue

@@ -73,17 +73,19 @@
 							<router-link
 								:to="{ name: 'Artist', params: { id: track.artist.id } }"
 								class="table__cell--medium table__cell--center clickable"
-								tag="td"
+								custom
+								v-slot="{ navigate }"
 							>
-								{{ track.artist.name }}
+								<td @click="navigate" @keypress.enter="navigate" role="link">{{ track.artist.name }}</td>
 							</router-link>
 							<router-link
 								v-if="type === 'playlist'"
 								:to="{ name: 'Album', params: { id: track.album.id } }"
 								class="table__cell--medium table__cell--center clickable"
-								tag="td"
+								custom
+								v-slot="{ navigate }"
 							>
-								{{ track.album.title }}
+								<td @click="navigate" @keypress.enter="navigate" role="link">{{ track.album.title }}</td>
 							</router-link>
 							<td
 								:class="{ 'table__cell--small': type === 'album', 'table__cell--x-small': type === 'playlist' }"

src/components/search/ResultsAlbums.vue

@@ -10,7 +10,8 @@
 
 			<div v-else class="release-grid">
 				<div v-for="release in viewInfo.data.slice(0, itemsToShow)" :key="release.albumID" class="w-40 release">
-					<router-link tag="div" class="cursor-pointer" :to="{ name: 'Album', params: { id: release.albumID } }">
+					<router-link custom v-slot="{ navigate }" class="cursor-pointer" :to="{ name: 'Album', params: { id: release.albumID } }">
+						<div @click="navigate" @keypress.enter="navigate" role="link">
 							<CoverContainer
 								is-rounded
 								:cover="release.albumCoverMedium"
@@ -28,6 +29,7 @@
 								</i>
 								{{ release.albumTitle }}
 							</span>
+						</div>
 					</router-link>
 
 					<p class="secondary-text">

src/components/search/ResultsArtists.vue

@@ -10,7 +10,8 @@
 
 			<div v-else class="release-grid">
 				<div v-for="release in viewInfo.data.slice(0, itemsToShow)" :key="release.artistID" class="w-40 release">
-					<router-link tag="div" class="cursor-pointer" :to="{ name: 'Artist', params: { id: release.artistID } }">
+					<router-link custom v-slot="{ navigate }" class="cursor-pointer" :to="{ name: 'Artist', params: { id: release.artistID } }">
+						<div @click="navigate" @keypress.enter="navigate" role="link">
 							<CoverContainer
 								is-circle
 								:cover="release.artistPictureMedium"
@@ -21,6 +22,7 @@
 							<span class="primary-text">
 								{{ release.artistName }}
 							</span>
+						</div>
 					</router-link>
 
 					<!-- TODO Fix, depending on the tab there are albums number or fans number -->

src/components/search/ResultsPlaylists.vue

@@ -9,7 +9,8 @@
 			</div>
 			<div v-else class="release-grid">
 				<div v-for="playlist in viewInfo.data.slice(0, itemsToShow)" :key="playlist.playlistID" class="w-40 release">
-					<router-link tag="div" class="cursor-pointer" :to="{ name: 'Playlist', params: { id: playlist.playlistID } }">
+					<router-link custom v-slot="{ navigate }" class="cursor-pointer" :to="{ name: 'Playlist', params: { id: playlist.playlistID } }">
+						<div @click="navigate" @keypress.enter="navigate" role="link">
 							<CoverContainer
 								is-rounded
 								:cover="playlist.playlistPictureMedium"
@@ -20,6 +21,7 @@
 							<span class="primary-text">
 								{{ playlist.playlistTitle }}
 							</span>
+						</div>
 					</router-link>
 
 					<p class="secondary-text">

src/components/search/ResultsTracks.vue

@@ -43,23 +43,29 @@
 						</td>
 
 						<router-link
-							tag="td"
+							custom
+							v-slot="{ navigate }"
 							class="break-words table__cell table__cell--medium table__cell--center"
 							:to="{ name: 'Artist', params: { id: track.artistID } }"
 						>
+							<td @click="navigate" @keypress.enter="navigate" role="link">
 								<span class="cursor-pointer hover:underline">
 									{{ track.artistName }}
 								</span>
+							</td>
 						</router-link>
 
 						<router-link
-							tag="td"
+							custom
+							v-slot="{ navigate }"
 							class="break-words table__cell table__cell--medium table__cell--center"
 							:to="{ name: 'Album', params: { id: track.albumID } }"
 						>
+							<td @click="navigate" @keypress.enter="navigate" role="link">
 								<span class="cursor-pointer hover:underline">
 									{{ track.albumTitle }}
 								</span>
+							</td>
 						</router-link>
 
 						<td class="table__cell table__cell--small table__cell--center">

src/components/search/TopResult.vue

@@ -1,10 +1,12 @@
 <template>
 	<div class="flex flex-col items-center justify-center">
 		<router-link
-			tag="div"
+			custom
+			v-slot="{ navigate }"
 			class="cursor-pointer"
 			:to="{ name: upperCaseFirstLowerCaseRest($attrs.info.type), params: { id: $attrs.info.id } }"
 		>
+			<div @click="navigate" @keypress.enter="navigate" role="link">
 				<CoverContainer
 					class="w-40 h-40"
 					:is-rounded="$attrs.info.type !== 'artist'"
@@ -17,6 +19,7 @@
 				<p class="mt-4 mb-1 text-xl text-center transition-colors duration-200 ease-in-out hover:text-primary">
 					{{ $attrs.info.title }}
 				</p>
+			</div>
 		</router-link>
 
 		<p class="mb-3 text-center secondary-text">