update readme

Author: smastrom

README.md

@@ -17,7 +17,9 @@ But it may not be the one-size-fits-all solution for highlighting menu/sidebar l
 - On page load, active target doesn't match the one in the URL hash.
 - Is tricky to customize behavior according to different interactions
 
-> Vue Use Active Scroll implements a custom scroll observer that automatically deals with all these drabacks and simply returns the correct active target.
+<br />
+
+**Vue Use Active Scroll** implements a custom scroll observer that automatically deals with all these drabacks and simply returns the correct active target.
 
 ### Features
 
@@ -30,7 +32,7 @@ But it may not be the one-size-fits-all solution for highlighting menu/sidebar l
 
 ### What it doesn't do?
 
-- Mutate your elements and styles
+- Mutate elements and inject styles
 - Scroll to targets
 
 <br />
@@ -237,10 +239,10 @@ const { isActive, setActive } = useActive(targets)
 <template>
   <nav>
     <a
-      v-for="(link, index) in links"
       @click="setActive(link.targetId) /* 👈🏻 */"
-      :href="`#${link.targetId}`"
+      v-for="(link, index) in links"
       :key="link.targetId"
+      :to="`#${link.targetId}`"
     >
       {{ link.label }}
     </a>
@@ -257,16 +259,6 @@ html {
 
 You are totally free to create your own click handler and choose the scrolling strategy: CSS (smooth or auto), [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) or even a scroll library like [animated-scroll-to](https://github.com/Stanko/animated-scroll-to) with custom easings will work. Just remember to include `setActive` in your handler.
 
-<details><summary><strong>RouterLink / NuxtLink</strong></summary>
-
-<br />
-
-Since those links don't navigate to another page, you can safely use an `a` tag with a `href` attribute and avoid to use `RouterLink` or `NuxtLink`.
-
-<br />
-
-</details>
-
 <details><summary><strong>Custom Scroll Callback</strong></summary>
 
 <br />
@@ -296,9 +288,8 @@ function scrollTo(event, targetId) {
   <a
     v-for="(link, index) in links"
     @click="scrollTo($event, link.targetId)"
-    :href="`#${link.targetId}`"
     :key="link.targetId"
-    :class="{ active: isActive(link.targetId) }"
+    :to="`#${link.targetId}`"
   >
     {{ link.label }}
   </a>
@@ -310,20 +301,24 @@ function scrollTo(event, targetId) {
 
 ### **2.** Use `isActive` to style the active link:
 
+> :bulb: If you're playing with transitions or advanced styling rules simply leverage _activeIndex_ and _activeId_.
+
 ```vue
 <script setup>
 // ...
-const { isActive } = useActive(targets)
+const { isActive, setActive } = useActive(targets)
 </script>
 
 <template>
   <nav>
     <a
-      v-for="(link, index) in links"
       @click="setActive(link.targetId)"
-      :href="`#${link.targetId}`"
+      v-for="(link, index) in links"
       :key="link.targetId"
-      :class="{ active: isActive(link.targetId) /* 👈🏻 */ }"
+      :to="`#${link.targetId}`"
+      :class="{
+        active: isActive(link.targetId) /* 👈🏻 or link.targetId === activeId */
+      }"
     >
       {{ link.label }}
     </a>
@@ -342,7 +337,44 @@ html {
 </style>
 ```
 
-> :bulb: If you're playing with transitions or advanced styling rules simply leverage _activeIndex_ and _activeId_.
+<details><summary><strong>RouterLink</strong></summary>
+
+<br />
+
+```vue
+<RouterLink
+  @click.native="setActive(link.targetId)"
+  :to="{ hash: `#${link.targetId}` }"
+  :class="{
+    active: isActive(link.targetId)
+  }"
+  :ariaCurrentValue="`${isActive(link.targetId)}`"
+  activeClass=""
+  exactActiveClass=""
+>
+  {{ link.label }}
+</RouterLink>
+```
+
+</details>
+
+<details><summary><strong>NuxtLink</strong></summary>
+
+<br />
+
+```vue
+<NuxtLink
+  @click="setActive(link.targetId)"
+  :href="`#${link.targetId}`"
+  :class="{
+    active: isActive(link.targetId)
+  }"
+>
+  {{ link.label }}
+</NuxtLink>
+```
+
+</details>
 
 <br />
 

demo/App.vue

@@ -55,9 +55,6 @@ provide('DemoRadios', {
 
 * {
 	box-sizing: border-box;
-}
-
-html {
 	scroll-behavior: var(--ScrollBehavior);
 }
 

demo/components/Sidebar/DemoControls.vue

@@ -122,13 +122,20 @@ button {
 	transition: border 100ms ease-in-out, background-color 100ms ease-in-out;
 }
 
+input {
+	margin: 0;
+}
+
 button:hover {
 	border: 1px solid white;
 	background-color: #4a5463;
 }
 
 label {
 	cursor: pointer;
+	display: flex;
+	align-items: center;
+	gap: 5px;
 	padding: 0;
 }
 </style>

demo/components/Sidebar/TOC.vue

@@ -2,6 +2,7 @@
 import { computed, ComputedRef, inject } from 'vue';
 import { useActive } from '../../../src/useActive';
 import animateScrollTo from 'animated-scroll-to';
+import { routerKey, useRoute } from 'vue-router';
 
 type TOCData = {
 	menuItems: { label: string; href: string }[];
@@ -25,8 +26,10 @@ const { activeIndex, activeId, setActive, isActive } = useActive(targets, {
 	}, */
 });
 
+const route = useRoute();
+
 const activeItemHeight = computed(
-	() => document.querySelector(`a[href="#${activeId.value}"]`)?.scrollHeight || 0
+	() => document.querySelector(`a[href="${route.path}#${activeId.value}"]`)?.scrollHeight || 0
 );
 
 function customScroll(id: string) {
@@ -50,15 +53,18 @@ const onClick = computed(() => (clickType.value === 'native' ? setActive : custo
 			<span v-if="activeIndex >= 0" class="Tracker" />
 
 			<li v-for="item in menuItems" :key="item.href">
-				<a
-					@click="onClick(item.href)"
-					:href="`#${item.href}`"
+				<RouterLink
+					@click.native="onClick(item.href)"
+					:ariaCurrentValue="`${isActive(item.href)}`"
+					:to="{ hash: `#${item.href}` }"
 					:class="{
 						Active: isActive(item.href),
 					}"
+					activeClass=""
+					exactActiveClass=""
 				>
 					{{ item.label }}
-				</a>
+				</RouterLink>
 			</li>
 		</ul>
 	</nav>
@@ -101,8 +107,10 @@ a {
 	--webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-a:hover {
-	color: white;
+@media (hover: hover) {
+	a:hover {
+		color: white;
+	}
 }
 
 .Active {

demo/useFakeData.ts

@@ -11,13 +11,11 @@ export function useFakeData() {
 	const maxText = isMobile ? 100 : 320;
 
 	const sections = reactive(
-		Array.from({ length: parsedLength <= 1 ? 10 : parsedLength }, (_, index) => {
-			return {
-				id: `title_${parsedStart + index}`,
-				title: `${parsedStart + index} `.repeat(6).toUpperCase(),
-				text: 'Text '.repeat(getInt(minText, maxText)),
-			};
-		})
+		Array.from({ length: parsedLength <= 1 ? 10 : parsedLength }, (_, index) => ({
+			id: `title_${parsedStart + index}`,
+			title: `${parsedStart + index} `.repeat(6).toUpperCase(),
+			text: 'Text '.repeat(getInt(minText, maxText)),
+		}))
 	);
 
 	const lastNum = computed(() => parseInt(sections[sections.length - 1].title));

src/useScroll.ts

@@ -83,7 +83,7 @@ export function useScroll({ isHTML, root, _setActive, matchMedia }: UseListeners
 	}
 
 	onMounted(() => {
-		if (matchMedia.value && window.location.hash) {
+		if (matchMedia.value && location.hash) {
 			// Wait for any eventual scroll to hash triggered by browser to end
 			setReady(10);
 		} else {