About page Home page Transition을 이용하여 페이지와 레이아웃간 트랜지션을 적용할 수 있다. 페이지 트랜지션 (Transition) 페이지 트랜지션 을 활성화하여 모든 페이지에 자동 트랜지션 을 적용할 수 있다. // nuxt.config.ts export default defineNuxtConfig({ app: { pageTransition: { name: 'page', mode: 'out-in' } }, }) 힌트) 페이지뿐만 아니라 레이아웃도 변경하는 경우 여기에서 설정한 페이지 트랜지션 이 실행되지 않는다. 대신 레이아웃 트랜지션 을 설정해야 한다. Home page About page Home page About page 페이지간 탐색 결과 동영상 페이지에 대해 다른 트랜..

기본적으로 Nuxt는 필요한 경우 재정의할 수 있는 기본값을 제공한다. // nuxt.config.ts export default defineNuxtConfig({ app: { head: { charset: 'utf-8', viewport: 'width=device-width, initial-scale=1', } } }) nuxt.config.ts 에 app.head 속성을 제공하면 전체 앱의 헤드를 맞춤설정할 수 있다. 이 메서드를 사용하면 반응형 데이터를 제공할 수 없다. app.vue 에서 useHead() 를 사용하는 것을 권장한다. 보다 쉽게 ​​구성할 수 있는 바로가기: charset 및 viewport. Types 에 아래 나열된 키 중 하나를 제공할 수도 있다 . useHead 컴포저블 함..

Nuxt의 핵심 기능 중 하나는 파일 시스템 라우터이다. pages/ 디렉토리 내의 모든 Vue 파일은 파일 내용을 표시하는 해당 URL(또는 경로)을 생성한다. Nuxt는 각 페이지에 대한 동적 가져오기를 사용하여 코드 분할을 활용하여 요청된 경로에 대해 최소한의 JavaScript를 제공한다. Pages Nuxt 라우팅은 vue-router를 기반으로 하며, 파일 이름을 기반으로 pages/ 디렉터리에 생성된 모든 구성 요소에서 경로를 생성한다. 이 파일 시스템 라우팅은 명명 규칙을 사용하여 동적 및 중첩된(nested) 경로를 생성다. | pages/ ---| about.vue ---| index.vue ---| posts/ -----| [id].vue 아래는 생성된 라우터 파일 { "routes"..

Nuxt는 스타일링에 있어서 매우 유연하다. 자신만의 스타일을 작성하거나 로컬 및 외부 스타일시트를 참조하기 위해서 CSS 전처리기, CSS 프레임워크, UI 라이브러리 및 Nuxt 모듈을 사용하여 애플리케이션 스타일을 지정할 수 있다. 로컬 스타일시트 로컬 스타일시트를 작성하는 경우 이를 배치하는 자연스러운 장소는 assets/ 디렉토리다. 페이지, 레이아웃 및 구성 요소의 스타일시트를 직접 가져올 수 있다. javascript 또는 CSS 문을 임포트 하기위해 @import 문을 사용할 수 있다. 힌트) 위의 경우 스타일시트는 Nuxt가 렌더링한 HTML에 인라인된다. CSS 속성 Nuxt 구성에서 css 속성을 사용할 수도 있다. 스타일시트의 자연스러운 위치는 assets/ 디렉토리다. 이 경우 해..

// scss 인 경우 export default defineNuxtConfig({ vite: { css: { preprocessorOptions: { scss: { additionalData: '@use "~/assets/_colors.scss" as *;' } } } } }) Nuxt는 두 개의 디렉토리를 사용하여 스타일시트, 글꼴 또는 이미지와 같은 애셋을 처리한다. .public/ 디렉터리 콘텐츠는 서버 루트에서 그냥 그대로 제공된다 .assets/ 디렉터리 에는 일반적으로 빌드 도구(Vite 또는 webpack)에서 처리할 모든 애셋이 포함된다 public 디렉토리 public/ 디렉토리는 애플리케이션의 정의된 URL에서 공개적으로 사용 가능한 정적 자산이다. 애플리케이션의 코드나 브라우저의 루..

Nuxt는 애플리케이션의 사용자 인터페이스를 구현하기 위한 여러 구성 요소 레이어를 제공한다. 기본적으로 Nuxt는 이 파일을 진입점 으로 처리 하고 애플리케이션의 모든 경로에 대한 콘텐츠를 렌더링한다. Welcome to the homepage Vue에 익숙하다면 일반적으로 Vue 앱을 생성하는 main.js 파일이 어디에 있는지 궁금할 것이다. Nuxt는 이 작업을 백그라운드에서 수행한다. 컴포넌트 대부분의 컴포넌트, 버튼이나 메뉴와 같이 재사용 가능한 사용자 인터페이스다. Nuxt에서는 이러한 컴포넌트를 components/ 디렉터리에 생성할 수 있으며 명시적으로 임포트할 필요 없이 애플리케이션 전체에서 자동으로 사용할 수 있다. Welcome to the homepage This is an aut..