extendPages

Nuxtでは、pagesディレクトリ内のファイル構造に基づいてルートが自動的に生成されます。しかし、これらのルートをカスタマイズしたい場合もあります。例えば、Nuxtによって生成されない動的ページのルートを追加したり、既存のルートを削除したり、ルートの設定を変更したりする必要があるかもしれません。このようなカスタマイズのために、NuxtはextendPages機能を提供しており、ページの設定を拡張および変更することができます。

使用法

import { createResolver, defineNuxtModule, extendPages } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options) {
    const { resolve } = createResolver(import.meta.url)

    extendPages((pages) => {
      pages.unshift({
        name: 'prismic-preview',
        path: '/preview',
        file: resolve('runtime/preview.vue'),
      })
    })
  },
})

型

function extendPages(callback: (pages: NuxtPage[]) => void): void

パラメータ

callback: ページ設定と共に呼び出される関数。この配列を追加、削除、または変更することで変更できます。注意: 提供されたページ配列を直接変更する必要があります。コピーした配列に対する変更は設定に反映されません。

extendRouteRules

NuxtはNitroサーバーエンジンによって駆動されています。Nitroを使用すると、リダイレクト、プロキシ、キャッシング、ルートへのヘッダーの追加などのアクションに役立つ高レベルのロジックを直接設定に組み込むことができます。この設定は、ルートパターンを特定のルート設定と関連付けることで機能します。

使用法

import { createResolver, defineNuxtModule, extendPages, extendRouteRules } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options) {
    const { resolve } = createResolver(import.meta.url)

    extendPages((pages) => {
      pages.unshift({
        name: 'preview-new',
        path: '/preview-new',
        file: resolve('runtime/preview.vue'),
      })
    })

    extendRouteRules('/preview', {
      redirect: {
        to: '/preview-new',
        statusCode: 302,
      },
    })

    extendRouteRules('/preview-new', {
      cache: {
        maxAge: 60 * 60 * 24 * 7,
      },
    })
  },
})

型

function extendRouteRules(route: string, rule: NitroRouteConfig, options?: ExtendRouteRulesOptions): void

パラメータ

route: マッチするルートパターン。
rule: マッチしたルートに適用するルートルール設定。

options: ルート設定に渡すオブジェクト。overrideがtrueに設定されている場合、既存のルート設定を上書きします。

addRouteMiddleware

すべてのルートまたは特定のルートに対して利用可能なルートミドルウェアを登録します。

ルートミドルウェアは、addRouteMiddlewareコンポーザブルを介してプラグイン内でも定義できます。

使用法

import { addRouteMiddleware, createResolver, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    const { resolve } = createResolver(import.meta.url)

    addRouteMiddleware({
      name: 'auth',
      path: resolve('runtime/auth'),
      global: true,
    }, { prepend: true })
  },
})

型

function addRouteMiddleware(input: NuxtMiddleware | NuxtMiddleware[], options?: AddRouteMiddlewareOptions): void

パラメータ

input: 次のプロパティを持つミドルウェアオブジェクトまたはミドルウェアオブジェクトの配列:

options: 次のプロパティを持つオブジェクト: