Nuxt는 필요한 경우 전체 화면 오류 페이지를 표시하는 빠르고 간단한 방법을 제공한다. 페이지, 컴포넌트 및 플러그인 내에서 오류를 표시하는데 showError 를 사용할 수 있다. 매개변수 error type : string | Error | Partial showError("😱 Oh no, an error has been thrown.") showError({ statusCode: 404, statusMessage: "Page Not Found" }) 오류는 useError() 을 사용하여 상태에 설정되어 컴포넌트 전반에 걸쳐 반응적이고 SSR 친화적인 공유 오류 상태를 생성한다. 참고) Nuxt-개요 > 오류 처리

Nuxt는 최고 수준의 서버 측 렌더링 지원을 위한 컴포저블과 유틸리티를 제공한다. setResponseStatus 응답의 statusCode(선택적으로 statusMessage)를 설정한다. const event = useRequestEvent() // Set the status code to 404 for a custom 404 page setResponseStatus(event, 404) // Set the status message as well setResponseStatus(event, 404, 'Page Not Found') 브라우저에서는 setResponseStatus 효과가 없다.

setPageLayout을 사용하면 페이지 레이아웃을 동적으로 변경할 수 있다. setPageLayout 은 Nuxt 컨텍스트 접근에 의존적이며 컴포넌트 내 setup 함수, 플러그인 및 경로 미들웨어. 에서만 호출할 수 있다. // middleware/custom-layout.ts export default defineNuxtRouteMiddleware((to) => { // Set the layout on the route you are navigating _to_ setPageLayout('other') }) 서버 측에서 레이아웃을 동적으로 설정하기로 선택한 경우 반드시 Vue에서 하이드레인션 불일치를 방지하기 위해 레이아웃을 렌더링하기 전에 해야 한다(즉, 플러그인 또는 경로 미들웨어 내에서)

reloadNuxtApp 은 앱을 강제로 다시 로드하여 서버에서 페이지와 해당 종속 항목을 다시 요청다. 기본적으로 앱의 현재 state(즉, 액세스할 수 있는 모든 상태 useState )도 저장됩니다. nuxt.config 파일에서 experimental.restoreState 옵션을 활성화하여 이 실험적 기능을 활성화할 수 있다. Type reloadNuxtApp(options?: ReloadNuxtAppOptions) interface ReloadNuxtAppOptions { ttl?: number force?: boolean path?: string persistState?: boolean } options(선택 사항) type : ReloadNuxtAppOptions (다음 속성을 허용하는 객..

refreshNuxtData는 서버에서 모든 데이터를 다시 가져오고 페이지를 업데이트한다. refreshNuxtData 은 서버에서 모든 데이터를 다시 가져오고 페이지를 업데이트하며, useAsyncData, useLazyAsyncData, useFetch 및 useLazyFetch 의 캐시를 무효화 시킨다. Type refreshNuxtData(keys?: string | string[]) 매개변수 keys (선택 사항) : refreshNuxtData 단일 또는 문자열 배열을 key 값으로 선택합니다. key 가 지정되지 않으면 모든 useAsyncData 및 useFetch 는 다시 페치를 시작한다. type : String | String[] 모든 데이터 초기화 아래 예에서는 현재 페이지에서 us..

prerenderRoutes는 추가 경로를 사전 렌더링하기 위해 Nitro 에 힌트를 준다. 사전 렌더링 시 해당 URL이 생성된 페이지의 HTML에 표시되지 않더라도 추가 경로를 사전 렌더링하도록 Nitro 에 힌트를 줄 수 있다. const route = useRoute() prerenderRoutes('/') prerenderRoutes(['/', '/about']) 브라우저 혹은 외부에서 호출 되는 prerenderRoutes 는 아무 효과가 없다.

preloadRouteComponents를 사용하면 Nuxt 앱의 개별 페이지를 수동으로 미리 로드할 수 있다. 경로를 미리 로드하면 사용자가 나중에 탐색할 수 있는 특정 경로의 컴포넌트가 로드됩니다. 이렇게 하면 구성 요소를 더 빨리 사용할 수 있고 탐색을 차단할 가능성이 줄어들어 성능이 향상된다. Nuxt 는 NuxtLink 구성 요소를 사용하는 경우 필요한 경로를 이미 자동으로 미리 로드한다. 참고) Nuxt-Component > NuxtLink 사용 예 navigateTo 사용 시 경로를 미리 로드 // we don't await this async function, to avoid blocking rendering // this component's setup function preloadRou..

