mirror of
https://github.com/nuxt/nuxt.git
synced 2025-01-31 15:50:32 +00:00
feat(nuxt 3): support custom router options (#3485)
Co-authored-by: Raja Munisamy <raja.munisamy@carbar.com.au> Co-authored-by: Daniel Roe <daniel@roe.dev>
This commit is contained in:
parent
227ceedebb
commit
f38cacec0f
@ -262,3 +262,34 @@ A simple link to the `index.vue` page in your `pages` folder:
|
|||||||
::alert{type="info"}
|
::alert{type="info"}
|
||||||
Learn more about [`<NuxtLink>`](/docs/usage/nuxt-link) usage.
|
Learn more about [`<NuxtLink>`](/docs/usage/nuxt-link) usage.
|
||||||
::
|
::
|
||||||
|
|
||||||
|
## Router options
|
||||||
|
|
||||||
|
It is possible to set default [vue-router options](https://router.vuejs.org/api/#routeroptions).
|
||||||
|
|
||||||
|
**Note:** `history` and `routes` options will be always overriden by Nuxt.
|
||||||
|
|
||||||
|
### Using `app/router.options`
|
||||||
|
|
||||||
|
This is the recommaned way to specify router options.
|
||||||
|
|
||||||
|
```js [app/router.options.ts]
|
||||||
|
import type { RouterOptions } from 'vue-router'
|
||||||
|
|
||||||
|
// https://router.vuejs.org/api/#routeroptions
|
||||||
|
export default <RouterOptions>{
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Using `nuxt.config`
|
||||||
|
|
||||||
|
**Note:** Only JSON serializable options shall be passed. Non serializable options including `parseQuery`, `scrollBehavior` and `stringifyQuery` should be set using `app/router.options` file.
|
||||||
|
|
||||||
|
```js [nuxt.config]
|
||||||
|
export default defineNuxtConfig({
|
||||||
|
router: {
|
||||||
|
// https://router.vuejs.org/api/#routeroptions
|
||||||
|
options: {}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
@ -59,7 +59,7 @@ export async function resolvePath (path: string, opts: ResolvePathOptions = {}):
|
|||||||
for (const ext of extensions) {
|
for (const ext of extensions) {
|
||||||
// path.[ext]
|
// path.[ext]
|
||||||
const pathWithExt = path + ext
|
const pathWithExt = path + ext
|
||||||
if (!isDirectory && existsSync(pathWithExt)) {
|
if (existsSync(pathWithExt)) {
|
||||||
return pathWithExt
|
return pathWithExt
|
||||||
}
|
}
|
||||||
// path/index.[ext]
|
// path/index.[ext]
|
||||||
@ -82,13 +82,19 @@ export async function resolvePath (path: string, opts: ResolvePathOptions = {}):
|
|||||||
/**
|
/**
|
||||||
* Try to resolve first existing file in paths
|
* Try to resolve first existing file in paths
|
||||||
*/
|
*/
|
||||||
export async function findPath (paths: string[], opts?: ResolvePathOptions): Promise<string|null> {
|
export async function findPath (paths: string|string[], opts?: ResolvePathOptions, pathType: 'file' | 'dir' = 'file'): Promise<string|null> {
|
||||||
|
if (!Array.isArray(paths)) {
|
||||||
|
paths = [paths]
|
||||||
|
}
|
||||||
for (const path of paths) {
|
for (const path of paths) {
|
||||||
const rPath = await resolvePath(path, opts)
|
const rPath = await resolvePath(path, opts)
|
||||||
if (await existsSensitive(rPath)) {
|
if (await existsSensitive(rPath)) {
|
||||||
|
const isDirectory = (await fsp.lstat(rPath)).isDirectory()
|
||||||
|
if (!pathType || (pathType === 'file' && !isDirectory) || (pathType === 'dir' && isDirectory)) {
|
||||||
return rPath
|
return rPath
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { existsSync } from 'fs'
|
import { existsSync } from 'fs'
|
||||||
import { defineNuxtModule, addTemplate, addPlugin, addVitePlugin, addWebpackPlugin } from '@nuxt/kit'
|
import { defineNuxtModule, addTemplate, addPlugin, addVitePlugin, addWebpackPlugin, findPath } from '@nuxt/kit'
|
||||||
import { resolve } from 'pathe'
|
import { resolve } from 'pathe'
|
||||||
import { genDynamicImport, genString, genArrayFromRaw, genImport, genObjectFromRawEntries } from 'knitwork'
|
import { genDynamicImport, genString, genArrayFromRaw, genImport, genObjectFromRawEntries } from 'knitwork'
|
||||||
import escapeRE from 'escape-string-regexp'
|
import escapeRE from 'escape-string-regexp'
|
||||||
@ -75,6 +75,25 @@ export default defineNuxtModule({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// Add router options template
|
||||||
|
addTemplate({
|
||||||
|
filename: 'router.options.mjs',
|
||||||
|
getContents: async () => {
|
||||||
|
// Check for router options
|
||||||
|
const routerOptionsFile = await findPath('~/app/router.options')
|
||||||
|
const configRouterOptions = genObjectFromRawEntries(Object.entries(nuxt.options.router.options)
|
||||||
|
.map(([key, value]) => [key, genString(value as string)]))
|
||||||
|
return [
|
||||||
|
routerOptionsFile ? genImport(routerOptionsFile, 'routerOptions') : '',
|
||||||
|
`const configRouterOptions = ${configRouterOptions}`,
|
||||||
|
'export default {',
|
||||||
|
'...configRouterOptions,',
|
||||||
|
routerOptionsFile ? '...routerOptions' : '',
|
||||||
|
'}'
|
||||||
|
].join('\n')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
// Add middleware template
|
// Add middleware template
|
||||||
addTemplate({
|
addTemplate({
|
||||||
filename: 'middleware.mjs',
|
filename: 'middleware.mjs',
|
||||||
|
@ -11,6 +11,8 @@ import { callWithNuxt, defineNuxtPlugin, useRuntimeConfig, NuxtApp, throwError,
|
|||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import routes from '#build/routes'
|
import routes from '#build/routes'
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
|
import routerOptions from '#build/router.options'
|
||||||
|
// @ts-ignore
|
||||||
import { globalMiddleware, namedMiddleware } from '#build/middleware'
|
import { globalMiddleware, namedMiddleware } from '#build/middleware'
|
||||||
|
|
||||||
declare module 'vue' {
|
declare module 'vue' {
|
||||||
@ -35,6 +37,7 @@ export default defineNuxtPlugin((nuxtApp) => {
|
|||||||
: createMemoryHistory(baseURL)
|
: createMemoryHistory(baseURL)
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
|
...routerOptions,
|
||||||
history: routerHistory,
|
history: routerHistory,
|
||||||
routes
|
routes
|
||||||
})
|
})
|
||||||
|
@ -1,6 +1,21 @@
|
|||||||
import { normalizeURL, withTrailingSlash } from 'ufo'
|
import { normalizeURL, withTrailingSlash } from 'ufo'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
/**
|
||||||
|
* Additional options passed to vue-router
|
||||||
|
*
|
||||||
|
* Note: Only JSON serializable options should be passed by nuxt config.
|
||||||
|
*
|
||||||
|
* For more control, you can use `app/router.optionts.ts` file.
|
||||||
|
*
|
||||||
|
* @see [documentation](https://router.vuejs.org/api/#routeroptions)
|
||||||
|
* @type {import('vue-router').RouterOptions}
|
||||||
|
*
|
||||||
|
* @version 3
|
||||||
|
*/
|
||||||
|
options: {},
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Configure the router mode.
|
* Configure the router mode.
|
||||||
*
|
*
|
||||||
|
Loading…
Reference in New Issue
Block a user