【Vue.js】ヘッダーとフッターをコンポーネントに分ける

はじめに

ヘッダーとフッターをコンポーネントとして分ける。

前提

下記のヘッダーとフッターの部分をコンポーネントとして分けます。

<template>
  <div class="d-flex flex-column min-vh-100">
    <header class="mb-auto">
      <nav class="navbar navbar-dark bg-dark">
        <span class="navbar-brand mb-0 h1">{{ title }}</span>
      </nav>
    </header>
    <div class="text-center">
      <h3>タスクを管理しよう！</h3>
      <div class="mt-4">生活や仕事に関するタスクを見える化して抜け漏れを防ぎましょう。</div>
      <router-link :to="{ name: 'TaskIndex' }" class="btn btn-dark mt-5">はじめる</router-link>
    </div>
    <footer class="mt-auto text-center">
      <small>Copyright &copy; 2020</small>
    </footer>
  </div>
</template>

<script>
export default {
  name: "TopIndex",
  data() {
    return {
      title: "タスク管理アプリ"
    }
  }
}
</script>

<style scoped>
</style>

<template>
  <div>
    <router-view />
  </div>
</template>

ヘッダーとフッターのファイルを作成

新しくcomponentsディレクトリを作って、その配下にヘッダーとフッターのファイルを作成します。

$ mkdir app/javascript/components

$ touch app/javascript/components/TheHeader.vue

$ touch app/javascript/components/TheFooter.vue

コンポーネントを作成

続いて、先程作成したファイルにヘッダーとフッターをコンポーネントとして作成します。

<template>  
  <header>
    <nav class="navbar navbar-dark bg-dark">
      <span class="navbar-brand mb-0 h1">タスク管理アプリ</span>
    </nav>
  </header>
</template> 

<script>
export default {
  name: "TheHeader"
}
</script>

<template>  
  <footer class="text-center">
    <small>Copyright &copy; 2020</small>
  </footer>
</template>

<script>
export default {
  name: "TheFooter"
}
</script>

コンポーネントをローカル登録して呼び出す

javascript/app.vueファイルにヘッダーとフッターのコンポーネントをローカル登録して、テンプレート内で呼び出します。

<template>
  <div class="d-flex flex-column min-vh-100">
    <TheHeader class="mb-auto" />  // コンポーネントを呼び出す
    <router-view />
    <TheFooter class="mb-auto" />  // コンポーネントを呼び出す
  </div>
</template>

<script>
import TheHeader from './components/TheHeader'
import TheFooter from './components/TheFooter'
// 先程作成したファイルからコンポーネントを読み込む

export default {
  components: {    // 読み込んだコンポーネントを定義
    TheHeader,
    TheFooter
  }
}
</script>

javascript/top/index.vueファイルを修正

javascript/top/index.vueファイルからヘッダーとフッターの部分を削除します。

<template>
  <div class="text-center">
    <h3>タスクを管理しよう！</h3>
    <div class="mt-4">生活や仕事に関するタスクを見える化して抜け漏れを防ぎましょう。</div>
    <router-link :to="{ name: 'TaskIndex' }" class="btn btn-dark mt-5">はじめる</router-link>
  </div>
</template>

<script>
export default {
  name: "TopIndex",
}
</script>

<style scoped>
</style>