useAsyncData 는 기본적으로 비동기 처리기가 리졸브될 때까지 탐색을 차단한다. lazy 옵션을 true로 설정하여 핸들러가 리졸브되기 전에 탐색을 트리거하는 useAsyncData 래퍼를 제공한다. 참고) Nuxt-Composable > useAsyncData {{ pending ? 'Loading' : count }}

useHydration 은새로운 HTTP 요청이 이루어질 때마다 서버 측에서 데이터를 설정하고 클라이언트 측에서 해당 데이터를 수신하는 방법을 제공하는 내장형 컴포저블이다. useHydration 을 사용하면 하이드레이션 주기를 완전히 제어할 수 있다. 고급 컴포저블이며 대부분 내부적으로(useAsyncData) 또는 Nuxt 모듈에서 사용된다. Type (Signature) useHydration (key: string, get: () => T, set: (value: T) => void) => {} 컴포저블, 플러그인, 컴포넌트 내에서 useHydration() 을 사용할 수 있다. useHydration 세 가지 매개변수를 허용한다: key : Nuxt 애플리케이션의 데이터를 식별하는 고유 키 ty..

useHead 컴포저블 함수를 사용하면 Unhead 에서 제공하는 프로그래밍 방식 및 반응형 방식으로 헤드 태그를 관리할 수 있습니다. 데이터가 사용자 또는 기타 신뢰할 수 없는 소스에서 가져온 경우 useHeadSafe 를 쓰는 것이 좋다. 참고) SEO 와 Meta Type useHead(meta: MaybeComputedRef): void 다음은 useHead 에 대한 비반응형(non-reactive) 유형이다. interface MetaObject { title?: string titleTemplate?: string | ((title?: string) => string) base?: Base link?: Link[] meta?: Meta[] style?: Style[] script?: Scrip..

useHeadSafe 컴포저블은 안전한 값만 허용하도록 입력을 제한하는 useHead 래퍼 컴포저블이다. 사용법 useHead 와 동일한 값을 전달할 수 있다. useHeadSafe({ script: [ { id: 'xss-script', innerHTML: 'alert("xss")' } ], meta: [ { 'http-equiv': 'refresh', content: '0;javascript:alert(1)' } ] }) // Will safely generate // // Type useHeadSafe(input: MaybeComputedRef): void 안전한 값 의 허용 목록은 아래와 같다. export default { htmlAttrs: ['id', 'class', 'lang', 'dir'..

이 컴포저블은 useAsyncData 및 $fetch 를 감싼 형태며, URL 및 가져오기 옵션을 기반으로 자동으로 키를 생성하고, 서버 경로를 기반으로 요청 URL의 유형에 대한 힌트를 제공하고, API 응답 유형을 추론한다. useFetch 는 setup 함수, 플러그인 또는 경로 미들웨어에서 직접 호출되는 컴포저블이다. 반응형 컴포저블을 반환하고 Nuxt 페이로드에 응답을 추가하므로 페이지가 하이드레이션될 때 클라이언트 측에서 데이터를 다시 가져오지 않고도 서버에서 클라이언트로 응답이 전달될 수 있다. 사용법 // pages/index.vue query 옵션을 사용하면 쿼리에 검색 매개변수를 추가할 수 있습니다. 이 옵션은 unjs/ofetch 에서 확장되었으며 unjs/ufo를 사용하여 URL을 ..

컴포저블은 처리 중인 전역 Nuxt 오류를 반환할 수 있으며 클라이언트와 서버 모두에서 사용할 수 있다. const error = useError() useError상태에 오류를 설정하고 구성 요소 전반에 걸쳐 반응적이고 SSR 친화적인 전역 Nuxt 오류를 생성한다. Nuxt 오류에는 다음과 같은 속성이 있다: interface { // HTTP response status code statusCode: number // HTTP response status message statusMessage: string // Error message message: string } 참고) Nuxt-개요 > 오류처리