how can I add keyboard navigation (prev next) to all pages using the router instance from useRouter ?

[vesper8]

I was able to add prev / next keyboard navigation using vanilla js and I'll show below how I did that. But page changes as a result are a bit slow compared to using the internal router. I understand that the router is easily exposed using const router = useRouter(); but I'm confused about where I have to place the logic so that it will be on every page and how to access the current page's prev/next page info so that I can pass it to router.go()

Can someone lend a hand?

This is how I have it working at the moment, I just added this in config.mjs

  head: [
    [
      'script',
      {},
      `
      document.addEventListener('keydown', function(event) {
        const router = useRouter();

        if (event.key === "ArrowRight") {
          var nextPage = document.querySelector('.pager-link.next');
          if (nextPage) {
            window.location.href = nextPage.getAttribute("href");
          }
        } else if (event.key === "ArrowLeft") {
          var prevPage = document.querySelector('.pager-link.prev');
          if (prevPage) {
            window.location.href = prevPage.getAttribute("href");
          }
        }
      });
      `
    ]
  ],

[vesper8]

Figured it out

I extended the default theme and added this i my custom layout's mounted hook

      const router = useRouter();

      document.addEventListener("keydown", function (event) {
        if (event.key === "ArrowRight") {
          var nextPage = document.querySelector(".pager-link.next");
          if (nextPage) {
            router.go(nextPage.getAttribute("href"));
          }
        } else if (event.key === "ArrowLeft") {
          var prevPage = document.querySelector(".pager-link.prev");
          if (prevPage) {
            router.go(prevPage.getAttribute("href"));
          }
        }
      });

Is there a better way to get the next and previous page's paths then reading it from the button?

[brc-dd]

Not rn. Feel free to create a PR to expose https://github.com/vuejs/vitepress/blob/HEAD/src/client/theme-default/composables/prev-next.ts