ヘッダー・フッターをコンポーネントに分割

Vue

前回：Vue Routerで画面遷移 - Rails技術ブログ

①ヘッダーとフッター用のファイルを作成・記載。
$ touch app/javascript/components/TheHeader.vue
$ touch app/javascript/components/TheFooter.vue

TheHeader.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>

<style scoped>
</style>

TheFooter.vue

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

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

<style scoped>
</style>


②app/javascript/app.vueで呼び出し。
<template>
  <div class="d-flex flex-column min-vh-100">
    <TheHeader class="mb-auto" />
    <router-view />
    <TheFooter class="mt-auto" />
  </div>
</template>

<script>
import TheHeader from './components/TheHeader'
import TheFooter from './components/TheFooter'

export default {
  components: {
    TheHeader,
    TheFooter
  }
}
</script>

<style scoped>
</style>



参考記事：Narito Blog