public/ 디렉토리는 웹사이트의 정적 자산을 제공하는 데 사용된다. public/ 디렉토리에 포함된 파일은 루트에서 제공되며 빌드 프로세스에 의해 수정되지 않는다. 이는 이름을 유지해야 하는 파일(예: robots.txt) 또는 변경되지 않을 가능성이 있는 파일에 적합하다( 예: favicon.ico). 디렉토리 구조 -| public/ ---| favicon.ico ---| og-image.png ---| robots.txt app.vue Nuxt 2 에서는 static/ 디렉토리였다.

Nuxt에는 Vue 애플리케이션 생성 시 Vue 플러그인 등을 사용할 수 있는 플러그인 시스템이 있다. Nuxt는 자동으로 plugins/ 디렉토리의 파일을 읽고 Vue 애플리케이션 생성 시 이를 로드한다. 내부의 모든 플러그인은 자동으로 등록되므로 nuxt.config 에 별도로 추가할 필요가 없다. 파일 이름에.server 또는 .client 접미사를 사용하여 서버 또는 클라이언트 측에서 플러그인을 로드할 수 있다. 등록된 플러그인 디렉터리의 최상위 수준에 있는 파일(또는 하위 디렉터리 내의 인덱스 파일)만 플러그인으로 자동 등록된다. 디렉토리 구조 -| plugins/ ---| foo.ts // scanned ---| bar/ -----| baz.ts // not scanned -----| foz...

Nuxt는 웹 애플리케이션 내에서 경로를 생성하기 위한 파일 기반 라우팅을 제공한다. 애플리케이션의 번들 크기를 줄이기 위해 이 디렉터리는 선택 사항이다. 즉, app.vue만 사용하는 경우 vue-router가 포함되지 않는다. 페이지 시스템을 강제하려면 nuxt.config에서 페이지를 true로 설정하거나 app/router.options.ts를 설정하자. 페이지는 Vue 구성 요소이며 Nuxt가 지원하는 유효한 확장자(기본적으로 .vue, .js, .jsx, .mjs, .ts 또는 .tsx)를 가질 수 있다. Nuxt는 ~/pages/ 디렉토리의 모든 페이지에 대한 경로를 자동으로 생성한다. pages/index.vue Index page pages/index.ts // pages/index.ts..

패키지 관리자(npm, yarn, pnpm 또는 bun)는 프로젝트의 종속성을 저장하는 node_modules 디렉터리를 만든다. 이 디렉터리를 .gitignore 파일에 추가하여 종속성을 저장소에 푸시하지 않도록 해야한다.

