/app.vue 파일 수정 - 내부에 있는 여러 컴포넌트들을 불러오는 통합 컴포넌트(?)

/app.vue

<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

/pages 폴더 생성 후 index.vue 파일 생성 - 메인 페이지

서브페이지는 파일을 생성하는 파일명 기준으로 URL 로 출력된다. 

/pages/about.vue => 주소/about

공통 css 호출 @import url("~/assets/css/common.css");

/pages/index.vue

<template>
  <div class="main-wrap">index</div>
</template>

<script setup>

</script>

<style>
@import url("~/assets/css/common.css");
</style>

/layouts 폴더 생성 후 default.vue 파일 생성 - 공통 레이아웃

/layouts/default.vue

<template>
  <div class="root-wrapper">
    <Header />  <!-- header components -->

    <slot /> <!-- 부모 컴포넌트에서 자식 컴포넌트의 엘리먼트를 지정 -->
  </div>
</template>

css 와 image 는 /assets 폴더에 넣었다.

이미지 호출은 아래와 같이 호출

<img src="~/assets/images/logo.png" alt="" />