composables/ 디렉터리를 사용하여 Vue 컴포저블을 애플리케이션에 자동으로 임포트합니다. 사용법 방법 1 : 명명된 내보내기 // composables/useFoo.ts export const useFoo = () => { return useState('foo', () => 'bar') } 방법 2 : 기본 내보내기 // composables/use-foo.ts or composables/useFoo.ts // It will be available as useFoo() (camelCase of file name without extension) export default function () { return useState('foo', () => 'bar') } 이제 자동으로 임포트된 .js, ..

components/ 디렉토리는 모든 Vue 컴포넌트를 저장하는 곳이다. Nuxt 는 이 디렉터리의 모든 컴포넌트(사용 중인 모듈에 의해 등록된 구성 요소와 함께)를 자동으로 가져온다. 디렉토리 구조 | components/ --| AppHeader.vue --| AppFooter.vue 컴포넌트 이름 다음과 같이 중첩된 디렉터리에 컴포넌트가 있는 경우. 디렉토리 구조 | components/ --| base/ ----| foo/ ------| Button.vue 컴포넌트의 이름은 자체 경로 디렉터리와 파일 이름을 기반으로 하며 중복 세그먼트는 제거된다. 따라서 컴포넌트의 이름은 다음과 같다. 명확하게 하기 위해 컴포넌트의 파일 이름이 해당 이름과 일치하는 것이 좋다. 따라서 위의 예에서는 Button...

assets/ 디렉토리는 빌드 도구가 처리할 모든 웹사이트 애셋을 추가하는 데 사용된다. 디렉터리에는 일반적으로 다음과 같은 유형의 파일이 포함된다. 스타일시트(CSS, SASS 등) 글꼴 public/ 디렉토리에서 제공되지 않는 이미지. 서버에서 자산을 제공하려면 public/ 디렉토리를 살펴본다. 참고) Nuxt-개요 > Assets

Nuxt는 프로덕션용 애플리케이션을 구축할 때 .output/ 디렉터리를 생성한다. 이 디렉토리를 .gitignore 파일에 추가하여 빌드 출력을 저장소에 푸시하지 않도록 해야한다. 이 디렉터리를 사용하여 Nuxt 애플리케이션을 프로덕션에 배포다. 참고) Nuxt-개요 > 배포 nuxt build 실행 시 전체 디렉토리가 다시 생성되므로 내부 파일을 건드리면 안된다.

Nuxt는 개발 시 .nuxt/ 디렉토리를 사용하여 Vue 애플리케이션을 생성한다. 이 디렉토리를 .gitignore 파일에 추가하여 개발 빌드 출력을 저장소에 푸시하지 않도록 해야 한다. Nuxt가 디렉토리 구조를 기반으로 생성하는 파일에 대해 더 자세히 알고 싶다면 이 디렉토리가 흥미로울 것이다. Nuxt는 또한 템플릿을 디스크에 쓰지 않고도 이 디렉터리에 템플릿을 추가할 수 있는 모듈용 가상 파일 시스템(VFS)을 제공한다. 개발 모드에서 Nuxt DevTools 를 열고 가상 파일 탭으로 이동하여 생성된 파일을 탐색할 수 있습니다. nuxt dev 실행 시 전체 디렉토리가 다시 생성되므로 내부 파일을 건드리면 안된다.

런타임 시 앱 구성을 업데이트한다. 깊은 할당을 사용하여 app.config 를 업데이트하며, 기존(중첩) 속성은 유지된다. 사용법 const appConfig = useAppConfig() // { foo: 'bar' } const newAppConfig = { foo: 'baz' } updateAppConfig(newAppConfig) console.log(appConfig) // { foo: 'baz' } 참고) Docs > Guide > Directory Structure > App Config