feat: use vue-router 4 for vue3

package.json

@@ -34,6 +34,7 @@
     "vue-easymde": "1.4.0",
     "vue-flatpickr-component": "9.0.4",
     "vue-i18n": "8.26.3",
+    "vue-router": "4.0.11",
     "vue-shortkey": "3.1.7",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.2",
@@ -70,7 +71,6 @@
     "vite": "2.6.1",
     "vite-plugin-pwa": "0.11.2",
     "vue-notification": "1.3.20",
-    "vue-router": "3.5.2",
     "wait-on": "6.0.0",
     "workbox-cli": "6.3.0"
   },

src/components/home/contentAuth.vue

@@ -22,9 +22,11 @@
 
 				<router-view/>
 
-				<transition name="modal">
+				<router-view name="popup" v-slot="{ Component }">
-					<router-view name="popup"/>
+					<transition name="modal">
-				</transition>
+						<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">
+									<a
-										<icon icon="grip-lines"/>
+										@click="navigate"
-									</span>
+										:href="href"
-									<span
+										:active="isActive"
-										:style="{ backgroundColor: l.hexColor }"
+										class="list-menu-link"
-										class="color-bubble"
+										:class="{'router-link-exact-active': currentList.id === l.id}"
-										v-if="l.hexColor !== ''">
+									>
-									</span>
+										<span class="icon handle">
-									<span class="list-menu-title">
+											<icon icon="grip-lines"/>
-										{{ getListTitle(l) }}
+										</span>
-									</span>
+										<span
-									<span
+											:style="{ backgroundColor: l.hexColor }"
-										:class="{'is-favorite': l.isFavorite}"
+											class="color-bubble"
-										@click.stop="toggleFavoriteList(l)"
+											v-if="l.hexColor !== ''">
-										class="favorite">
+										</span>
-										<icon icon="star" v-if="l.isFavorite"/>
+										<span class="list-menu-title">
-										<icon :icon="['far', 'star']" v-else/>
+											{{ getListTitle(l) }}
-									</span>
+										</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 { createRouter, createWebHistory } from 'vue-router'
-import Router 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)
+const router = createRouter({
-
+	history: createWebHistory(),
-export default new Router({
-	mode: 'history',
 	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 {
+			return {el: document.getElementById(to.hash.slice(1))}
-				selector: to.hash,
-			}
 		}
 
 		// 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: '*',
+			path: '/:pathMatch(.*)*',
-			name: '404',
+			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 v-slot="{ Component }">
-			<router-view/>
+			<transition name="modal">
-		</transition>
+				<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 v-slot="{ Component }">
-			<router-view/>
+			<transition name="modal">
-		</transition>
+				<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 v-slot="{ Component }">
-			<router-view/>
+			<transition name="modal">
-		</transition>
+				<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 v-slot="{ Component }">
-			<router-view/>
+			<transition name="modal">
-		</transition>
+				<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'})
 		}
 	},
 }

vite.config.js

@@ -106,26 +106,10 @@ module.exports = {
 		target: 'es2015',
 		rollupOptions: {
 			plugins: [
-				visualizer(),
+				visualizer({
+					filename: 'stats.html',
+				}),
 			],
-			output: {
-				manualChunks: {
-					'user-settings': [
-						'./src/views/user/PasswordReset',
-						'./src/views/user/RequestPasswordReset',
-						'./src/views/user/Settings',
-					],
-					'settings': [
-						'./src/views/list/NewList',
-						'./src/views/namespaces/NewNamespace',
-						'./src/views/teams/EditTeam',
-						'./src/views/teams/NewTeam',
-					],
-					'highlight': [
-						'highlight.js',
-					],
-				},
-			},
 		},
 	},
 }

yarn.lock

@@ -1785,6 +1785,11 @@
     "@vue/compiler-dom" "3.2.14"
     "@vue/shared" "3.2.14"
 
+"@vue/devtools-api@^6.0.0-beta.14":
+  version "6.0.0-beta.15"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.15.tgz#ad7cb384e062f165bcf9c83732125bffbc2ad83d"
+  integrity sha512-quBx4Jjpexo6KDiNUGFr/zF/2A4srKM9S9v2uHgMXSU//hjgq1eGzqkIFql8T9gfX5ZaVOUzYBP3jIdIR3PKIA==
+
 "@vue/eslint-config-typescript@7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@vue/eslint-config-typescript/-/eslint-config-typescript-7.0.0.tgz#220c70c2edf7a253e739298525f4d401b8ef0038"
@@ -6913,10 +6918,12 @@ vue-notification@1.3.20:
   resolved "https://registry.yarnpkg.com/vue-notification/-/vue-notification-1.3.20.tgz#d85618127763b46f3e25b8962b857947d5a97cbe"
   integrity sha512-vPj67Ah72p8xvtyVE8emfadqVWguOScAjt6OJDEUdcW5hW189NsqvfkOrctxHUUO9UYl9cTbIkzAEcPnHu+zBQ==
 
-vue-router@3.5.2:
+vue-router@4.0.11:
-  version "3.5.2"
+  version "4.0.11"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.2.tgz#5f55e3f251970e36c3e8d88a7cd2d67a350ade5c"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.11.tgz#cd649a0941c635281763a20965b599643ddc68ed"
-  integrity sha512-807gn82hTnjCYGrnF3eNmIw/dk7/GE4B5h69BlyCK9KHASwSloD1Sjcn06zg9fVG4fYH2DrsNBZkpLtb25WtaQ==
+  integrity sha512-sha6I8fx9HWtvTrFZfxZkiQQBpqSeT+UCwauYjkdOQYRvwsGwimlQQE2ayqUwuuXGzquFpCPoXzYKWlzL4OuXg==
+  dependencies:
+    "@vue/devtools-api" "^6.0.0-beta.14"
 
 vue-shortkey@3.1.7:
   version "3.1.7"