feat: routerMode, fix #143

docs/reference/config.md

@@ -272,6 +272,20 @@ export default defineConfig({
 })
 ```
 
+## `routerMode`
+
+`'history' | 'hash'` - Default: `'history'`
+
+Changes the router mode:
+- `'history'`: HTML 5 history mode with cleaner URLs.
+- `'hash'`: Use the hashtag hack in the URL to support more servers and static hosting services.
+
+```ts
+export default defineConfig({
+  routerMode: 'hash',
+})
+```
+
 ## `vite`
 
 `ViteConfig | ((config: ViteConfig, env: ViteConfigEnv) => void | ViteConfig | Promise<void | ViteConfig>)`

packages/histoire/src/client/app/router.ts

@@ -1,9 +1,19 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
+import { histoireConfig } from './util/config'
 
 export const base = import.meta.env.BASE_URL as string
 
+function createRouterHistory () {
+  switch (histoireConfig.routerMode) {
+    case 'hash': return createWebHashHistory(base)
+    case 'history':
+    default:
+      return createWebHistory(base)
+  }
+}
+
 export const router = createRouter({
-  history: createWebHistory(base),
+  history: createRouterHistory(),
   routes: [
     {
       path: '/',

packages/histoire/src/node/config.ts

@@ -145,6 +145,12 @@ export interface HistoireConfig {
    * Customize the markdown-it renderer
    */
   markdown?: (md: MarkdownIt) => MarkdownIt | Promise<MarkdownIt>
+  /**
+   * Change the router mode.
+   * - history: use HTML history with cleaner URLs
+   * - hash: use hashtag hack in the URL to support more hosting services
+   */
+  routerMode?: 'history' | 'hash'
   /**
    * Vite config override
    */
@@ -264,6 +270,7 @@ export function getDefaultConfig (): HistoireConfig {
       },
     ],
     sandboxDarkClass: 'dark',
+    routerMode: 'history',
   }
 }