Migrate from router-link's tag prop to v-slot

src/components/NcAppNavigationItem/NcAppNavigationItem.vue

@@ -209,12 +209,16 @@ Just set the `pinned` prop.
 			'app-navigation-entry--collapsible': collapsible,
 		}"
 		class="app-navigation-entry-wrapper">
-		<nav-element v-bind="navElement"
-			:class="{
+		<component :is="isRouterLink ? 'router-link' : 'NcVNodes'"
+			v-slot="{ navigate, isActive }"
+			:custom="isRouterLink ? true : false"
+			:to="to"
+			:exact="isRouterLink ? exact : null">
+			<div :class="{
 					'app-navigation-entry--no-icon': !isIconShown,
 					'app-navigation-entry--editing': editingActive,
 					'app-navigation-entry--deleted': undo,
-				'active': isActive,
+					'active': isActive && to,
 				}"
 				class="app-navigation-entry">
 				<!-- Icon and name -->
@@ -226,7 +230,7 @@ Just set the `pinned` prop.
 					:target="isExternal(href) ? '_blank' : ''"
 					:title="title || nameTitleFallback"
 					@blur="handleBlur"
-				@click="onClick"
+					@click="(event) => onClick(event, navigate)"
 					@focus="handleFocus"
 					@keydown.tab.exact="handleTab">
 
@@ -301,7 +305,8 @@ Just set the `pinned` prop.
 
 				<!-- Anything (virtual) that should be mounted in the component, like a related modal -->
 				<slot name="extra" />
-		</nav-element>
+			</div>
+		</component>
 		<!-- Children elements -->
 		<ul v-if="canHaveChildren && hasChildren" class="app-navigation-entry__children">
 			<slot />
@@ -315,6 +320,7 @@ import { directive as ClickOutside } from 'v-click-outside'
 import NcActions from '../NcActions/index.js'
 import NcActionButton from '../NcActionButton/index.js'
 import NcLoadingIcon from '../NcLoadingIcon/index.js'
+import NcVNodes from '../NcVNodes/index.js'
 import NcAppNavigationIconCollapsible from './NcAppNavigationIconCollapsible.vue'
 import isMobile from '../../mixins/isMobile/index.js'
 import NcInputConfirmCancel from './NcInputConfirmCancel.vue'
