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..

설치 각 패키지 관리자별로 설치 방법 정리한다. 터미널을 열고, 아래 명령 중 하나를 수행한다. // npx npx nuxi@latest init // pnpm pnpm dlx nuxi@latest init // bun bunx nuxi@latest init VSCode 를 통해 프로젝트를 연다. code 다시 터미널에서 프로젝트의 패키지 의존성을 해결한다. - VSCode, Intellij 에 내장된 터미널을 이용해도 된다. // yarn yarn install // npm npm install // pnpm pnpm install // bun bun install 기본 구성된 어플리케이션 서버 띄우기 - Development Server // yarn yarn dev --open // npm npm ..

Concept 1. Auto-imports Nuxt는 컴포넌트, 컴포저블, 헬퍼함수 및 Vue API 를 자동으로 임포트 한다. 간단한 예를 들면 아래와 같다. app.vue

Nuxt는 Vue.js 기반의 타입 세이프 하고 성능이 뛰어나며 프로덕션 수준의 풀 스택 웹 애플리케이션과 웹 사이트를 생성할 수 있는 직관적이고 확장 가능한 방법을 갖춘 무료 오픈 소스 프레임워크이다. 개발 시 핫 모듈 교체(HMR) 를 할 수 있으며 기본적으로 서버 측 렌더링을 통해 고성능 애플리케이션을 지원하여, 바로 .vue 소스 파일을 시작할 수 있도록 환경을 제공한다. Nuxt는 공급업체에 종속되지 않으므로(Vendor lock in) 애플리케이션을 어디에나 배포할 수 있다. 자동화와 규칙 Nuxt는 디렉토리 구조를 사용하여 반복적인 작업을 자동화하고 개발자가 기능을 개발하는 데 집중할 수 있도록 한다. 특별한 변경이 필요할 때도 기본 동작을 사용자 정의하고 재정의할 수 있다. 파일 기반 라우..