nuxtでfirestoreを利用する

現在Nuxt×Firebaseでサービスを作っています。
今回はHosting,Auth,Firestoreの利用を考えています。
Hosting,Authは実装できたのでFirestoreと連携しようと思いました。

├pages
│   └user
│      └aaa.vue
│
└plugin
    └firebase.js

という階層になっています。
それぞれのファイルは以下です

/plugin/firebase.js

import firebase from 'firebase'

if (!firebase.apps.length) {
  firebase.initializeApp({
  apiKey: process.env.FB_API_KEY,
  authDomain: process.env.FB_AUTH_DOMAIN,
  databaseURL: process.env.FB_DATABASE_URL,
  projectId: process.env.FB_PROJECTID,
  storageBucket: process.env.FB_STORAGE_BUCKET,
  messagingSenderId: process.env.FB_MESSAGING_SENDER_ID,
  appId: process.env.FB_APP_ID,
  measurementId: process.env.FB_MEASUREMENT_ID
  })
}

export default firebase

/pages/user/aaa.vue

<template>
  <div class="form-style-5">
     <v-btn  @click="usertouroku">送信</v-btn>
  </div>
</template>
<script>
import firebase from '@/plugins/firebase'

const db = firebase.firestore()

export default {
     methods: {
       usertouroku: function() {
          db.collection("users").add({
            name: {
              first: 'tarou',
              last: 'yamada',
             }
         })
      .then(function() {
           console.log("Document successfully written!");
      })
      .catch(function(error) {
          console.error("Error writing document: ", error);
     });
   }
  }
}
</script>

Firestoreのルールは以下です。

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth.uid != null;
    }
  }
}

今現在ボタンを押してもなにも処理が走らない状態で、
Firestoreのほうにも接続はありません。
なにが問題なのか教えていただけるとありがたいです。