npm i -g vue-cli
npm i -g firebase-tools
firebase login

vue init webpack
firebase init

<template>
  <div class="cardsFolder">
    <h1 id="page-title">{{ pageTitle }}</h1>
    <div
      class="card"
      v-for="card in cards"
      :key="card.displayOrder"
    >
      <div class="card__title">{{ card.title }}</div>
      <div class="card__body" v-html="card.body"></div>
      <div class="card__expand-fake-button"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CardsFolder',
  data () {
    return {
      pageTitle: 'aaa',
      cards: [{
        title: 'bbb',
        body: '<span style="color:red">ccc</span>',
        displayOrder: 1
      }]
    }
  }
}
</script>

<template>
  <div id="app">
    <Header/>
    <FixedTop/>
    <router-view :cardsFolder="cardsFolder"/> <!-- ←ここで渡してます -->
  </div>
</template>

<script>
import 'normalize.css'
import Header from '@/components/Header'
import FixedTop from '@/components/FixedTop'
import * as personalJson from '@/assets/personal-public.json'
import * as quittingJson from '@/assets/quitting-public.json'
import * as desireJson from '@/assets/desire-public.json'

export default {
  name: 'App',
  components: {
    Header,
    FixedTop
  },
  data () {
    return {
      cardsFolder: null
    }
  },
  mounted () {
    this.cardsFolder = {
      personal: personalJson,
      quitting: quittingJson,
      desire: desireJson
    }
  }
}
</script>

<template>
  <div class="cardsFolder">
    <h1 id="page-title">{{ pageTitle }}</h1>
    <div
      class="card"
      v-for="card in cards"
      :key="card.displayOrder"
    >
      <div class="card__title">{{ card.title }}</div>
      <div class="card__body" v-html="card.body"></div>
      <div class="card__expand-fake-button"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CardsFolder',
  props: [ 'cardsFolder' ], // ←ここで受け取ってます
  computed: {
    routeName () {
      return this.$route.name
    },
    pageTitle () {
      if (!this.cardsFolder) {
        return null
      }

      switch (this.routeName) { // ←ここと
        case 'AboutMe':
          return this.cardsFolder.personal.pageTitle
        case 'Quitting':
          return this.cardsFolder.quitting.pageTitle
        case 'Desire':
          return this.cardsFolder.desire.pageTitle
      }
    },
    cards () {
      if (!this.cardsFolder) {
        return null
      }

      switch (this.routeName) { // ←ここで取り出してます
        case 'AboutMe':
          return this.cardsFolder.personal.cardsData
        case 'Quitting':
          return this.cardsFolder.quitting.cardsData
        case 'Desire':
          return this.cardsFolder.desire.cardsData
      }
    }
  }
}
</script>

<template>
  <header class="header">
    <!-- （略...） -->
    <BaseModal v-if="loginModalState" @close="closeContactModal()">
      <BaseContact/>
    </BaseModal>
  </header>
</template>

<template>
  <transition name="modal">
    <div class="modal-overlay" @click.self="$emit('close')">
      <div class="modal-window">
        <div class="modal-content">
          <slot/> <!-- ←スロットに子コンポーネントが入ります -->
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'BaseModal'
}
</script>

<template>
  <div class="base-contact-modal">
    <LoginContact v-if="step === 'login'"/>
  </div>
</template>

<script>
import LoginContact from '@/components/modals/contact/LoginContact'

export default {
  name: 'BaseContact',
  components: {
    LoginContact
  },
  data () {
    return {
      step: 'login'
    }
  }
}
</script>

<template>
  <div class="modal-content-wrapper">
    <header class="login-modal__header">GitHub認証による登録</header>
    <div class="login-modal__body">
      <div class="login-icon">
        <img class="github-icon" @click="githubSignIn(); showLoadingIcon()" src="@/assets/GitHub-Mark-64px.png" v-if="!whileLoading">
        <div class="loading-icon-wrapper" v-if="whileLoading">
          <LineSpinFadeLoader/>
        </div>
      </div>
      <div class="login-annotation">
        当プロジェクトでは以下の情報を取得します。
        <ul>
          <li style="margin-bottom: 0.5em;">GitHub UUID</li>
          <li style="margin-bottom: 1em;">GitHubに紐づくメールアドレス</li>
            Cloud Functionsを通じて確認・日程調整用メールを送信するために使用します。<br>
            取得したアドレスは、上記の目的以外には使用されませんが、<b>データベースに保存されます</b>ことを、お含みおき下さい。
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
/* global firebase:true */

export default {
  name: 'LoginContact',
  data () {
    return {
      whileLoading: false
    }
  },
  methods: {
    async githubSignIn () {
      await firebase.auth().signInWithPopup(new firebase.auth.GithubAuthProvider())
    },
    showLoadingIcon () {
      this.whileLoading = true
    }
  }
}
</script>

<script>
export default {
  // 略...
  mounted () {
    // 略...

    firebase.auth().onAuthStateChanged(async user => {
      if (!user) {
        this.$store.commit('updateLoginState', false)
        this.$store.commit('updateRegisterState', false)

        return
      }

      this.$store.commit('updateLoginState', true)
      this.$store.commit('updateRegisterState', false)
    })
  }
}
</script>

<template>
  <div class="base-contact-modal">
    <LoginContact v-if="step === 'login'"/>
    <RegisterContact v-if="step === 'register'"/>
    <CompleteContact v-if="step === 'complete'"/>
  </div>
</template>

<script>
import LoginContact from '@/components/modals/contact/LoginContact'
import RegisterContact from '@/components/modals/contact/RegisterContact'
import CompleteContact from '@/components/modals/contact/CompleteContact'
import { mapState } from 'vuex'

export default {
  name: 'BaseContact',
  components: {
    LoginContact,
    RegisterContact,
    CompleteContact
  },
  computed: {
    ...mapState([ // ←ここでStoreから変数を抜いてきてます
      'isUserLoggedIn',
      'isUserRegistered'
    ]),
    step () {
      if (!this.isUserLoggedIn) {
        return 'login'
      }

      if (this.isUserLoggedIn && !this.isUserRegistered) {
        return 'register'
      }

      return 'complete'
    }
  }
}
</script>