{"id":16405582,"url":"https://github.com/helltraitor/nuxt-anchorscroll","last_synced_at":"2025-03-16T16:31:56.143Z","repository":{"id":179717163,"uuid":"664038504","full_name":"helltraitor/nuxt-anchorscroll","owner":"helltraitor","description":"Scroll to top and to anchor support for Nuxt","archived":false,"fork":false,"pushed_at":"2025-01-01T15:08:21.000Z","size":1157,"stargazers_count":7,"open_issues_count":3,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-27T11:43:02.187Z","etag":null,"topics":["nuxt","nuxt-module","typescript","vue"],"latest_commit_sha":null,"homepage":"https://stackblitz.com/github/helltraitor/nuxt-anchorscroll","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/helltraitor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-08T18:49:35.000Z","updated_at":"2025-01-01T15:07:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"1553d762-dc69-498a-af25-fd203b3c2417","html_url":"https://github.com/helltraitor/nuxt-anchorscroll","commit_stats":{"total_commits":39,"total_committers":1,"mean_commits":39.0,"dds":0.0,"last_synced_commit":"d61b740e8db7aaa1b9db2dbcf6fefe3d9f462fe4"},"previous_names":["helltraitor/nuxt-anchorscroll"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/helltraitor%2Fnuxt-anchorscroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/helltraitor%2Fnuxt-anchorscroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/helltraitor%2Fnuxt-anchorscroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/helltraitor%2Fnuxt-anchorscroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/helltraitor","download_url":"https://codeload.github.com/helltraitor/nuxt-anchorscroll/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243822295,"owners_count":20353500,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nuxt","nuxt-module","typescript","vue"],"created_at":"2024-10-11T06:06:33.661Z","updated_at":"2025-03-16T16:31:56.133Z","avatar_url":"https://github.com/helltraitor.png","language":"TypeScript","readme":"# nuxt-anchorscroll\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![License][license-src]][license-href]\n[![Nuxt][nuxt-src]][nuxt-href]\n\nThis module provides scroll implementation (scroll to top and scroll to anchor element).\nOriginally it was intended for anchor scrolling that's why it's called `nuxt-anchorscroll`\n\n- [Online playground](https://stackblitz.com/github/helltraitor/nuxt-anchorscroll?file=playground%2Fapp.vue)\n\n## Features\n\n- Configured out of the box\n- Supports both kinds of layouts*\n- Extendable\n\n### Configured out of the box\n\n1. For top scroll - scroll instantly, until top with zero offset, ignore `x` axis\n2. For anchor scroll - scroll smoothly, until top element with zero offset, ignore `x` axis\n3. Surfaces - `html` and `body` elements\n4. General function - scroll to anchor if element exist (uses `route.hash` as selector),\n   otherwise to top - respects page meta `nuxt-anchorscroll` options\n\n### Supports both kinds of layouts*\n\nIn common case, you use cropped html or full html. In first case (you can check this now)\nscroll to anchor will not work. If it so, you can have a minimal setup.\n\nBut in case if anchor scroll is handled (by browser), you need additional setup -\nfull explanation in module playground.\n\n### Extendable\n\nAnchor scroll can be specified for needed route via `matched` field of `NuxtApp.$anchorScroll`\nruntime configuration (default configuration setups before `script setup`)\n\n```ts\nnuxtApp.$anchorScroll!.matched.push(({ path, hash }) =\u003e {\n  // Exit when route is not represent fixed example\n  if (!path.startsWith('/standard/fixed'))\n    return undefined\n\n  if (hash) {\n    // All anchor element on this route is mangled\n    const targetSelector = `#fixed-${hash.slice(1)}`\n    const targetElement = document.querySelector(targetSelector)\n    if (targetElement) {\n      return {\n        toAnchor: {\n          target: targetElement as HTMLElement,\n          scrollOptions: toValue(useNuxtApp().$anchorScroll?.defaults?.toAnchor) ?? {},\n        },\n      }\n    }\n  }\n})\n```\n\nAlso your matched function can specify different surfaces for scrolling.\n\n```ts\nnuxtApp.$anchorScroll!.matched.push(({ path, hash }) =\u003e {\n  // Exit when route is not represent fixed example\n  if (!path.startsWith('/scrollable'))\n    return undefined\n\n  const surfaces = [...document.querySelectorAll('#exited-scrollable-surface')]\n\n  return {\n    toAnchor: {\n      surfaces,\n      scrollOptions: {\n        /* ... */\n      },\n    },\n    toTop: {\n      surfaces,\n      scrollOptions: {\n        /* ... */\n      },\n    }\n  }\n})\n```\n\n## Quick Setup\n\n1. Add `nuxt-anchorscroll` dependency to your project\n\nUse your favorite package manager (I prefer yarn)\n\n```bash\nyarn add -D nuxt-anchorscroll\n\npnpm add -D nuxt-anchorscroll\n\nnpm install --save-dev nuxt-anchorscroll\n```\n\nOr install it via `nuxi module`\n\n```bash\nnpx nuxi@latest module add nuxt-anchorscroll\n```\n\n2. Add `nuxt-anchorscroll` to the `modules` section of `nuxt.config.ts`\n\n```ts\nexport default defineNuxtConfig({\n  modules: [\n    'nuxt-anchorscroll',\n  ]\n})\n```\n\n3. Additionally, if you are using transitions, probably you also want to scroll on different hook\n\n```ts\nexport default defineNuxtConfig({\n  modules: [\n    'nuxt-anchorscroll',\n  ],\n\n  anchorscroll: {\n    hooks: [\n      // Or any valid hook if needed\n      // Default is `page:finish`\n      'page:transition:finish',\n    ],\n  },\n})\n```\n\n4. Additionally, if you using standard layout, see playground explanation.\n\nThat's it! You can now use `nuxt-anchorscroll` in your Nuxt app ✨\n\n## Composable\n\nMost probably that you want to scroll to anchor ro to top on click. That's possible via `useAnchorScroll` composable\n\n```ts\n// Default to top is instant\nconst { scrollToAnchor, scrollToTop } = useAnchorScroll({\n  toTop: {\n    scrollOptions: {\n      behavior: 'smooth',\n      offsetTop: 0,\n    }\n  },\n})\n```\n\nAnd use it in template\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv\n    class=\"box\"\n    mt-12\n    flex flex-row gap-4 align-baseline\n  \u003e\n    \u003ch2\n      :id=\"id\"\n      text-3xl font-extrabold\n    \u003e\n      \u003cslot /\u003e\n    \u003c/h2\u003e\n    \u003cNuxtLink\n      :href=\"`#${id}`\"\n      mb-a mt-a\n      text-xl\n      @click=\"scrollToAnchor(id)\"\n    \u003e\n      #\n    \u003c/NuxtLink\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n\u003c!-- Badges --\u003e\n[npm-version-src]: https://img.shields.io/npm/v/nuxt-anchorscroll/latest.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-version-href]: https://npmjs.com/package/nuxt-anchorscroll\n\n[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-anchorscroll.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-downloads-href]: https://npmjs.com/package/nuxt-anchorscroll\n\n[license-src]: https://img.shields.io/npm/l/nuxt-anchorscroll.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[license-href]: https://npmjs.com/package/nuxt-anchorscroll\n\n[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js\n[nuxt-href]: https://nuxt.com\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhelltraitor%2Fnuxt-anchorscroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhelltraitor%2Fnuxt-anchorscroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhelltraitor%2Fnuxt-anchorscroll/lists"}