Updated: replaced internal plugin by its external implementation

Author: helltraitor

app.vue

@@ -6,11 +6,11 @@ useHead({
   titleTemplate: '%s - Helltraitor',
 })
 
-useNuxtApp().$anchorScroll = {
+useNuxtApp().$anchorScroll!.defaults.toAnchor = () => ({
   behavior: 'smooth',
   // headerHeight + 20%
-  offsetTop: computed(() => -toValue(useNuxtApp().$headerHeight ?? 0) * 1.2),
-}
+  offsetTop: -toValue(useNuxtApp().$headerHeight ?? 0) * 1.2,
+})
 </script>
 
 <template>

components/content/ProseH1.vue

@@ -12,7 +12,7 @@ const ANCHOR_LINK_LEVEL = 1
 const { depth: anchorDepth, exclude: anchorExcluded } = runtimeConfig.public.content.anchorLinks
 const anchorLinkEnabled = ANCHOR_LINK_LEVEL <= anchorDepth && !anchorExcluded.includes(ANCHOR_LINK_LEVEL)
 
-const { scrollToAnchor } = useAnchorScroll(useNuxtApp().$anchorScroll)
+const { scrollToAnchor } = useAnchorScroll()
 </script>
 
 <template>

components/content/ProseH2.vue

@@ -12,7 +12,7 @@ const ANCHOR_LINK_LEVEL = 2
 const { depth: anchorDepth, exclude: anchorExcluded } = runtimeConfig.public.content.anchorLinks
 const anchorLinkEnabled = ANCHOR_LINK_LEVEL <= anchorDepth && !anchorExcluded.includes(ANCHOR_LINK_LEVEL)
 
-const { scrollToAnchor } = useAnchorScroll(useNuxtApp().$anchorScroll)
+const { scrollToAnchor } = useAnchorScroll()
 </script>
 
 <template>

components/content/ProseH3.vue

@@ -12,7 +12,7 @@ const ANCHOR_LINK_LEVEL = 3
 const { depth: anchorDepth, exclude: anchorExcluded } = runtimeConfig.public.content.anchorLinks
 const anchorLinkEnabled = ANCHOR_LINK_LEVEL <= anchorDepth && !anchorExcluded.includes(ANCHOR_LINK_LEVEL)
 
-const { scrollToAnchor } = useAnchorScroll(useNuxtApp().$anchorScroll)
+const { scrollToAnchor } = useAnchorScroll()
 </script>
 
 <template>

components/content/ProseH4.vue

@@ -12,7 +12,7 @@ const ANCHOR_LINK_LEVEL = 4
 const { depth: anchorDepth, exclude: anchorExcluded } = runtimeConfig.public.content.anchorLinks
 const anchorLinkEnabled = ANCHOR_LINK_LEVEL <= anchorDepth && !anchorExcluded.includes(ANCHOR_LINK_LEVEL)
 
-const { scrollToAnchor } = useAnchorScroll(useNuxtApp().$anchorScroll)
+const { scrollToAnchor } = useAnchorScroll()
 </script>
 
 <template>

components/content/ProseH5.vue

@@ -12,7 +12,7 @@ const ANCHOR_LINK_LEVEL = 5
 const { depth: anchorDepth, exclude: anchorExcluded } = runtimeConfig.public.content.anchorLinks
 const anchorLinkEnabled = ANCHOR_LINK_LEVEL <= anchorDepth && !anchorExcluded.includes(ANCHOR_LINK_LEVEL)
 
-const { scrollToAnchor } = useAnchorScroll(useNuxtApp().$anchorScroll)
+const { scrollToAnchor } = useAnchorScroll()
 </script>
 
 <template>

components/content/ProseH6.vue

@@ -12,7 +12,7 @@ const ANCHOR_LINK_LEVEL = 6
 const { depth: anchorDepth, exclude: anchorExcluded } = runtimeConfig.public.content.anchorLinks
 const anchorLinkEnabled = ANCHOR_LINK_LEVEL <= anchorDepth && !anchorExcluded.includes(ANCHOR_LINK_LEVEL)
 
-const { scrollToAnchor } = useAnchorScroll(useNuxtApp().$anchorScroll)
+const { scrollToAnchor } = useAnchorScroll()
 </script>
 
 <template>

composables/anchorscroll.ts

@@ -22,6 +22,7 @@ export default defineNuxtConfig({
     '@nuxt/content',
     '@unocss/nuxt',
     '@vueuse/nuxt',
+    'nuxt-anchorscroll',
   ],
   runtimeConfig: {
     public: {

nuxt.config.ts

@@ -23,6 +23,7 @@
     "@vueuse/nuxt": "^10.2.1",
     "eslint": "^8.43.0",
     "nuxt": "^3.6.0",
+    "nuxt-anchorscroll": "^1.0.0",
     "nuxt-content-assets": "^1.3.2",
     "remark-heading-id": "^1.0.0",
     "sass": "^1.63.6",