애플리케이션을 구축하는 동안 개발한 로컬 모듈을 배치하기에 좋은 장소이다. 자동 등록된 파일 패턴은 다음과 같습니다. modules/*/index.ts modules/*.ts nuxt.config.ts 에 해당 로컬 모듈을 별도로 추가할 필요는 없다. modules/hello/index.ts // modules/hello/index.ts // `nuxt/kit` is a helper subpath import you can use when defining local modules // that means you do not need to add `@nuxt/kit` to your project's dependencies import { createResolver, defineNuxtModule, addS..

Nuxt는 특정 경로로 이동하기 전에 코드를 실행하기 위한 미들웨어를 제공한다. Nuxt 는 애플리케이션 전체에서 사용할 수 있는 사용자 정의 가능한 경로 미들웨어 프레임워크를 제공하며, 특정 경로로 네비게이션 되기 전에 실행된다. 경로 미들웨어에는 세 가지 종류가 있다. 익명(또는 인라인) 경로 미들웨어는 페이지 내에서 직접 정의됩니다. 명명된 경로 미들웨어는 middleware/ 에 배치되고 페이지에서 사용될 때 비동기 임포트를 통해 자동으로 로드된다. 전역 경로 미들웨어는 middleware/ 접미사 .global 에 배치되고 경로가 변경될 때마다 실행된다. 처음 두 종류의 경로 미들웨어는 definePageMeta 에서 정의할 수 있다. 미들웨어 이름은 kebab-case로 정규화된다. myMid..

Nuxt는 일반적인 UI 패턴을 재사용 가능한 레이아웃으로 추출하는 레이아웃 프레임워크를 제공한다. 최상의 성능을 위해 이 디렉터리에 있는 구성 요소는 사용 시 비동기 가져오기를 통해 자동으로 로드된다. 레이아웃 활성화 레이아웃은 을 app.vue 에 추가하여 활성화된다. 레이아웃을 사용하려면: definePageMeta 를 사용하여 페이지에 layout 속성을 ​​설정한다. 에 name 속성을 설정한다. 레이아웃 이름은 kebab-case로 정규화되므로 someLayout 은 some-layout 이 된다. 레이아웃을 지정하지 않으면 layouts/default.vue 이 사용된다. 애플리케이션에 레이아웃이 하나만 있는 경우 app.vue 를 사용하는 것이 좋다. 다른 구성 요소와 달리 레이아웃에는 N..

local icons checkbox에 사용할 icon을 src/assets/icons/ 폴더에 저장 (폴더 이름은 자유) config tailwind.config.js에 다음 코드를 추가 theme: { extend: { backgroundImage: { 'icon-checkbox': "url('~/src/assets/icons/ico_checkbox.svg')", 'icon-checkbox-on': "url('~/src/assets/icons/ico_checkbox_on.svg')", 'icon-checkbox-dis': "url('~/src/assets/icons/ico_checkbox_dis.svg')", }, 이제 아이콘 이미지를 custom utility class로 사용할 수 있다. css ..

content/ 디렉터리를 사용하여 응용 프로그램에 대한 파일 기반 CMS를 만듭니다. Nuxt Content 는 프로젝트의 content/ 디렉토리를 읽고 , .md, .yml, .csv 및 .json 파일을 사용하여 애플리케이션용 파일 기반 CMS를 만다. 내장된 구성요소를 사용하여 콘텐츠를 렌더링한다. MongoDB와 유사한 API를 사용하여 콘텐츠를 쿼리한다. MDC 구문을 사용하여 Markdown 파일의 Vue 구성 요소를 사용한다. 네비게이션을 자동으로 생성한다. Nuxt 콘텐츠 활성화 프로젝트에 @nuxt/content 모듈을 설치하고 다음 명령을 사용하여 nuxt.config.ts 에 추가한다. # 터미널 npx nuxi module add content 콘텐츠 만들기 마크다운 파일을 co..

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

설치 Composable commerce를 실현하는 가장 핵심적인 패키지. 두 가지 패키지 설치 $ pnpm add tailwind-merge clsx 사용 src/lib/utils.ts 폴더와 파일을 생성 (이 경로를 추천 - Next.js 공식 github) 다음 코드를 입력 import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } 다른 component에서 사용시 import import { cn } from "@/lib/utils"; 더 자세한 사용법은 03. 퍼블 ..

Nuxt는 필요한 경우 전체 화면 오류 페이지를 표시하는 빠르고 간단한 방법을 제공한다. 페이지, 컴포넌트 및 플러그인 내에서 오류를 표시하는데 showError 를 사용할 수 있다. 매개변수 error type : string | Error | Partial showError("😱 Oh no, an error has been thrown.") showError({ statusCode: 404, statusMessage: "Page Not Found" }) 오류는 useError() 을 사용하여 상태에 설정되어 컴포넌트 전반에 걸쳐 반응적이고 SSR 친화적인 공유 오류 상태를 생성한다. 참고) Nuxt-개요 > 오류 처리

Nuxt는 최고 수준의 서버 측 렌더링 지원을 위한 컴포저블과 유틸리티를 제공한다. setResponseStatus 응답의 statusCode(선택적으로 statusMessage)를 설정한다. const event = useRequestEvent() // Set the status code to 404 for a custom 404 page setResponseStatus(event, 404) // Set the status message as well setResponseStatus(event, 404, 'Page Not Found') 브라우저에서는 setResponseStatus 효과가 없다.

setPageLayout을 사용하면 페이지 레이아웃을 동적으로 변경할 수 있다. setPageLayout 은 Nuxt 컨텍스트 접근에 의존적이며 컴포넌트 내 setup 함수, 플러그인 및 경로 미들웨어. 에서만 호출할 수 있다. // middleware/custom-layout.ts export default defineNuxtRouteMiddleware((to) => { // Set the layout on the route you are navigating _to_ setPageLayout('other') }) 서버 측에서 레이아웃을 동적으로 설정하기로 선택한 경우 반드시 Vue에서 하이드레인션 불일치를 방지하기 위해 레이아웃을 렌더링하기 전에 해야 한다(즉, 플러그인 또는 경로 미들웨어 내에서)

reloadNuxtApp 은 앱을 강제로 다시 로드하여 서버에서 페이지와 해당 종속 항목을 다시 요청다. 기본적으로 앱의 현재 state(즉, 액세스할 수 있는 모든 상태 useState )도 저장됩니다. nuxt.config 파일에서 experimental.restoreState 옵션을 활성화하여 이 실험적 기능을 활성화할 수 있다. Type reloadNuxtApp(options?: ReloadNuxtAppOptions) interface ReloadNuxtAppOptions { ttl?: number force?: boolean path?: string persistState?: boolean } options(선택 사항) type : ReloadNuxtAppOptions (다음 속성을 허용하는 객..