$ yarn create nuxt-app myNuxtTest
Project name: myNuxtTest
Programming language: JavaScript
Package manager: Yarn
UI framework: Bootstrap
Nuxt.js modules: Axios, Progressive Web App (PWA), Content
Linking tools: (Press <space> to select, <a> to toggle all, <i> to invert election)
Testing framework: None
Rendering mode: Universal (SSR / SSG)
Deployment target: Static (Static/JAMStack hosting)
Development tools: None
$ cd myNuxtTest

$ yarn dev

$ yarn generate

<template>
<div>
    <div v-show="show">
        <div id="timer">
            <div class="timer">
                <div class="time">
                    {{ formatTime }}
                </div>
            </div>
        </div>

         <h3>
            <input v-model="key" placeholder="KeyWord" class="key">　×　{{reactant}}　=　<input v-model="idea" placeholder="Input Your Idea" class="idea">
         </h3>
         <br>
         <h3>
            <button v-on:click='random' class="button--green">Pass</button>
            <button v-on:click='post' class="button--green">Post</button>
        </h3>
    </div>
    <div v-show="shownext">
        <a
            href="ScoreIdea"
            target="_blank"
            rel="noopener noreferrer"
            class="button--green"
        >
            Next Step
        </a>
    </div>
</div>
</template>

<script>
import firebase from "firebase/app";
import "firebase/firestore";

export default {
    components: {},

    data(){
        return{
            db: {},
            reactant: 'Click Pass',
            allData: ["文化","コロナ","夢","飲む","食べ物","おいしい","恋愛","決める","地面"],
            show:true,
            shownext:false,
            min: 2,
            sec: 59,
            timerOn: false,
            timerObj: null,
        }
    },

    methods: {
        //初期化
        init: () => {
            const config = {
                //firebaseの情報
                };

            // Initialize Firebase
            firebase.initializeApp(config);
            },

        //カウントダウン処理
        count: function() {
            if (this.sec <= 0 && this.min >= 1) {
                this.min --;
                this.sec = 59;
            } else if(this.sec <= 0 && this.min <= 0) {
                this.complete();
            } else {
                this.sec --;
            }
        },

        //カウントがゼロになった処理
        complete: function() {
            clearInterval(this.timerObj)
            this.show = false;
            this.shownext = true;
        },

        //ボタンを押したらランダムに表示
        random: function(){
            const rnd = Math.floor(Math.random() * this.allData.length);
            this.reactant = this.allData[rnd]
        },

        //データ追加の処理
        post: function(){
            const testId = firebase.firestore().collection('test').doc().id; //ユニークなIDを生成
            const docRef = firebase.firestore().collection('test').doc(testId);
            const setAda = docRef.set({
                key: this.key,
                reactant:this.reactant,
                idea:this.idea
            });
            this.random();
            this.idea = "";
            //window.location.href = "JoinTable";
        },

        //データ取得の処理
        get: function(){
            //this.allData = [];
            firebase.firestore().collection('test').get().then(snapshot => {
                snapshot.forEach(doc => {
                    console.log(doc);
                    this.allData.push(doc.data());
                })
            });
            this.random();
        }

    },

    //インスタンスが生成したときの処理
    created(){
        let self = this;
        this.timerObj = setInterval(function() {self.count()}, 1000)
        this.timerOn = true; //timerがOFFであることを状態として保持
    },

    //常に動く処理
    computed: {
        formatTime: function() {
        let timeStrings = [
            this.min.toString(),
            this.sec.toString()
        ].map(function(str) {
            if (str.length < 2) {
            return "0" + str
            } else {
            return str
            }
        })
        return timeStrings[0] + ":" + timeStrings[1]
        }
    },

    //マウントされたときの処理
    mounted(){
        this.init();
        this.get();
    },
}
</script> 

<style>
input{
    text-align: center;
}
input.key{
    width:160px;
    height:50px;
    }

input.idea{
    width:260px;
    height:50px;
    }

#timer {
  display: flex;
  align-items: center;
  justify-content: center;
}
.time {
  font-size: 100px;
}
</style>