feat: use vue-router 4 for vue3

src/components/home/contentAuth.vue

@@ -22,9 +22,11 @@
 
 				<router-view/>
 
-				<transition name="modal">
-					<router-view name="popup"/>
-				</transition>
+				<router-view name="popup" v-slot="{ Component }">
+					<transition name="modal">
+						<component :is="Component" />
+					</transition>
+				</router-view>
 
 				<a
 					class="keyboard-shortcuts-button"

src/components/home/navigation.vue

@@ -106,29 +106,36 @@
 								:class="{'is-loading': listUpdating[l.id]}"
 							>
 								<router-link
-									class="list-menu-link"
-									:class="{'router-link-exact-active': currentList.id === l.id}"
 									:to="{ name: 'list.index', params: { listId: l.id} }"
-									tag="span"
+									v-slot="{ href, navigate, isActive }"
+									custom
 								>
-									<span class="icon handle">
-										<icon icon="grip-lines"/>
-									</span>
-									<span
-										:style="{ backgroundColor: l.hexColor }"
-										class="color-bubble"
-										v-if="l.hexColor !== ''">
-									</span>
-									<span class="list-menu-title">
-										{{ getListTitle(l) }}
-									</span>
-									<span
-										:class="{'is-favorite': l.isFavorite}"
-										@click.stop="toggleFavoriteList(l)"
-										class="favorite">
-										<icon icon="star" v-if="l.isFavorite"/>
-										<icon :icon="['far', 'star']" v-else/>
-									</span>
+									<a
+										@click="navigate"
+										:href="href"
+										:active="isActive"
+										class="list-menu-link"
+										:class="{'router-link-exact-active': currentList.id === l.id}"
+									>
+										<span class="icon handle">
+											<icon icon="grip-lines"/>
+										</span>
+										<span
+											:style="{ backgroundColor: l.hexColor }"
+											class="color-bubble"
+											v-if="l.hexColor !== ''">
+										</span>
+										<span class="list-menu-title">
+											{{ getListTitle(l) }}
+										</span>
+										<span
+											:class="{'is-favorite': l.isFavorite}"
+											@click.stop="toggleFavoriteList(l)"
+											class="favorite">
+											<icon icon="star" v-if="l.isFavorite"/>
+											<icon :icon="['far', 'star']" v-else/>
+										</span>
+									</a>
 								</router-link>
 								<list-settings-dropdown :list="l" v-if="l.id > 0"/>
 								<span class="list-setting-spacer" v-else></span>

src/router/index.js

@@ -1,5 +1,4 @@
-import Vue from 'vue'
-import Router from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 
 import HomeComponent from '../views/Home'
 import NotFoundComponent from '../views/404'
@@ -59,10 +58,8 @@ const NewNamespaceComponent = () => import('../views/namespaces/NewNamespace')
 const EditTeamComponent = () => import('../views/teams/EditTeam')
 const NewTeamComponent = () =>  import('../views/teams/NewTeam')
 
-Vue.use(Router)
-
-export default new Router({
-	mode: 'history',
+const router = createRouter({
+	history: createWebHistory(),
 	scrollBehavior(to, from, savedPosition) {
 		// If the user is using their forward/backward keys to navigate, we want to restore the scroll view
 		if (savedPosition) {
@@ -71,13 +68,11 @@ export default new Router({
 
 		// Scroll to anchor should still work
 		if (to.hash) {
-			return {
-				selector: to.hash,
-			}
+			return {el: document.getElementById(to.hash.slice(1))}
 		}
 
 		// Otherwise just scroll to the top
-		return {x: 0, y: 0}
+		return {left: 0, top: 0}
 	},
 	routes: [
 		{
@@ -86,8 +81,14 @@ export default new Router({
 			component: HomeComponent,
 		},
 		{
-			path: '*',
-			name: '404',
+			path: '/:pathMatch(.*)*',
+			name: 'not-found',
+			component: NotFoundComponent,
+		},
+		// if you omit the last `*`, the `/` character in params will be encoded when resolving or pushing
+		{
+			path: '/:pathMatch(.*)',
+			name: 'bad-not-found',
 			component: NotFoundComponent,
 		},
 		{
@@ -505,4 +506,18 @@ export default new Router({
 			component: About,
 		},
 	],
-})
+})
+
+// bad example if using named routes:
+router.resolve({
+	name: 'bad-not-found',
+	params: { pathMatch: 'not/found' },
+}).href // '/not%2Ffound'
+
+// good example:
+router.resolve({
+	name: 'not-found',
+	params: { pathMatch: ['not', 'found'] },
+}).href // '/not/found'
+
+export default router

src/views/list/views/Gantt.vue

@@ -53,9 +53,11 @@
 		/>
 
 		<!-- This router view is used to show the task popup while keeping the gantt chart itself -->
-		<transition name="modal">
-			<router-view/>
-		</transition>
+		<router-view v-slot="{ Component }">
+			<transition name="modal">
+				<component :is="Component" />
+			</transition>
+		</router-view>
 
 		</card>
 	</div>

src/views/list/views/Kanban.vue

@@ -212,9 +212,11 @@
 		</div>
 
 		<!-- This router view is used to show the task popup while keeping the kanban board itself -->
-		<transition name="modal">
-			<router-view/>
-		</transition>
+		<router-view v-slot="{ Component }">
+			<transition name="modal">
+				<component :is="Component" />
+			</transition>
+		</router-view>
 
 		<transition name="modal">
 			<modal

src/views/list/views/List.vue

@@ -128,9 +128,11 @@
 		</card>
 
 		<!-- This router view is used to show the task popup while keeping the kanban board itself -->
-		<transition name="modal">
-			<router-view/>
-		</transition>
+		<router-view v-slot="{ Component }">
+			<transition name="modal">
+				<component :is="Component" />
+			</transition>
+		</router-view>
 	</div>
 </template>
 

src/views/list/views/Table.vue

@@ -179,9 +179,11 @@
 		</card>
 
 		<!-- This router view is used to show the task popup while keeping the table view itself -->
-		<transition name="modal">
-			<router-view/>
-		</transition>
+		<router-view v-slot="{ Component }">
+			<transition name="modal">
+				<component :is="Component" />
+			</transition>
+		</router-view>
 
 	</div>
 </template>

src/views/migrator/MigrateService.vue

@@ -32,7 +32,7 @@ export default {
 			this.identifier = identifier
 			this.isFileMigrator = isFileMigrator
 		} catch (e) {
-			this.$router.push({name: '404'})
+			this.$router.push({name: 'not-found'})
 		}
 	},
 }