Nuxt 컴포넌트 계층

인프런 - nuxt 캡틴판교 강의

컴포넌트 ui 계층은 아래처럼 nuxt에서 정해 놓았다.

- app.vue

- Components

- Pages

- Layouts

네가지로 분류해 두어서 개발자들이 별도로 고민하지 않고 빠르게 개발할 수 있다.

 

1. app.vue

Nuxt는 이 파일을 진입점(entryPoint)으로 처리하고 애플리케이션의 모든 경로에 대한 콘텐츠를 렌더링 한다.

 

nuxt 바로 아래에 app이 있는 걸 확인할 수 있다.

 

2. Components

Button이나 Menu와 같이 재사용 가능한 UI 이다. Nuxt에서 이러한 컴포넌트, 재사용 가능한 컴포넌트의 계층은 컴포넌츠 디렉터리에 생성하도록 가이드를 하고 있다. 해당 컴포넌트는 명시적으로 가져올 필요 없이 애플리케이션 전체에서 자동으로 사용할 수 있다.

 

아래 예시처럼 import를 하지 않아도 자동으로 import된다.

뿐만 아니라 computed라는 vue Api도 import 하지 않아도 바로 사용할 수 있다.

<template>
  <q-layout view="hHh lpR fFf">
    <q-header elevated class="bg-dark text-white">
      <q-toolbar>
        <q-toolbar-title>Vue Master Course</q-toolbar-title>
      </q-toolbar>
    </q-header>
    <q-page-container :style="pageContainerStyle">
      <q-page padding>
        <div class="q-my-xl text-center">
          <div class="text-h4">All Courses</div>
          <p class="q-mt-sm text-grey-8">
            웹 개발 입문부터 실전까지 학습해보세요.
          </p>
        </div>
        <div class="row q-col-gutter-lg">
          <div v-for="n in 3" :key="n" class="col-12 col-md-4 col-sm-6">
            <CourseCard />
          </div>
        </div>
      </q-page>
    </q-page-container>
  </q-layout>
</template>
<script setup lang="ts">
const pageContainerStyle = computed(() => ({
  maxWidth: '1080px',
  margin: '0 auto',
}));
</script>

 

3. Pages

페이지는 특정 URL(route)로 접속 했을 때 해당 URL에 매핑된 페이지 컴포넌트(라우트 컴포넌트)를 말합니다. pages/ 디렉토리의 모든 파일은 파일 이름을 기반으로 URL에 매핑되어 화면에 표시됩니다.

 

페이지를 사용하려면 pages/index.vue파일을 생성하고 <NuxtPage /> 컴포넌트를 app.vue에 추가합니다(또는 기본 항목의 경우 app.vue를 제거). 그렇게 되면 pages/ 디렉토리에 새 파일을 추가하여 더 많은 페이지와 해당 경로(URL)를 생성할 수 있습니다.

 

nuxt에서는 주로 vbase-3-ts-setup으로 사용한다.

 

app.vue

<template>
  <q-layout view="hHh lpR fFf">
    <q-header elevated class="bg-dark text-white">
      <q-toolbar>
        <q-toolbar-title>Vue Master Course</q-toolbar-title>
        <q-btn stretch flat label="Home" to="/" />
        <q-separator dark vertical />
        <q-btn stretch flat label="About" to="/about" />
      </q-toolbar>
    </q-header>
    <q-page-container :style="pageContainerStyle">
      <NuxtPage />
    </q-page-container>
  </q-layout>
</template>
<script setup lang="ts">
const pageContainerStyle = computed(() => ({
  maxWidth: '1080px',
  margin: '0 auto',
}));
</script>

위의 코드는 NuxtPage 컴포넌트가 바로 pages의 index.vue가 자동으로 들어가게 된다.

 

여기서 pages폴더에 about.vue를 만들면 

locahost:8080/about 로 진입이 가능해진다.

폴더 구조에 맞춰 NuxtPage가 자동으로 파일을 렌더링 하는 것이다.

vue 관리도구로 보면 NuxtPage 아래에 About을 확인 할 수 있다. 별도의 라우팅 없이

파일기반 라우팅이 되는 것이 확인된다.

 

4.Layout

레이아웃은 헤더 그리고 푸터와 같이 여러 페이지에 대한 공통된 UI를 말한다. 레이아웃은 페이지 콘텐츠를 표시하기 위해 <slot /> 컴포넌트를 사용하는 Vue 파일이다. 디폴트 레이아웃은 기본적으로 layout/default.vue 파일이 사용 된다. 사용자 정의 레이아웃은 페이지 메타데이터로 설정할 수 있다.

d='

layouts>default.vue

<template>
  <q-layout view="hHh lpR fFf">
    <q-header elevated class="bg-dark text-white">
      <q-toolbar>
        <q-toolbar-title>Vue Master Course</q-toolbar-title>
        <q-btn stretch flat label="Home" to="/" />
        <q-separator dark vertical />
        <q-btn stretch flat label="About" to="/about" />
      </q-toolbar>
    </q-header>
    <q-page-container :style="pageContainerStyle">
      <slot></slot>
    </q-page-container>
  </q-layout>
</template>
<script setup lang="ts">
const pageContainerStyle = computed(() => ({
  maxWidth: '1080px',
  margin: '0 auto',
}));
</script>

해당 레이아웃은 NuxtLayout으로 불러 사용할 수 있다.

slot 부분이 바로 app.vue의 NuxtLayout 태그의 중간이다

 

app.vue

<template>
  <NuxtLayout>
    <NuxtPage />
    <!--layouts>default.vue의 slot부분-->
  </NuxtLayout>
</template>
<script setup lang="ts"></script>

 

이렇게 NuxtPage를 slot이 되는 부분이 넣어주면 Pages를 사용할 수 있다. 여기서 url만 바꿔주면 계속 중간의 컨텐츠가 바뀌는 것이다.