レイアウト機能

2023年11月8日 07:24

layoutsフォルダに作成しタグで囲む

デフォルトで適用するにはdefault.vue

デフォルト以外を使用する場合

definePageMeta()を使用する

app.vue

<script setup lang="ts">
//型定義をインポートするときは import type
import type {Character} from "@/interfaces";

const SITE_TITLE = "ワンピース";

//キャラクターリストデータ。
useState<Map<number, Character>>(
  "characterList", //ステート名
  (): Map<number, Character> => { //初期値を生成
    const characterListInit = new Map<number, Character>();
    characterListInit.set(1, {id: 1, name: "ルフィ", bounty: 100000000});
    characterListInit.set(2, {id: 2, name: "ゾロ", bounty: 60000000});
    return characterListInit;
  }
);//characterListでデータの取り出しが可
</script>

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

<style>
main {
  border: black 5px solid;
  padding: 10px;
}
#breadcrumbs ul li {
  display: inline;
  list-style-type: none;
}
#breadcrumbs ul {
  padding-left: 0px;
}
#breadcrumbs ul li:before {
  content: " > ";
}
#breadcrumbs ul li:first-child:before {
  content: none;
}
</style>

layouts/default.vue

<template>
  <header>
    <h1>ワンピース!</h1>
  </header>
  <main>
    <slot/>
  </main>
</template>

layouts/character.vue

<template>
  <header>
    <h1>ワンピース!</h1>
  </header>
  <main>
    <h1>キャラクター設定</h1>
    <slot/>
  </main>
</template>

pages/character/characterList.vue

<script setup lang="ts">
import type {character} from "@/interfaces";

definePageMeta({
  layout: "character"
});

//キャラクターリストをステートから取得。
const characterList = useState<Map<number, Character>>("characterList");
</script>

<template>
  <nav id="breadcrumbs">
    <ul>
      <li><NuxtLink v-bind:to="{name: 'index'}">TOP</NuxtLink></li>
      <li>{{PAGE_TITLE}}</li>
    </ul>
  </nav>
  <section>
    <h2>{{PAGE_TITLE}}</h2>
    <p>
      追加は<NuxtLink v-bind:to="{name: 'character-characterAdd'}">こちら</NuxtLink>から
    </p>
    <section>
      <ul>
        <li
          v-for="[id, character] in characterList"
          v-bind:key="id">
          <NuxtLink v-bind:to="{name: 'character-characterDetail-id', params: {id: id}}">
            No:{{id}} {{character.name}}
          </NuxtLink>
        </li>
      </ul>
    </section>
  </section>
</template>

pages/character/characterAdd.vue

<script setup lang="ts">
import type {character} from "@/interfaces";

definePageMeta({
  layout: "character"
});

//ルータオブジェクトを取得。
const router = useRouter();
// router.push() => 指定の居場所へ
// router.back() => 履歴上で１つ前の画面

//キャラクターリストをステートから取得。
const characterList = useState<Map<number, Character>>("characterList");
//入力データと同期させるCharacterオブジェクトの用意。
const character: Character = reactive(
  {
    id: 3,
    name: "",
    bounty: 0,
  }
);
//登録ボタンが押された時の処理。
const onAdd = (): void => {
  characterList.value.set(character.id, character);
  router.push({name: "character-characterList"});
};
</script>

<template>
  <nav id="breadcrumbs">
    <ul>
      <li><NuxtLink v-bind:to="{name: 'index'}">TOP</NuxtLink></li>
      <li><NuxtLink v-bind:to="{name: 'character-characterList'}">キャラクターリスト</NuxtLink></li>
      <li>{{PAGE_TITLE}}</li>
    </ul>
  </nav>
  <section>
    <h2>{{PAGE_TITLE}}</h2>
    <p>
      情報を入力し、登録ボタンをクリックしてください。
    </p>
    <form v-on:submit.prevent="onAdd">
      <table>
        <tr>
          <td>
            <label for="addId">No:</label>
          </td>
          <td>
            <input type="number" id="addId" v-model.number="character.id" required>
          </td>
        </tr>
        <tr>
          <td>
            <label for="addName">名前：</label>
          </td>
          <td>
            <input type="text" id="addName" v-model="character.name" required>
          </td>
        </tr>
        <tr>
          <td>
            <label for="addBounty">懸賞金：</label>
          </td>
          <td>
            <input type="number" id="addBounty" v-model.number="character.bounty" required>
          </td>
        </tr>
      </table>
      <br>
      <button type="submit">登録</button>
    </form>
  </section>
</template>

pages/character/characterDetail/[id].vue

<script setup lang="ts">
import type {Character} from "@/interfaces";

definePageMeta({
  layout: "character"
});

//ルートオブジェクト(ルートに関する情報を取得)を取得。
const route = useRoute();
// route.name => character-characterDetail-id
// route.path => /character/characterDetail/1
// route.params => { id: 1 }

//キャラクターリストをステートから取得。
const characterList = useState<Map<number, Character>>("characterList");
//キャラクターリストから該当キャラクターを取得。
const character = computed(
  (): Character => {
    const id = Number(route.params.id);
    return characterList.value.get(id) as Character;
  }
);

</script>

<template>
  <nav id="breadcrumbs">
    <ul>
      <li><NuxtLink v-bind:to="{name: 'index'}">TOP</NuxtLink></li>
      <li><NuxtLink v-bind:to="{name: 'character-characterList'}">キャラクターリスト</NuxtLink></li>
      <li>{{PAGE_TITLE}}</li>
    </ul>
  </nav>
  <section>
    <h2>{{PAGE_TITLE}}</h2>
    <table>
      <tr>
        <td>No：</td>
        <td>{{character.id}}</td>
      </tr>
      <tr>
        <td>名前：</td>
        <td>{{character.name}}</td>
      </tr>
      <tr>
        <td>懸賞金：</td>
        <td>{{character.bounty}}ベリー</td>
      </tr>
    </table>
  </section>
</template>

ヘッダー情報

useHead()

プロパティに設定したい情報を渡す

titleTemplate

titleのテンプレート設定できる