컴포넌트는 DOM의 다른 위치로 순간 이동한다. Vue 3는 Vue 애플리케이션 외부 DOM의 다른 곳에서 콘텐츠를 렌더링할 수 있는 컴포넌트를 제공한다. 주의) 의 to 에는 CSS 선택기 문자열 또는 실제 DOM 노드가 필요합니다. Nuxt는 현재 body 에 대해서만 텔레포트를 위한 SSR을 지원하며 래퍼 를 사용하는 다른 대상에 대해서는 클라이언트 측 지원을 제공한다. BodyTeleport Open Modal Hello from the modal! Close Client-side Teleport Example 아래 예는 SSR 텔레포트로 body 를 렌더링하고, ClientOnly 를 이용해 body 위에 모달창을 CSR 하는 예제이다. SSR Teleport Hello from a client..

컴포넌트는 태그를 대체할 수 있다. 사용법은 와 거의 동일 하지만 가능한 경우 webp 와 같은 최신 형식을 제공할 수도 있다. 설정 를 쓰기위해서는 Image 모듈을 추가 설치해야한다. npx nuxi@latest module add image

컴포넌트는 기본 태그를 대체할 수 있다. 내장 공급자를 사용하여 로컬 및 원격 이미지 최적화 src 공급자에 최적화된 URL로 변환 width, height 을 기준으로 이미지 크기를 자동으로 조정 sizes 옵션 제공 시 반응형 크기 생성 기본 지연 로딩 및 기타 속성을 지원 설정 를 사용하려면 Nuxt Image 모듈을 설치하고 활성화해야 한다: npx nuxi@latest module add image 사용법 는 (주변 래퍼 없이) 네이티브 img 태그를 직접 출력한다 . 태그를 사용하는 것처럼 사용한다. 아래 결과로 변한다. Props src : 이미지 파일 경로 src 는 public/ 디렉터리의 정적 이미지에 대한 절대 경로 형식이어야 한다 . 그렇지 않으면 또는 URL 로 시작하는 공급자가 ..

아일랜드 컴포넌트를 렌더링할 때 아일랜드 컴포넌트의 콘텐츠는 정적이므로 JS가 클라이언트 측에 다운로드되지 않는다. 속성을 변경하면 아일랜트 컴포넌트를 다시 가져와 다시 렌더링하게 된다. 참고) 이 컴포넌트는 실험적이기 때문에, 사용하려면 nuxt.config 에서 experimental.componentIsland 활성화 시켜야한다. 어플리케이션의 전역스타일이 응답으로 전송된다. 서버 전용 컴포넌트는 를 내부적으로 사용한다. Props name : 렌더링한 컴포넌트의 이름 type : string 필수 lazy : 컴포넌트를 Non-blocking 으로 만든다. type : boolean default : false props : 렌더링할 컴포넌트의 속성 type : Recode source : 렌더링..

Nuxt 문서, 소스 코드 및 소셜 미디어 계정에 대한 링크가 포함되어 있다. 참고) 이 컴포넌트는 nuxt/assets 에 포함되어 있다.

컴포넌트는 onErrorCaptured 를 내부적으로 사용한다. Events @error : 컴포넌트의 기본 슬롯에서 오류가 발생할 때 생기는 이벤트 Slots #error : 오류 발생 시 표시할 대체 컨텐츠를 지정한다. An error occurred: {{ error }} 참고) Docs > Getting Started > Error Handling