src/layouts/default.vueとsrc/pages/index.vueを作成してsrc/app.vueに適用してみる | Nuxt3 その0005

参考にさせていただいたページ

• layouts/ · Nuxt Directory Structure

src/app.vueの編集

以下の通り記述しました。

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

src/layouts/default.vue

以下の通り記述しました。

<template>
  <div class="default-layout">
    <div>default-layout</div>
    <ul>
      <li
        v-for="(item, index) in [
          { name: 'home', path: '/'},
        ]"
        :key="index"
      >
        <NuxtLink :to="item.path">{{ item.name }}</NuxtLink>
      </li>
    </ul>
    <slot />
  </div>
</template>

src/pages/index.vue

以下の通り記述しました。

<script setup lang="ts">
const pageName = 'index-page';
</script>

<template>
  <div class="index-page">
    <div>{{ pageName }}</div>
  </div>
</template>

<style scoped lang="scss">
.index-page {
  font-size: 16px;
}
</style>