feat(Link): add active prop to override default behaviour (#732)

Co-authored-by: Sébastien Chopin <seb@nuxt.com>
nuxt · Sep 25, 2023 · 8257a11 · 8257a11 · vercel · Sep 25, 2023
1 parent 6887f73
commit 8257a11
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/src/runtime/components/elements/Link.vue b/src/runtime/components/elements/Link.vue
@@ -46,6 +46,10 @@ export default defineComponent({
       type: Boolean,
       default: null
     },
+    active: {
+      type: Boolean,
+      default: false
+    },
     exact: {
       type: Boolean,
       default: false
@@ -65,6 +69,10 @@ export default defineComponent({
   },
   setup (props) {
     function resolveLinkClass (route, $route, { isActive, isExactActive }: { isActive: boolean, isExactActive: boolean }) {
+      if (props.active) {
+        return props.activeClass
+      }
+
       if (props.exactQuery && !isEqual(route.query, $route.query)) {
         return props.inactiveClass
       }

diff --git a/src/runtime/types/link.d.ts b/src/runtime/types/link.d.ts
@@ -1,6 +1,7 @@
 import type { NuxtLinkProps } from '#app'
 
 export interface Link extends NuxtLinkProps {
+  active?: boolean
   exact?: boolean
   exactQuery?: boolean
   exactMatch?: boolean