Nuxt.js는 Vue.js 프레임워크를 기반으로 한 서버 사이드 렌더링을 지원하는 웹 애플리케이션 프레임워크입니다. Nuxt.js에서는 콤포넌트를 사용하여 웹 페이지의 요소들을 재사용하고 코드를 모듈화할 수 있습니다.

Nuxt.js에서의 콤포넌트 생성

Nuxt.js에서 콤포넌트를 생성하려면 components 디렉터리를 사용합니다. 이 디렉터리는 프로젝트 루트 또는 페이지 디렉터리 내에 있을 수 있습니다. 새로운 Vue 컴포넌트를 만들기 위해 components 디렉터리 내에 .vue 파일을 생성합니다. 파일 이름은 파스칼 케이스로 작성하고, 콤포넌트의 이름을 나타내는 것이 좋습니다.

components/
|-- MyComponent.vue

Nuxt.js에서의 콤포넌트 사용

콤포넌트를 사용하기 위해 필요한 첫 번째 단계는 해당 콤포넌트를 import하는 것입니다. script 영역에서 import 명령문을 사용하여 콤포넌트를 가져올 수 있습니다.

import MyComponent from '~/components/MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}

두 번째 단계는 템플릿 영역에서 해당 콤포넌트를 사용하는 것입니다. 콤포넌트를 해당 Vue 인스턴스의 템플릿에서 사용하려면 컴포넌트의 태그를 작성하면 됩니다.

<template>
  <div>
    <MyComponent/>
  </div>
</template>

Nuxt.js에서의 전역 콤포넌트 사용

특정 콤포넌트를 여러 페이지에서 사용하려면 해당 콤포넌트를 전역으로 등록해야 합니다. Nuxt.js에서는 plugins 디렉터리를 사용하여 전역 콤포넌트를 등록할 수 있습니다.

먼저, plugins 디렉터리 내에 콤포넌트 등록을 위한 JavaScript 파일을 생성합니다.

plugins/myComponent.js

import Vue from 'vue'
import MyComponent from '~/components/MyComponent.vue'

Vue.component('my-component', MyComponent)

그런 다음, nuxt.config.js 파일에 해당 플러그인을 추가합니다.

export default {
  plugins: ['~/plugins/myComponent.js']
}

이제 MyComponent 콤포넌트를 어느 페이지에서든 사용할 수 있습니다.

이제 여러분은 Nuxt.js에서의 콤포넌트 생성과 사용하는 방법을 알게 되었습니다. 이를 통해 코드의 재사용성을 향상시키고, 애플리케이션을 구조화하는 데 도움이 될 것입니다.