ページ · Nuxt Kit

`extendPages`

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

extendPages についての Vue School ビデオをご覧ください。

型

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

type NuxtPage = {
  name?: string
  path: string
  file?: string
  meta?: Record<string, any>
  alias?: string[] | string
  redirect?: RouteLocationRaw
  children?: NuxtPage[]
}

パラメータ

`コールバック`

型: (pages: NuxtPage[]) => void

必須: true

ページ設定を使用して呼び出される関数。要素を追加、削除、または変更することで、この配列を変更できます。注: コピーされた配列に加えられた変更は設定に反映されないため、提供された pages 配列を直接変更する必要があります。

サンプル

// https://github.com/nuxt-modules/prismic/blob/master/src/module.ts
import { createResolver, defineNuxtModule, extendPages } from '@nuxt/kit'

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

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

`extendRouteRules`

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

Nitro ルートルールについて詳しくは、Nitro ドキュメントをご覧ください。

ルートルールとルートミドルウェアの追加について説明した Vue School ビデオをご覧ください。

型

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

interface NitroRouteConfig {
  cache?: CacheOptions | false;
  headers?: Record<string, string>;
  redirect?: string | { to: string; statusCode?: HTTPStatusCode };
  prerender?: boolean;
  proxy?: string | ({ to: string } & ProxyOptions);
  isr?: number | boolean;
  cors?: boolean;
  swr?: boolean | number;
  static?: boolean | number;
}

interface ExtendRouteRulesOptions {
  override?: boolean
}

interface CacheOptions {
  swr?: boolean
  name?: string
  group?: string
  integrity?: any
  maxAge?: number
  staleMaxAge?: number
  base?: string
  headersOnly?: boolean
}

// See https://www.jsdocs.io/package/h3#ProxyOptions
interface ProxyOptions {
  headers?: RequestHeaders | HeadersInit;
  fetchOptions?: RequestInit & { duplex?: Duplex } & {
    ignoreResponseError?: boolean;
  };
  fetch?: typeof fetch;
  sendStream?: boolean;
  streamRequest?: boolean;
  cookieDomainRewrite?: string | Record<string, string>;
  cookiePathRewrite?: string | Record<string, string>;
  onResponse?: (event: H3Event, response: Response) => void;
}

パラメータ

`ルート`

型: string

必須: true

照合するルートパターン。

`ルール`

型: NitroRouteConfig

必須: true

一致したルートに適用するルート構成。

`オプション`

型: ExtendRouteRulesOptions

デフォルト: {}

ルート構成に渡すオプション。 override が true に設定されている場合、既存のルート構成が上書きされます。

サンプル

// https://github.com/directus/website/blob/main/modules/redirects.ts
import { createResolver, defineNuxtModule, extendRouteRules, extendPages } from '@nuxt/kit'

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

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

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

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

`addRouteMiddleware`

すべてのルートまたは特定のルートで使用できるように、ルートミドルウェアを登録します。

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

ルートミドルウェアについて詳しくは、ルートミドルウェアドキュメントをご覧ください。

ルートルールとルートミドルウェアの追加について説明した Vue School ビデオをご覧ください。

型

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

type NuxtMiddleware = {
  name: string
  path: string
  global?: boolean
}

interface AddRouteMiddlewareOptions {
  override?: boolean
  prepend?: boolean
}

パラメータ

`入力`

型: NuxtMiddleware | NuxtMiddleware[]

必須: true

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

name (必須)
型: string
ミドルウェア名。
path (必須)
型: string
ミドルウェアへのパス。
global (オプション)
型: boolean
有効にした場合、すべてのルートで使用できるようにミドルウェアを登録します。

`オプション`

型: AddRouteMiddlewareOptions

デフォルト: {}

override (オプション)
型: boolean
デフォルト: false
有効にした場合、同じ名前の既存のミドルウェアを上書きします。
prepend (オプション)
型: boolean
デフォルト: false
有効にした場合、既存のミドルウェアのリストの先頭にミドルウェアを追加します。

サンプル

export default defineNuxtRouteMiddleware((to, from) => {
  // isAuthenticated() is an example method verifying if a user is authenticated
  if (to.path !== '/login' && isAuthenticated() === false) {
    return navigateTo('/login')
  }
})

コンテキスト

Nuxt Kit は、コンテキストの操作に役立つユーティリティのセットを提供します。

レイアウト

Nuxt Kit は、レイアウトの操作に役立つユーティリティのセットを提供します。