페이지

Nuxt Kit은 페이지를 생성하고 사용하는 데 도움이 되는 다양한 유틸리티를 제공합니다. 이러한 유틸리티를 사용하여 페이지 구성 설정을 조작하거나 라우트 규칙을 정의할 수 있습니다.

`extendPages`

Nuxt에서는 pages 디렉토리의 파일 구조를 기반으로 라우트가 자동으로 생성됩니다. 하지만 이러한 라우트를 커스터마이즈해야 하는 경우가 있을 수 있습니다. 예를 들어, Nuxt가 자동으로 생성하지 않는 동적 페이지에 대한 라우트를 추가하거나, 기존 라우트를 제거하거나, 라우트의 구성을 수정해야 할 수 있습니다. 이러한 커스터마이즈를 위해 Nuxt는 extendPages 기능을 제공하며, 이를 통해 페이지 구성을 확장하고 변경할 수 있습니다.

extendPages에 대한 Vue School 영상을 시청하세요.

사용법

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: 페이지 구성과 함께 호출되는 함수입니다. 이 배열에 요소를 추가, 삭제 또는 수정하여 변경할 수 있습니다. 참고: 제공된 pages 배열을 직접 수정해야 하며, 복사본을 수정해도 구성에 반영되지 않습니다.

속성	타입	필수	설명
`name`	`string`	`false`	라우트의 이름입니다. 프로그래밍 방식의 네비게이션 및 라우트 식별에 유용합니다.
`path`	`string`	`false`	라우트의 URL 경로입니다. 설정하지 않으면 파일 위치에서 Nuxt가 추론합니다.
`file`	`string`	`false`	라우트의 컴포넌트로 사용할 Vue 파일의 경로입니다.
`meta`	`Record<string, any>`	`false`	라우트에 대한 사용자 정의 메타데이터입니다. 레이아웃, 미들웨어 또는 네비게이션 가드에서 사용 가능합니다.
`alias`	`string[] \| string`	`false`	라우트에 대한 하나 이상의 별칭 경로입니다. 여러 URL을 지원할 때 유용합니다.
`redirect`	`RouteLocationRaw`	`false`	라우트에 대한 리디렉션 규칙입니다. 이름 있는 라우트, 객체 또는 문자열 경로를 지원합니다.
`children`	`NuxtPage[]`	`false`	이 라우트 아래에 중첩된 자식 라우트로, 레이아웃 또는 뷰 중첩에 사용됩니다.

`extendRouteRules`

Nuxt는 Nitro 서버 엔진을 기반으로 동작합니다. Nitro를 사용하면 리디렉션, 프록시, 캐싱, 라우트에 헤더 추가와 같은 고수준의 로직을 구성에 직접 통합할 수 있습니다. 이 구성은 라우트 패턴을 특정 라우트 설정과 연결하여 동작합니다.

Nitro 라우트 규칙에 대해 더 자세히 알고 싶다면 Nitro 문서를 참고하세요.

라우트 규칙 및 라우트 미들웨어 추가에 대한 Vue School 영상을 시청하세요.

사용법

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로 설정되면 기존 라우트 구성을 덮어씁니다.

이름	타입	기본값	설명
`override`	`boolean`	`false`	라우트 규칙 구성을 덮어쓸지 여부, 기본값은 false입니다.

`addRouteMiddleware`

모든 라우트 또는 특정 라우트에 사용할 수 있는 라우트 미들웨어를 등록합니다.

라우트 미들웨어는 addRouteMiddleware 컴포저블을 통해 플러그인에서도 정의할 수 있습니다.

라우트 미들웨어에 대해 더 알아보려면 라우트 미들웨어 문서를 참고하세요.

라우트 규칙 및 라우트 미들웨어 추가에 대한 Vue School 영상을 시청하세요.

사용법

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 })
  },
})

export default defineNuxtRouteMiddleware((to, from) => {
  // isAuthenticated()는 사용자가 인증되었는지 확인하는 예시 메서드입니다.
  if (to.path !== '/login' && isAuthenticated() === false) {
    return navigateTo('/login')
  }
})

타입

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

파라미터

input: 다음 속성을 가진 미들웨어 객체 또는 미들웨어 객체 배열입니다.

속성	타입	필수	설명
`name`	`string`	`true`	미들웨어의 이름입니다.
`path`	`string`	`true`	미들웨어의 파일 경로입니다.
`global`	`boolean`	`false`	`true`로 설정하면 모든 라우트에 미들웨어가 적용됩니다.

options: 다음 속성을 가진 객체입니다.

속성	타입	기본값	설명
`override`	`boolean`	`false`	`true`로 설정하면 동일한 이름의 미들웨어를 대체합니다.
`prepend`	`boolean`	`false`	`true`로 설정하면 기존 미들웨어 앞에 미들웨어를 추가합니다.