From 76ebd0fbcda52fad7287fd9d4257de614aa12acd Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Thu, 1 Sep 2022 09:29:21 +0100 Subject: [PATCH 1/9] feat(nuxt): allow fully overriding router history and routes --- packages/nuxt/src/pages/runtime/router.ts | 7 +++---- packages/schema/src/types/router.ts | 6 ++++-- test/fixtures/basic/extends/bar/app/router.options.ts | 4 ++-- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/nuxt/src/pages/runtime/router.ts b/packages/nuxt/src/pages/runtime/router.ts index 32163890039..75a9fc920b0 100644 --- a/packages/nuxt/src/pages/runtime/router.ts +++ b/packages/nuxt/src/pages/runtime/router.ts @@ -55,15 +55,14 @@ export default defineNuxtPlugin(async (nuxtApp) => { nuxtApp.vueApp.component('NuxtChild', NuxtPage) const baseURL = useRuntimeConfig().app.baseURL - const routerHistory = process.client - ? createWebHistory(baseURL) - : createMemoryHistory(baseURL) + const routerHistory = routerOptions.history?.(baseURL) ?? + (process.client ? createWebHistory(baseURL) : createMemoryHistory(baseURL)) const initialURL = process.server ? nuxtApp.ssrContext!.url : createCurrentLocation(baseURL, window.location) const router = createRouter({ ...routerOptions, history: routerHistory, - routes + routes: routerOptions.routes || routes }) nuxtApp.vueApp.use(router) diff --git a/packages/schema/src/types/router.ts b/packages/schema/src/types/router.ts index 03e0fabdc8b..239b9c82981 100644 --- a/packages/schema/src/types/router.ts +++ b/packages/schema/src/types/router.ts @@ -1,7 +1,9 @@ -import type { RouterOptions as _RouterOptions } from 'vue-router' +import type { RouterOptions as _RouterOptions, RouterHistory } from 'vue-router' -export type RouterConfig = Partial> +export type RouterConfig = Partial> & { + history?: (baseURL?: string) => RouterHistory +} /** @deprecated Use RouterConfig instead */ export type RouterOptions = RouterConfig diff --git a/test/fixtures/basic/extends/bar/app/router.options.ts b/test/fixtures/basic/extends/bar/app/router.options.ts index ea8b48b1826..81896aa974c 100644 --- a/test/fixtures/basic/extends/bar/app/router.options.ts +++ b/test/fixtures/basic/extends/bar/app/router.options.ts @@ -1,5 +1,5 @@ -import type { RouterOptions } from '@nuxt/schema' +import type { RouterConfig } from '@nuxt/schema' -export default { +export default { linkExactActiveClass: 'bar-exact-active-class' } From b73bfc240cf3622d8420e6cc93e2ed6fa2eecb58 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Sat, 3 Sep 2022 13:46:02 +0100 Subject: [PATCH 2/9] feat: allow passing a factory function for routes in router.options --- packages/nuxt/src/pages/runtime/router.ts | 4 +++- packages/schema/src/types/router.ts | 3 ++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/nuxt/src/pages/runtime/router.ts b/packages/nuxt/src/pages/runtime/router.ts index 75a9fc920b0..bdb39770e87 100644 --- a/packages/nuxt/src/pages/runtime/router.ts +++ b/packages/nuxt/src/pages/runtime/router.ts @@ -11,7 +11,7 @@ import { withoutBase, isEqual } from 'ufo' import NuxtPage from './page' import { callWithNuxt, defineNuxtPlugin, useRuntimeConfig, showError, clearError, navigateTo, useError, useState } from '#app' // @ts-ignore -import routes from '#build/routes' +import _routes from '#build/routes' // @ts-ignore import routerOptions from '#build/router.options' // @ts-ignore @@ -58,6 +58,8 @@ export default defineNuxtPlugin(async (nuxtApp) => { const routerHistory = routerOptions.history?.(baseURL) ?? (process.client ? createWebHistory(baseURL) : createMemoryHistory(baseURL)) + const routes = !routerOptions.routes ? _routes : Array.isArray(routerOptions.routes) ? routerOptions.routes : routerOptions.routes(_routes) + const initialURL = process.server ? nuxtApp.ssrContext!.url : createCurrentLocation(baseURL, window.location) const router = createRouter({ ...routerOptions, diff --git a/packages/schema/src/types/router.ts b/packages/schema/src/types/router.ts index 239b9c82981..3ccf94c83bd 100644 --- a/packages/schema/src/types/router.ts +++ b/packages/schema/src/types/router.ts @@ -1,8 +1,9 @@ import type { RouterOptions as _RouterOptions, RouterHistory } from 'vue-router' -export type RouterConfig = Partial> & { +export type RouterConfig = Partial> & { history?: (baseURL?: string) => RouterHistory + routes?: _RouterOptions['routes'] | ((scannedRoutes: _RouterOptions['routes']) => _RouterOptions['routes']) } /** @deprecated Use RouterConfig instead */ From 686c324a5517a59c71c64ff211bee632c206f830 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Sat, 3 Sep 2022 15:21:22 +0100 Subject: [PATCH 3/9] fix: support function alone --- packages/nuxt/src/pages/runtime/router.ts | 2 +- packages/schema/src/types/router.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/nuxt/src/pages/runtime/router.ts b/packages/nuxt/src/pages/runtime/router.ts index bdb39770e87..7c6f11dd618 100644 --- a/packages/nuxt/src/pages/runtime/router.ts +++ b/packages/nuxt/src/pages/runtime/router.ts @@ -58,7 +58,7 @@ export default defineNuxtPlugin(async (nuxtApp) => { const routerHistory = routerOptions.history?.(baseURL) ?? (process.client ? createWebHistory(baseURL) : createMemoryHistory(baseURL)) - const routes = !routerOptions.routes ? _routes : Array.isArray(routerOptions.routes) ? routerOptions.routes : routerOptions.routes(_routes) + const routes = !routerOptions.routes ? _routes : routerOptions.routes(_routes) const initialURL = process.server ? nuxtApp.ssrContext!.url : createCurrentLocation(baseURL, window.location) const router = createRouter({ diff --git a/packages/schema/src/types/router.ts b/packages/schema/src/types/router.ts index 3ccf94c83bd..f596da6b9bb 100644 --- a/packages/schema/src/types/router.ts +++ b/packages/schema/src/types/router.ts @@ -3,7 +3,7 @@ import type { RouterOptions as _RouterOptions, RouterHistory } from 'vue-router' export type RouterConfig = Partial> & { history?: (baseURL?: string) => RouterHistory - routes?: _RouterOptions['routes'] | ((scannedRoutes: _RouterOptions['routes']) => _RouterOptions['routes']) + routes?: (scannedRoutes: _RouterOptions['routes']) => _RouterOptions['routes'] } /** @deprecated Use RouterConfig instead */ From 680f17d45509eafe61e72e80edb5ef9bf02df3a8 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Sun, 4 Sep 2022 09:06:17 +0200 Subject: [PATCH 4/9] fix: use resolved routes --- packages/nuxt/src/pages/runtime/router.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/nuxt/src/pages/runtime/router.ts b/packages/nuxt/src/pages/runtime/router.ts index 7c6f11dd618..6e0d719ee9b 100644 --- a/packages/nuxt/src/pages/runtime/router.ts +++ b/packages/nuxt/src/pages/runtime/router.ts @@ -55,16 +55,16 @@ export default defineNuxtPlugin(async (nuxtApp) => { nuxtApp.vueApp.component('NuxtChild', NuxtPage) const baseURL = useRuntimeConfig().app.baseURL - const routerHistory = routerOptions.history?.(baseURL) ?? + const history = routerOptions.history?.(baseURL) ?? (process.client ? createWebHistory(baseURL) : createMemoryHistory(baseURL)) - const routes = !routerOptions.routes ? _routes : routerOptions.routes(_routes) + const routes = routerOptions.routes ? routerOptions.routes(_routes) : _routes const initialURL = process.server ? nuxtApp.ssrContext!.url : createCurrentLocation(baseURL, window.location) const router = createRouter({ ...routerOptions, - history: routerHistory, - routes: routerOptions.routes || routes + history, + routes }) nuxtApp.vueApp.use(router) From 73c31a5399f3af85f66d270ebb8c02ed65ad915e Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Sun, 4 Sep 2022 09:23:33 +0200 Subject: [PATCH 5/9] add docs for custom routes and history --- .../2.guide/3.directory-structure/10.pages.md | 43 +++++++++++++++++-- 1 file changed, 40 insertions(+), 3 deletions(-) diff --git a/docs/content/2.guide/3.directory-structure/10.pages.md b/docs/content/2.guide/3.directory-structure/10.pages.md index e5845521744..dbb27f82fa4 100644 --- a/docs/content/2.guide/3.directory-structure/10.pages.md +++ b/docs/content/2.guide/3.directory-structure/10.pages.md @@ -327,9 +327,7 @@ Learn more about [``](/api/components/nuxt-link) usage. ## Router Options -It is possible to set default [vue-router options](https://router.vuejs.org/api/interfaces/routeroptions.html). - -**Note:** `history` and `routes` options will be always overridden by Nuxt. +It is possible to cutomize [vue-router options](https://router.vuejs.org/api/interfaces/routeroptions.html). ### Using `app/router.options` @@ -343,6 +341,45 @@ export default { } ``` +#### Custom Routes + +:StabilityEdge{title="custom routes"} + +You can optionally override routes using a function that accepts scanned routes and returns customized routes. +If returning a falsy value, Nuxt will fallback to the default routes. (useful to modify input array) + +```js [app/router.options.ts] +import type { RouterConfig } from '@nuxt/schema' + +// https://router.vuejs.org/api/interfaces/routeroptions.html +export default { + routes: (_routes) => [ + { + name: 'home', + route: '/', + component: () => import('~/pages/home.vue') + } + ], +} +``` + +#### Custom History (advanced) + +:StabilityEdge{title="custom history"} + +You can optionally override history mode using a function that accepts base url and returns history mode. +If returning a falsy value, Nuxt will fallback to the default history. + +```js [app/router.options.ts] +import type { RouterConfig } from '@nuxt/schema' +import { createWebHashHistory } from 'vue-router' + +// https://router.vuejs.org/api/interfaces/routeroptions.html +export default { + history: (base) => process.client ? createWebHashHistory(base) : null /* use default */ +} +``` + ### Using `nuxt.config` **Note:** Only JSON serializable options are configurable: From e3c921f2126fea12f90e7c0edb2f200acd271319 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Sun, 4 Sep 2022 09:34:14 +0200 Subject: [PATCH 6/9] allow routes fallback --- packages/nuxt/src/pages/runtime/router.ts | 3 ++- packages/schema/src/types/router.ts | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/nuxt/src/pages/runtime/router.ts b/packages/nuxt/src/pages/runtime/router.ts index 6e0d719ee9b..15e8a69d888 100644 --- a/packages/nuxt/src/pages/runtime/router.ts +++ b/packages/nuxt/src/pages/runtime/router.ts @@ -55,10 +55,11 @@ export default defineNuxtPlugin(async (nuxtApp) => { nuxtApp.vueApp.component('NuxtChild', NuxtPage) const baseURL = useRuntimeConfig().app.baseURL + const history = routerOptions.history?.(baseURL) ?? (process.client ? createWebHistory(baseURL) : createMemoryHistory(baseURL)) - const routes = routerOptions.routes ? routerOptions.routes(_routes) : _routes + const routes = routerOptions.routes?.(_routes) ?? _routes const initialURL = process.server ? nuxtApp.ssrContext!.url : createCurrentLocation(baseURL, window.location) const router = createRouter({ diff --git a/packages/schema/src/types/router.ts b/packages/schema/src/types/router.ts index f596da6b9bb..42c5206e3d7 100644 --- a/packages/schema/src/types/router.ts +++ b/packages/schema/src/types/router.ts @@ -3,7 +3,7 @@ import type { RouterOptions as _RouterOptions, RouterHistory } from 'vue-router' export type RouterConfig = Partial> & { history?: (baseURL?: string) => RouterHistory - routes?: (scannedRoutes: _RouterOptions['routes']) => _RouterOptions['routes'] + routes?: (_routes: _RouterOptions['routes']) => _RouterOptions['routes'] } /** @deprecated Use RouterConfig instead */ From 535cf66fedf54201a2b3ba86021383d4950a56f0 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Sun, 4 Sep 2022 09:37:19 +0200 Subject: [PATCH 7/9] be more precise about return value --- docs/content/2.guide/3.directory-structure/10.pages.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/content/2.guide/3.directory-structure/10.pages.md b/docs/content/2.guide/3.directory-structure/10.pages.md index dbb27f82fa4..e14db7392d6 100644 --- a/docs/content/2.guide/3.directory-structure/10.pages.md +++ b/docs/content/2.guide/3.directory-structure/10.pages.md @@ -346,7 +346,7 @@ export default { :StabilityEdge{title="custom routes"} You can optionally override routes using a function that accepts scanned routes and returns customized routes. -If returning a falsy value, Nuxt will fallback to the default routes. (useful to modify input array) +If returning `null` or `undefined`, Nuxt will fallback to the default routes. (useful to modify input array) ```js [app/router.options.ts] import type { RouterConfig } from '@nuxt/schema' @@ -368,7 +368,7 @@ export default { :StabilityEdge{title="custom history"} You can optionally override history mode using a function that accepts base url and returns history mode. -If returning a falsy value, Nuxt will fallback to the default history. +If returning `null` or `undefined`, Nuxt will fallback to the default history. ```js [app/router.options.ts] import type { RouterConfig } from '@nuxt/schema' From 623a27951f7781c7423e5b1bd98a422efa8a4cc2 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Sun, 4 Sep 2022 09:39:58 +0200 Subject: [PATCH 8/9] use RouterOptions as now all options are allowed --- .../2.guide/3.directory-structure/10.pages.md | 12 ++++++------ packages/schema/src/types/router.ts | 5 ++--- .../fixtures/basic/extends/bar/app/router.options.ts | 4 ++-- 3 files changed, 10 insertions(+), 11 deletions(-) diff --git a/docs/content/2.guide/3.directory-structure/10.pages.md b/docs/content/2.guide/3.directory-structure/10.pages.md index e14db7392d6..30a83ad2cf8 100644 --- a/docs/content/2.guide/3.directory-structure/10.pages.md +++ b/docs/content/2.guide/3.directory-structure/10.pages.md @@ -334,10 +334,10 @@ It is possible to cutomize [vue-router options](https://router.vuejs.org/api/int This is the recommended way to specify router options. ```js [app/router.options.ts] -import type { RouterConfig } from '@nuxt/schema' +import type { RouterOptions } from '@nuxt/schema' // https://router.vuejs.org/api/interfaces/routeroptions.html -export default { +export default { } ``` @@ -349,10 +349,10 @@ You can optionally override routes using a function that accepts scanned routes If returning `null` or `undefined`, Nuxt will fallback to the default routes. (useful to modify input array) ```js [app/router.options.ts] -import type { RouterConfig } from '@nuxt/schema' +import type { RouterOptions } from '@nuxt/schema' // https://router.vuejs.org/api/interfaces/routeroptions.html -export default { +export default { routes: (_routes) => [ { name: 'home', @@ -371,11 +371,11 @@ You can optionally override history mode using a function that accepts base url If returning `null` or `undefined`, Nuxt will fallback to the default history. ```js [app/router.options.ts] -import type { RouterConfig } from '@nuxt/schema' +import type { RouterOptions } from '@nuxt/schema' import { createWebHashHistory } from 'vue-router' // https://router.vuejs.org/api/interfaces/routeroptions.html -export default { +export default { history: (base) => process.client ? createWebHashHistory(base) : null /* use default */ } ``` diff --git a/packages/schema/src/types/router.ts b/packages/schema/src/types/router.ts index 42c5206e3d7..52980134f35 100644 --- a/packages/schema/src/types/router.ts +++ b/packages/schema/src/types/router.ts @@ -1,13 +1,12 @@ import type { RouterOptions as _RouterOptions, RouterHistory } from 'vue-router' -export type RouterConfig = Partial> & { +export type RouterOptions = Partial> & { history?: (baseURL?: string) => RouterHistory routes?: (_routes: _RouterOptions['routes']) => _RouterOptions['routes'] } -/** @deprecated Use RouterConfig instead */ -export type RouterOptions = RouterConfig +export type RouterConfig = RouterOptions /** * Only JSON serializable router options are configurable from nuxt config diff --git a/test/fixtures/basic/extends/bar/app/router.options.ts b/test/fixtures/basic/extends/bar/app/router.options.ts index 81896aa974c..ea8b48b1826 100644 --- a/test/fixtures/basic/extends/bar/app/router.options.ts +++ b/test/fixtures/basic/extends/bar/app/router.options.ts @@ -1,5 +1,5 @@ -import type { RouterConfig } from '@nuxt/schema' +import type { RouterOptions } from '@nuxt/schema' -export default { +export default { linkExactActiveClass: 'bar-exact-active-class' } From 4fc93058617fb19a5603b60daf8cf6c96af6620e Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Sun, 4 Sep 2022 09:41:20 +0200 Subject: [PATCH 9/9] formatting --- docs/content/2.guide/3.directory-structure/10.pages.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/2.guide/3.directory-structure/10.pages.md b/docs/content/2.guide/3.directory-structure/10.pages.md index 30a83ad2cf8..6a1568e1cc9 100644 --- a/docs/content/2.guide/3.directory-structure/10.pages.md +++ b/docs/content/2.guide/3.directory-structure/10.pages.md @@ -337,7 +337,7 @@ This is the recommended way to specify router options. import type { RouterOptions } from '@nuxt/schema' // https://router.vuejs.org/api/interfaces/routeroptions.html -export default { +export default { } ```