Vue.jsからFirestoreを使うための準備とFirestoreへのデータ書き込み手順

├── babel.config.js
├── node_modules
├── package.json
├── package-lock.json
├── public
├── README.md
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    ├── main.js
    ├── router.js
    └── views
        ├── About.vue
        └── Home.vue

$ npm install firebase --save

$ cd src
$ mkdir firebase
$ cd firebase
$ touch firestore.js

import firebase from 'firebase' 

const config = {
  apiKey: "AIzaSyskwartawproSikoperaktaewew",
  authDomain: "myfirebase-cXXXX.firebaseapp.com",
  databaseURL: "https://myfirebase-cXXXX.firebaseio.com",
  projectId: "myfirebase-cXXXX",
  storageBucket: "myfirebase-cXXXX.appspot.com",
  messagingSenderId: "1012408523578"
};

const settings = { timestampsInSnapshots: true };
firebase.initializeApp(config);
firebase.firestore().settings(settings);

export default firebase

├── babel.config.js
├── node_modules
├── package.json
├── package-lock.json
├── public
├── README.md
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    ├── firebase
    │   └── firestore.js
    ├── main.js
    ├── router.js
    └── views
        ├── About.vue
        ├── Home.org.vue
        └── Home.vue

<template>
  <div class="home" style="margin-left: 20px;">
      <p>お名前</p>
      <input v-model="name" placeholder="Name"></br></br>
      <p>メールアドレス</p>
      <input type="email" v-model="email" maxlength="30"></br></br>
      <p>お問い合わせ内容</p>
      <input v-model="message" placeholder="message"></br></br>
      <button @click="sendItem">送信する</button>
      <p v-if="showMessage" style="margin-top: 20px">
          フォームが正常に送信されました。
      </p>
  </div>
</template>
<script>
// Vue CLIで作成したアプリでは、@マークは./srcを指す
import firebase from '@/firebase/firestore'

export default {
  name: 'home',
  data() {
    return {
        name: '',
        email: '',
        message: '',
        items: [],
        showMessage: false,
    }
  },
  
  methods: {
   sendItem(){
     const colref = firebase.firestore().collection("formcontent"); // "formcontent"という名前のコレクションへの参照を作成
     
     // 保存用JSONデータを作成
     const saveData = {
        name: this.name,
        email: this.email,
        message: this.message
     };
     
     // addの引数に保存したいデータを渡す
     colref.add(saveData).then(function(docRef) {
          // 正常にデータ保存できた時の処理
          console.log("Document written with ID: ", docRef.id);
      }).catch(function(error) {
          // エラー発生時の処理
          console.error("Error adding document: ", error);
      });

      this.showMessage = true;
   },
  }
}
</script>

（・・・上省略・・・）
     colref.doc("mydocument").set(saveData).then(function(docRef) {
          console.log("Document written with ID: ", docRef.id);
      }).catch(function(error) {
          console.error("Error adding document: ", error);
      });
（・・・下省略・・・）

（・・・上省略・・・）
     colref.doc().set(saveData).then(function(docRef) {
          console.log("Document written with ID: ", docRef.id);
      }).catch(function(error) {
          console.error("Error adding document: ", error);
      });
（・・・下省略・・・）