Nuxt는 Nuxt 사용자에게 새로운 패턴을 가능하게 하는 Vue의 새로운 주요 릴리스인 Vue 3를 통합합니다.

Nuxt는 항상 Vue를 프론트엔드 프레임워크로 사용해 왔습니다.

우리가 Vue 위에 Nuxt를 구축하기로 선택한 이유는 다음과 같습니다:

• 데이터의 변화가 인터페이스의 변화를 자동으로 트리거하는 Vue의 반응성 모델.
• 웹의 공통 언어로 HTML을 유지하면서도 컴포넌트 기반 템플릿을 통해 직관적인 패턴을 가능하게 하여 인터페이스를 일관되게 유지하면서도 강력하게 만드는 것.
• 작은 프로젝트에서 대규모 웹 애플리케이션에 이르기까지, Vue는 규모에 맞게 잘 작동하여 애플리케이션이 사용자에게 가치를 지속적으로 제공할 수 있도록 보장합니다.

Nuxt와 함께하는 Vue

단일 파일 컴포넌트

Vue의 단일 파일 컴포넌트 (SFC 또는 *.vue 파일)는 Vue 컴포넌트의 마크업 (<template>), 로직 (<script>) 및 스타일링 (<style>)을 캡슐화합니다. Nuxt는 Hot Module Replacement를 통해 SFC에 대한 제로 구성 경험을 제공합니다.

자동 임포트

Nuxt 프로젝트의 components/ 디렉토리에서 생성된 모든 Vue 컴포넌트는 임포트할 필요 없이 프로젝트에서 사용할 수 있습니다. 컴포넌트가 어디에서도 사용되지 않는 경우, 프로덕션 코드에 포함되지 않습니다.

Vue 라우터

대부분의 애플리케이션은 여러 페이지와 그 사이를 탐색할 방법이 필요합니다. 이를 라우팅이라고 합니다. Nuxt는 pages/ 디렉토리와 명명 규칙을 사용하여 파일에 매핑된 경로를 직접 생성하며, 공식 Vue Router 라이브러리를 사용합니다.

Nuxt 2 / Vue 2와의 차이점

Nuxt 3+는 Vue 3을 기반으로 합니다. 새로운 주요 Vue 버전은 Nuxt가 활용하는 여러 변경 사항을 도입합니다:

• 더 나은 성능
• Composition API
• TypeScript 지원

더 빠른 렌더링

Vue Virtual DOM (VDOM)은 처음부터 다시 작성되어 더 나은 렌더링 성능을 제공합니다. 게다가, 컴파일된 단일 파일 컴포넌트를 사용할 때, Vue 컴파일러는 정적 및 동적 마크업을 분리하여 빌드 시 추가로 최적화할 수 있습니다.

이로 인해 첫 번째 렌더링(컴포넌트 생성)과 업데이트가 더 빨라지고 메모리 사용량이 줄어듭니다. Nuxt 3에서는 더 빠른 서버 사이드 렌더링도 가능합니다.

더 작은 번들

Vue 3과 Nuxt 3에서는 번들 크기 감소에 중점을 두었습니다. 버전 3에서는 템플릿 지시문과 내장 컴포넌트를 포함한 대부분의 Vue 기능이 트리 셰이킹 가능합니다. 사용하지 않는 경우 프로덕션 번들에 포함되지 않습니다.

이렇게 하면 최소한의 Vue 3 애플리케이션은 12 kb gzipped로 줄일 수 있습니다.

Composition API

Vue 2에서 컴포넌트에 데이터와 로직을 제공하는 유일한 방법은 Options API를 통해 data 및 methods와 같은 사전 정의된 속성을 사용하여 템플릿에 데이터를 반환하는 것이었습니다:

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment(){
      this.count++
    }
  }
}

Vue 3에 도입된 Composition API는 Options API를 대체하는 것이 아니라, 애플리케이션 전반에 걸쳐 더 나은 로직 재사용을 가능하게 하며, 복잡한 컴포넌트에서 코드의 관심사를 기준으로 그룹화하는 더 자연스러운 방법을 제공합니다.

<script> 정의에서 setup 키워드와 함께 사용하여, Nuxt 3의 자동 임포트된 반응성 API와 함께 Composition API로 다시 작성된 위의 컴포넌트는 다음과 같습니다:

const count = ref(0)
const increment = () => count.value++

Nuxt의 목표는 Composition API를 중심으로 훌륭한 개발자 경험을 제공하는 것입니다.

• Vue와 Nuxt 내장 composables에서 자동 임포트된 반응성 함수를 사용하세요.
• composables/ 디렉토리에서 자동 임포트된 재사용 가능한 함수를 작성하세요.

TypeScript 지원

Vue 3과 Nuxt 3+는 모두 TypeScript로 작성되었습니다. 완전히 타입이 지정된 코드베이스는 실수를 방지하고 API 사용을 문서화합니다. 이를 활용하기 위해 애플리케이션을 TypeScript로 작성해야 한다는 의미는 아닙니다. Nuxt 3에서는 파일 이름을 .js에서 .ts로 변경하거나 컴포넌트에 <script setup lang="ts">를 추가하여 선택적으로 사용할 수 있습니다.