@@ -330,9 +336,10 @@ export default {
 	components: {
 		NcActions,
 		NcActionButton,
-		NcLoadingIcon,
 		NcAppNavigationIconCollapsible,
 		NcInputConfirmCancel,
+		NcLoadingIcon,
+		NcVNodes,
 		Pencil,
 		Undo,
 	},
@@ -399,7 +406,7 @@ export default {
 		 */
 		to: {
 			type: [String, Object],
-			default: '',
+			default: null,
 		},
 
 		/**
@@ -570,6 +577,10 @@ export default {
 			return this.name
 		},
 
+		isRouterLink() {
+			return this.to && !this.href
+		},
+
 		collapsible() {
 			return this.allowCollapse && !!this.$slots.default
 		},
@@ -598,25 +609,6 @@ export default {
 			return false
 		},
 
-		// This is used to decide which outer element type to use
-		navElement() {
-			if (this.to && !this.href) {
-				return {
-					is: 'router-link',
-					tag: 'div',
-					to: this.to,
-					exact: this.exact,
-				}
-			}
-			return {
-				is: 'div',
-			}
-		},
-
-		isActive() {
-			return this.to && this.$route === this.to
-		},
-
 		editButtonAriaLabel() {
 			return this.editLabel ? this.editLabel : t('Edit item')
 		},
@@ -656,7 +648,9 @@ export default {
 		},
 
 		// forward click event
-		onClick(event) {
+		onClick(event, navigate) {
+			// Navigate is only defined if it is a router-link
+			navigate?.()
 			this.$emit('click', event)
 		},
 

src/components/NcButton/NcButton.vue

@@ -289,20 +289,6 @@ export default {
 		},
 	},
 
-	computed: {
-		// Determines whether the root element is an a,
-		// a router-link or a button
-		rootElement() {
-			if (this.to) {
-				return 'router-link'
-			}
-			if (this.href) {
-				return 'a'
-			}
-			return 'button'
-		},
-	},
-
 	/**
 	 * The render function to display the component
 	 *
@@ -326,7 +312,7 @@ export default {
 			this)
 		}
 
-		return h(this.rootElement,
+		const renderButton = ({ navigate, isActive, isExactActive } = {}) => h((this.to || !this.href) ? 'button' : 'a',
 			{
 				class: [
 					'button-vue',
@@ -336,6 +322,8 @@ export default {
 						'button-vue--icon-and-text': hasIcon && hasText,
 						[`button-vue--vue-${this.type}`]: this.type,
 						'button-vue--wide': this.wide,
+						active: isActive,
+						'router-link-exact-active': isExactActive,
 					},
 				],
 				attrs: {
@@ -346,20 +334,14 @@ export default {
 					href: (!this.to && this.href) ? this.href : null,
 					...this.$attrs,
 				},
-				props: {
-					to: this.to ? this.to : null,
-					tag: this.to ? 'button' : null,
-					exact: this.exact,
-				},
 				on: {
 					...this.$listeners,
+					click: ($event) => {
+						// We have to both navigate and call the listeners click handler
+						this.$listeners?.click?.($event)
+						navigate?.($event)
 					},
-				// nativeOn is only valid on components
-				...(this.rootElement === 'router-link' && {
-					nativeOn: {
-						...this.$listeners,
 				},
-				}),
 			},
 			[
 				h('span', { class: 'button-vue__wrapper' }, [
@@ -368,6 +350,22 @@ export default {
 				]),
 			]
 		)
+
+		// If we have a router-link, we wrap the button in it
+		if (this.to) {
+			return h('router-link', {
+				props: {
+					custom: true,
+					to: this.to,
+					exact: this.exact,
+				},
+				scopedSlots: {
+					default: renderButton,
+				},
+			})
+		}
+		// Otherwise we simply return the button
+		return renderButton()
 	},
 }
 

src/components/NcListItem/NcListItem.vue

@@ -199,9 +199,14 @@
 
 <template>
 	<!-- This wrapper can be either a router link or a `<li>` -->
-	<nav-element class="list-item__wrapper"
-		:class="{ 'list-item__wrapper--active' : active }"
-		v-bind="navElement">
+	<component :is="to ? 'router-link' : 'NcVNodes'"
+		v-slot="{ navigate, isActive }"
+		:custom="to ? true : null"
+		:to="to"
+		:exact="to ? exact : null"
+		@click="to ? navigate : null">
+		<li class="list-item__wrapper"
+			:class="{ 'list-item__wrapper--active' : isActive }">
 			<a :id="anchorId"
 				ref="list-item"
 				:href="href"
@@ -292,7 +297,8 @@
 					<slot name="extra" />
 				</div>
 			</a>
-	</nav-element>
+		</li>
+	</component>
 </template>
 
 <script>
@@ -339,7 +345,7 @@ export default {
 		 */
 		to: {
 			type: [String, Object],
-			default: '',
+			default: null,
 		},
 
 		/**
@@ -450,22 +456,6 @@ export default {
 			return this.details !== ''
 		},
 
-		// This is used to decide which outer element type to use
-		// li or router-link
-		navElement() {
-			if (this.to !== '') {
-				return {
-					is: 'router-link',
-					tag: 'li',
-					to: this.to,
-					exact: this.exact,
-				}
-			}
-			return {
-				is: 'li',
-			}
-		},
-
 		oneLine() {
 			return !this.hasSubtitle && !this.showDetails
 		},

src/components/NcVNodes/NcVNodes.vue

@@ -29,7 +29,7 @@ export default {
 		 */
 		vnodes: {
 			type: [Array, Object],
-			default: () => [],
+			default: null,
 		},
 	},
 	/**
@@ -39,7 +39,7 @@ export default {
 	 * @return {object} The created VNode
 	 */
 	render(h) {
-		return this.vnodes
+		return this.vnodes || this.$slots?.default || this.$scopedSlots?.default?.()
 	},
 }
 </script>