[Nuxt3] 디렉토리 구조

[Nuxt3] 디렉토리 구조

https://nuxt.com/docs/guide/directory-structure/nuxt  ├── .nuxt ├── assets ├── components ├── composables ├── layouts ├── middleware ├── modules ├── pages ├── plugins ├── public │ app.vue  │ nuxt.config.ts  │ package-lock.json  │ package.json  │ README.md  │ tsconfig.json

• .nuxt : Vue 애플리케이션을 생성하는데 필요한 모든 것을 포함하는 디렉토리

• .nuxt 디렉토리에 있는 파일은 변경하지 않아야 한다.

• assets : assets/ 디렉토리는 빌드 도구(웹팩 또는 Vite)가 처리할 웹사이트의 모든 자산을 추가하는 데 사용됩니다.

• CSS, SASS, JS, 이미지 등 컴파일되지 않는 파일을 포함하는 디렉토리

• Fonts

• Example : 👉 Read more in Docs > Getting Started > Assets

<template>      <img src="~/assets/img/nuxt.png" alt="Discover Nuxt 3" />  </template>

※ Nuxt는 /assets/my-file.png와 같은 정적 URL에서 assets/ 디렉터리에 있는 파일을 제공하지 않습니다. 정적 URL이 필요한 경우 public/ 디렉터리를 사용하세요.

• components : 페이지로 가져오는 모든 Vue 컴포넌트를 저장하는 디렉토리

• 설정 파일에서 컴포넌트 true로 설정하면 <script>에서 import할 필요 없이 Nuxt가 컴포넌트를 자동으로 가져온다.

• 컴포넌트/디렉토리는 페이지 또는 다른 컴포넌트에서 가져올 수 있는 모든 Vue 컴포넌트를 저장하는 곳이다

• Nuxt는 컴포넌트/디렉토리에 있는 모든 컴포넌트를 자동으로 가져온다 (사용 중인 모듈에 의해 등록된 컴포넌트도 함께).

• 
  
  

• composables : 재사용 가능한 함수 등을 저장하는 디렉토리

• Nuxt 3는 composables/ 디렉터리를 사용하여 자동 가져오기를 통해 Vue 컴포저블을 애플리케이션으로 자동으로 가져옵니다!

• 내부적으로 Nuxt는 .nuxt/imports.d.ts 파일을 자동으로 생성하여 유형을 선언합니다.

• Nuxt가 유형을 생성하도록 하려면 nuxi prepare, nuxi dev 또는 nuxi build를 실행해야 한다는 점에 유의해야 한다. 개발 서버를 실행하지 않고 컴포저블을 생성하면 TypeScript에서 'useBar'라는 이름을 찾을 수 없음과 같은 오류가 발생한다

• 사용법

• Method 1: Using named export  (composables/useFoo.ts)

export const useFoo = () => {      return useState('foo', () => 'bar')  }

• Method 2: Using default export  (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')  }

• Usage: You can now use auto imported composable in .js, .ts and .vue files.

<script setup lang="ts">  const foo = useFoo()  </script>  <template>  <div>      {{ foo }}  </div>  </template>

• layouts : 페이지의 구조를 저장하는 디렉토리 (e.g. header, footer)

• middleware : 애플리케이션 전체에 사용자 정의 가능한 경로 미들웨어 프레임워크를 포함할 수 있어 특정 경로를 접근하기 전에 실행하려는 코드를 추출할 수 있다. 이 middleware는 Nuxt 애플리케이션의 Vue 부분인 클라이언트 측에서만 실행된다.

• 경로 미들웨어 3가지

• 익명 경로 미들웨어 : 사용되는 페이지에서 직접 정의

• 명명된 라우트 미들웨어 : 미들웨어/디렉토리에 배치, 페이지에서 사용될 때 비동기로 가져와 자동으로 로드

• 글로벌 라우트 미들웨어 : 미들웨어/디렉토리에 배치, 경로가 변경될 때마다 자동으로 실행

• 처음 두 종류의 라우트 미들웨어는 definePageMeta에서 정의할 수 있습니다.

• modules: Nuxt는 시작하기 전에 모듈/디렉토리를 스캔하고 로드한다. 애플리케이션을 빌드하는 동안 개발한 로컬 모듈을 배치하기에 좋은 위치.

• 자동 등록되는 파일 패턴은 다음과 같습니다:

• modules/*/index.ts

• modules/*.ts

• 이러한 로컬 모듈을 nuxt.config.ts에 별도로 추가할 필요는 없습니다.

• pages : 애플리케이션의 뷰와 경로를 포함하는 디렉토리

• Nuxt는 이 디렉토리 내의 모든 vue 파일을 라우터로 생성한다.

• plugins : 기능을 추가하는 독립형 코드를 담은 디렉토리

• Nuxt는 플러그인 디렉토리에 있는 파일을 자동으로 읽고 Vue를 생성할 때 로드한다. 

• plugins 디렉토리에 있는 모든 플러그인은 자동 등록되므로 nuxt.config.ts에 추가할 필요가 없다.

• public : 서버 루트에 직접 제공하기 때문에 이름을 유지해야 하는 파일(e.g. robots.txt)이나 변경하지 않을 가능성이 높은 파일(e.g. favicon.ico)을 포함하는 디렉토리

• Nuxt 2 버전에서는 static 폴더명으로 사용하였다.

---

• 참고 : Nuxt3 Directory Structure