Jae Front-end Study

Components with Nuxt 3 — Course part 3

https://www.youtube.com/watch?v=o4SkcTupZBo&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=3

유튜브 강의를 참고하고 있습니다.

1. components 폴더 만들기

components 폴더를 만들고, 그 안에 vue 파일을 만든다.

컴포넌트로 사용할 vue 파일의 첫 글자 이름은 반드시 대문자로 한다.

• components/Alert.vue

<template>
  <div class="p-2 bg-slate-500 rounded text-white text-lg font-bold">
    This is an alert component.
  </div>
</template>

• components/Profile/Header/Avatar.vue

<template>
  <div class="p-2 bg-slate-700 rounded text-white text-lg font-bold">
    This is a Profile/Header/Avatar component.
  </div>
</template>

2. 컴포넌트 import 하기

nuxt3에는 auto-importing 기능이 있어 별도의 import문 없이 바로 컴포넌트를 사용할 수 있다.

파일명이 컴포넌트의 이름이 되고, 뎁스 안에 있는 컴포넌트는 '폴더명 폴더명 ... 파일명' 으로 이름을 지으면 된다.

'components/Profile/Header/Avatar.vue' 의 경우 <ProfileHeaderAvatar>가 컴포넌트의 이름이 된다.

• pages/index.vue

<template>
  <Alert/>

  <ProfileHeaderAvatar/>
</template>

결과 화면