Nuxt는 미리 로드된 컴포넌트를 제어할 수 있는 유틸리티를 제공한다. 컴포넌를 미리 로드하면 페이지에 곧 필요할 컴포넌트(렌더링 수명 주기 초기에 로드를 시작하려는 구성 요소)가 로드된다. 이렇게 하면 더 빨리 사용할 수 있고 페이지 렌더링을 차단할 가능성이 낮아져 성능이 향상된다. preloadComponents 를 사용하여 Nuxt 앱에 전역적으로 등록된 개별 구성 요소를 수동으로 미리 로드하자. 기본적으로 Nuxt 는 이를 비동기 컴포넌트로 등록합니다. 파스칼 형식의 구성요소 이름을 사용해야 한다. await preloadComponents('MyGlobalComponent') await preloadComponents(['MyGlobalComponent1', 'MyGlobalComponent2'..

Nuxt 는 컴포넌트를 프리페치 할 수 있는 유틸리티를 제공한다. 프리페칭 컴포넌트는 백그라운드에서 코드를 다운로드한다. 이는 구성 요소가 렌더링에 사용될 가능성이 높다는 가정을 기반으로 하며 사용자가 요청할 경우 컴포넌트가 즉시 로드될 수 있도록 한다. 사용자가 명시적으로 요청하지 않고도 향후 사용을 위해 컴포넌트가 다운로드되고 캐시된다. prefetchComponents 를 사용하여 Nuxt 앱에 전역적으로 등록된 개별 구성 요소를 수동으로 미리 가져온다. 기본적으로 Nuxt 는 이를 비동기 컴포넌트로 등록합니다. 파스칼 형식의 컴포넌트 이름을 사용해야 한다. await prefetchComponents('MyGlobalComponent') await prefetchComponents(['MyGlob..

onNuxtReady 컴포저블을 사용하면 앱 초기화가 완료된 후 콜백을 실행할 수 있다. onNuxtReady 는 클라이언트 측에서만 실행된다. 앱의 초기 렌더링을 차단하지 않는 코드를 실행하는 데 이상적이다. // plugins/ready.client.ts export default defineNuxtPlugin(() => { onNuxtReady(async () => { const myAnalyticsLibrary = await import('my-big-analytics-library') // do something with myAnalyticsLibrary }) }) 앱이 초기화된 후 안전하게 실행된다. 이 경우 다음 idle 콜백에서 실행되도록 코드가 등록된다.

onBeforeRouteUpdate 컴포저블을 사용하면 구성요소 내에 경로 가드를 등록할 수 있다. 현재 위치가 업데이트될 때마다 트리거되는 탐색 가드를 추가한다. beforeRouteUpdate 와 유사하지만 모든 컴포넌트에서 사용할 수 있다. 구성요소가 마운트 해제되면 가드가 제거된다. onBeforeRouteUpdate(updateGuard): void 매개변수​ Name Type Description updateGuard NavigationGuard 내비게이션가드 반환값​ void

onBeforeRouteLeave 컴포저블을 사용하면 구성요소 내에 경로 가드를 등록할 수 있다. onBeforeRouteLeave(leaveGuard): void 현재 위치의 컴포넌트가 떠날 때마다 트리거되는 탐색 가드를 추가한다. beforeRouteLeave와 유사하지만 모든 컴포넌트에서 사용할 수 있다. 컴포넌트가 마운트 해제되면 가드가 제거된다. 매개변수​ Name Type Description leaveGuard NavigationGuard NavigationGuard 반환값​ void

navigateTo는 프로그래밍 방식으로 사용자를 탐색하는 헬퍼 함수다. 서버 측과 클라이언트 측 모두에서 사용할 수 있다. 사용법 Vue 컴포넌트 내에서 라우트 미들웨어 내에서 export default defineNuxtRouteMiddleware((to, from) => { if (to.path !== '/search') { // setting the redirect code to '301 Moved Permanently' return navigateTo('/search', { redirectCode: 301 }) } }) 참고) Nuxt-Directory > middleware 외부 URL open() 사용 Type navigateTo(to: RouteLocationRaw | undefined |..

페이지 수준에서 하이브리드 렌더링을 위한 라우팅 규칙을 정의한다. 실험적인 기능으로 사용하려면 nuxt.config 에서 experimental.inlineRouteRules 옵션을 활성화해야 한다. 사용법 Hello world! 다음과 같다. export default defineNuxtConfig({ routeRules: { '/': { prerender: true } } })

페이지 구성 요소에 대한 메타데이터를 정의한다. definePageMeta은 pages/ 디렉토리에 있는 페이지 컴포넌트에 대한 메타데이터를 설정하는 데 사용할 수 있는 컴파일러 매크로이다. 이 방법으로 Nuxt 애플리케이션의 각 정적 또는 동적 경로에 대한 사용자 정의 메타데이터를 설정할 수 있다. Type definePageMeta(meta: PageMeta) => void interface PageMeta { validate?: (route: RouteLocationNormalized) => boolean | Promise | Partial | Promise redirect?: RouteRecordRedirectOption name?: string path?: string alias?: string..

defineNuxtRouteMiddleware 헬퍼 함수를 사용하여 명명된 경로 미들웨어를 만든다. 경로 미들웨어는 Nuxt 애플리케이션의 middleware/ 에 저장됩니다(달리 설정하지 않는 한). 매개변수 middleware : 두 개의 Vue Router의 경로 위치 객체를 매개변수로 사용하는 함수: 첫 번째 경로는 다음 경로 to이고, 현재 경로는 from. type : RouteMiddleware Vue Router 문서에서 RouteLocationNormalized의 사용 가능한 속성에 대해 알 수 있다. 사용 예 오류 페이지 표시 경로 미들웨어를 사용하여 오류를 발생시키고 유용한 오류 메시지를 표시할 수 있다. // middleware/error.ts export default define..

defineNuxtComponent()는 옵션 API를 사용하여 유형이 안전한 구성 요소를 정의하기 위한 헬퍼 함수이다. defineNuxtComponent()은 defineComponent() 과 유사하며, 옵션 API를 사용한 유형이 안전한 Vue 컴포넌트를 정의하기 위한 헬퍼 함수이다. defineNuxtComponent() 래퍼 함수는 asyncData 및 head 컴포넌트 옵션에 대한 지원도 추가한다. head() 앱에서 setup() 을 사용하지 않기로 선택한 경우 컴포넌트 정의 내에서 head() 메소드를 사용할 수 있다.

이 함수를 사용하면 추가 메타데이터가 포함된 오류 개체를 만들 수 있다. 앱의 Vue 및 Nitro 부분 모두에서 사용할 수 있으며 throw 되게 되어있다. 매개변수 err : { cause, data, message, name, stack, statusCode, statusMessage, fatal } Vue 앱에서 createError 로 생성된 오류가 발생하는 경우: 서버 측에서는 clearError으로 지울 수 있는 전체 화면 오류 페이지가 실행된다. 클라이언트 측에서는 사용자가 처리할 수 있는 치명적이지 않은 오류가 발생한다. 전체 화면 오류 페이지를 실행해야 하는 경우 fatal: true 를 설정하여 수행할 수 있다. 사용 예 API 경로에서 createError 를 사용하여 서버 API ..

useState의 캐시된 상태를 삭제한다. 이 방법은 useState의 상태를 무효화하려는 경우에 유용하다. Type clearNuxtState (keys?: string | string[] | ((key: string) => boolean)): void 매개변수 keys: 캐시된 상태를 삭제하기 위해 useState 에서 사용되는 키 하나 또는 배열이다. 키가 제공되지 않으면 모든 상태가 무효화된다.

캐시된 데이터, 오류 상태, useAsyncData 및 useFetch의 보류 중인 약속을 삭제한다. 이 방법은 다른 페이지에 대한 데이터 가져오기를 무효화하려는 경우에 유용하다. Type clearNuxtData (keys?: string | string[] | ((key: string) => boolean)): void 매개변수 keys: 캐시된 데이터를 삭제하기 위해 useAsyncData 에서 사용되는 키 하나 또는 배열입니다. 키가 제공되지 않으면 모든 데이터가 무효화된다.