feat(nuxt): router with hash mode

[pi0]

🔗 Linked issue

nuxt/nuxt#13821

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This PR adds support for hash history mode for router (client only) with a new option. In order to enable:

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  ssr: false,
  router: {
    options: {
      hashMode: true
    }
  }
})

Remarks:

• This option only works for spa mode
• Implementation of createWebHashHistory is super simple. It basically appends # to the base with location.host and reuse createWebHistory. So there is almost no bundle overhead for this option
• I know, API is not beautiful but this is also an edge option! Later, we might move router.options to app.router this way option would be simpler app.router.hashMode: false instead of router.options.hashMode: false. router.mode from Nuxt 2 is also deprecated. We could portal it but it makes it harder to merge with one options object.

TODO:

• Add example to the docs
• Investigate issue with initial route pushing additional /# each time
• Somehow warn about not using ssr: false with hashMode: true

[netlify]

✅ Deploy Preview for nuxt3-docs ready!

Name	Link
🔨 Latest commit	85ef2f7
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt3-docs/deploys/63145d4fe8d091000810c5b0
😎 Deploy Preview	https://deploy-preview-6980--nuxt3-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[pranavxc]

Thanks for the PR, we have been struggling due to the issue since last week. As a workaround we have updated the build files under node_modules directly ( node_modules/nuxt/dist/pages/runtime/router.mjs ).

For enabling hash-based routing we had modified

import {
  createRouter,
  createWebHistory,
  createMemoryHistory
} from "vue-router";

to

import {
  createRouter,
  createWebHashHistory as createWebHistory,
  createMemoryHistory
} from "vue-router";

And fixed following issue mentioned in PR

Investigate issue with initial route pushing additional /# each time

by changing following

function createCurrentLocation(base, location) {
  const { pathname, search, hash } = location;

to

function createCurrentLocation(base, location) {
  const { pathname, search, hash } = new URL((location.hash || '').replace(/^#/, ''), location.origin);

---

As a temporary workaround it's working 👍 waiting for your PR to merge.

[bcakmakoglu]

@pi0 is there something we could potentially help with to get this PR merged quicker? 😄

[pi0]

WoW I didn't expect this amount of welcoming for this particular feature <3 Surely we can move it to the edge. Only there is an issue that redirects to #/#/ everytime page is refreshed. I'm worried we are missing something. When fixed we can move to the edge.