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 에서 사용되는 키 하나 또는 배열입니다. 키가 제공되지 않으면 모든 데이터가 무효화된다.

페이지, 구성요소 및 플러그인 내에서 clearError를 사용하여 모든 오류를 지우고 사용자를 리디렉션할 수 있다. 매개변수 options?: 리디렉션할 선택적 경로를 제공할 수 있다(예: '안전한' 페이지로 이동하려는 경우). type : { redirect?: string } // Without redirect clearError() // With redirect clearError({ redirect: '/homepage' }) 오류는 useError() 을 사용하여 상태에 설정된다. clearError 컴포저블은 이 상태를 재설정하고 제공된 옵션을 사용하여 app:error:cleared 후크를 호출한다.

addRouteMiddleware()는 애플리케이션에 미들웨어를 동적으로 추가하는 헬퍼 함수이다. 경로 미들웨어는 Nuxt 애플리케이션의 middleware/ 디렉토리에 저장된 탐색 가드다(달리 설정하지 않는 한). Type addRouteMiddleware (name: string | RouteMiddleware, middleware?: RouteMiddleware, options: AddRouteMiddlewareOptions = {}) 매개변수 name : 문자열이거나 RouteMiddleware 유형의 함수일 수 있다. 함수는 다음 경로 to를 첫 번째 인수로, 현재 경로 from를 두 번째 인수로 사용하며 둘 다 Vue 경로 객체다. type : string | RouteMiddleware 참고..

abortNavigation 은 경로 탐색이 발생하지 않도록 방지하고 매개변수로 설정된 경우 오류를 발생시키는 헬퍼 함수입니다. abortNavigation 은 경로 미들웨어 핸들러 내에서만 사용할 수 있다. Type abortNavigation(err?: Error | string): false 매개변수 err : abortNavigation 에서 발생하는 선택적 오류입니다. type : Error | string 사용 예 err 을 string 으로 오류를 문자열로 전달할 수 있다. // middleware/auth.ts export default defineNuxtRouteMiddleware((to, from) => { const user = useState('user') if (!user.valu..

REST API로 json을 받아 유효성 검사하는 필수 패키지. 설치 Zod는 runtime dependency로 사용하므로 --save-dev가 아닌 바로 install pnpm add zod 사용 import { z } from 'zod'; const productJson = { name: 'jeans', price: 100, }; const productSchema = z.object({ name: z.string(), price: z.number().positive(), // 양수 음수도 구별 가능 }); //type Product = z.infer; const Test1 = () => { const validateProduct = productSchema.safeParse(productJson)..

1. Componentization 가장 중요함: 코딩 후에 refactor도 필요하지만, 우선 처음부터 component화 시키는 것이 중요. 가독성과 코드 재사용을 위해서 반드시 component화 필요. Composable commerce의 필수 요건. 예시 : layout.tsx const Layout = ({ children }) => ( Header content ... ... {children} Footer content ... ... ); export default Layout; 이 파일 하나에 수 천 line 코딩하지 말고, Header와 Footer를 src/components/ 에 코딩 후 import import Header from '@/components/header'; impo..

Nuxt는 ofetch를 사용하여 Vue 앱 또는 API 경로 내에서 HTTP 요청을 만들기 위한 $fetch 헬퍼를 전역적으로 노출한다. 서버 측 렌더링 중에 $fetch 호출하여 내부 API 경로를 가져오면 저장 및 추가적인 API 호출과 같은 관련 함수(요청 에뮬레이션)를 직접 호출한다. useAsyncData 로 래핑하지 않은 채컴포넌트에서 $fetch 를 사용하면 서버에서 클라이언트로 상태를 전송하지 않기 때문에 클라이언트가 데이터를 다시 가져와야 하므로 가져오기가 양쪽에서 실행된다. 따라서 $fetch 를 사용하면 데이터를 두 번 가져온다. 처음에는 서버에서, 그 다음에는 하이드레이션 중에 클라이언트 측에서 다시 가져온다. 구성요소 데이터를 가져올 때 이중 데이터 가져오기를 방지하려면 useF..

useState 컴포저블은 SSR에 적합한 반응형 공유 상태를 생성합니다. 사용법 // Create a reactive state and set default value const count = useState('counter', () => Math.round(Math.random() * 100)) 참고) Nuxt-개요 > 상태관리 useState 내부 데이터는 JSON으로 직렬화되므로 클래스, 함수, 심벌 등 직렬화할 수 없는 어떤 것도 포함하지 않는 것이 중요하다. shallowRef 사용 상태가 적극적으로 반응할 필요가 없다면 useState 와 shallowRef 를 결합할 수 있다. 이렇게 하면 상태에 큰 개체와 배열이 포함된 경우 성능이 향상될 수 있다. const state = useStat..

useSeoMeta 과 마찬가지로 useServerSeoMeta 컴포저블을 사용하면 사이트의 SEO 메타 태그를 TypeScript가 완전히 지원되는 플랫 개체로 정의할 수 있다. 참고 > Nuxt-Composable > useSeoMeta 대부분의 경우 로봇은 초기 로드만 스캔하므로 메타가 반응할 필요가 없다. 따라서 클라이언트에서 아무 작업도 수행하지 않거나 (혹은 head 객체를 반환하는) 성능 중심 유틸리티로 useServerSeoMeta 를 사용하는 것이 좋다. 참고) Nuxt-개요 > SEO 와 Meta

useSeoMeta 컴포저블을 사용하면 사이트의 SEO 메타 태그를 TypeScript가 완전히 지원되는 플랫 객체로 정의할 수 있다. useSeoMeta 를 사용하면 property 대신 name 을 사용하는 것과 같은 일반적인 실수와 오타를 방지할 수 있다. 100개가 넘는 메타 태그가 완전히 입력되어 있기 때문이다. 이는 XSS에 안전하고 TypeScript를 완벽하게 지원하므로 사이트에 메타 태그를 추가하는데 권장되는 방법이다. 참고) Nuxt-개요 > SEO 와 Meta 사용 예 반응형 태그를 삽입할 때는 계산된 getter 구문(() => value)을 사용해야한다. 100개가 넘는 매개변수가 있다. 아래 소스 코드의 전체 매개변수 목록을 참고하자.