add.vueでうった情報をindex.vueで表示させたい

Question

前提・実現したいこと

nuxt.jsとfirebaseを使って道場生管理アプリを作っています。ディレクトリ構成は以下です。

├── components
│   ├──profile 
│   　　　├──name.vue
│         ├──kana.vue
│         ：
├──pages
│   ├── add.vue
│   └── index.vue
├── plugins
│    ├── firebase.js
│
└── store
     ├── add.js
     └── index.js

index.jsとadd.js以下のファイルは親子関係にあります。
道場生の登録画面であるadd.vueでうった情報をindex.vueで表示させたいのですが、index.vueに表示されません。
原因を突き詰めていくとどうやらfirebase.firestore()がきちんとimportできていないのが原因ぽいですが何故importできないのかわからず困っています。

発生している問題・エラーメッセージ

const db = firebase.firestore()
をadd.vueにかくと
client.js?06a0:97 TypeError: Cannot read property 'firestore' of undefined
書かないと
client.js?06a0:97 TypeError: studentsRef.add is not a function と出る。

該当のソースコード

add.vue

<template>
  <v-app>
    <v-main>
      <v-container>
        <v-row>
          <v-col>
            <v-row justify="center">
              <v-icon class="ml-5">
                mdi-account
              </v-icon>
              <h1 class="ml-5">生徒管理</h1>
              <v-spacer></v-spacer>
            </v-row>
            <v-divider color="blue"/>
          </v-col>
        </v-row>
          <ValidationObserver ref="observer" v-slot="{ invalid }" immediate>
            <v-form  @submit.prevent="registration" v-model="valid">
             <!-- <Name @send_name='sendName' /> -->
             <v-row class="ml-5 mt-1" dense>
    <!-- 道場生の姓名入力 -->
    <v-col cols="2">
      <ValidationProvider v-slot="{ errors, valid}" name="姓" rules="required|zenkaku">
        <v-badge left color="error" content="必須">
          <v-text-field
          label="姓"
          outlined
          placeholder="田中"
          v-model="familyName"
          required
          :error-messages="errors"
          :success="valid"/>
        </v-badge>
      </ValidationProvider>
    </v-col>
    <v-col cols="2">
      <ValidationProvider v-slot="{ errors, valid }" name="名" rules="required|zenkaku">
          <v-text-field
          label="名"
          outlined
          placeholder="太郎"
          v-model="firstName"
          required
          :error-messages="errors"
          :success="valid"/>
      </ValidationProvider>
    </v-col>
    <v-col/>
    <!-- 保護者氏名入力 -->
    <v-col cols="2">
      <ValidationProvider v-slot="{ errors, valid}" name="保護者姓" rules="required|zenkaku">
        <v-badge left color="error" content="必須">
          <v-text-field
          label="保護者姓"
          outlined
          placeholder="田中"
          v-model="parentsFamilyName"
          required
          :error-messages="errors"
          :success="valid"/>
        </v-badge>
      </ValidationProvider>
    </v-col>
    <v-col cols="2">
      <ValidationProvider v-slot="{ errors, valid}" name="保護者名" rules="required|zenkaku">
        <v-text-field
        label="保護者名"
        outlined
        placeholder="次郎"
        v-model="parentsFirstName"
        required
        :error-messages="errors"
        :success='valid'/>
      </ValidationProvider>
    </v-col>
    <v-col/>
  </v-row>
                <v-row dense>
                  <v-col justify="center" align="center">
                    <v-btn type="submit" nuxt color="success" :disabled="invalid">送信</v-btn>
                  </v-col>
                </v-row>
            </v-form>
          </ValidationObserver>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
import { mapActions } from 'vuex'
import { db } from '~/plugins/firebase.js'
import firebase from '~/plugins/firebase.js'
import { ValidationObserver, ValidationProvider } from 'vee-validate'
import Name from '~/components/profile/Name.vue'
export default {
  components : {
    ValidationObserver,
    ValidationProvider,
    Name
  },
  data() {
    return {
      valid: false,
      familyName: '',
      firstName: '',
      parentsFamilyName: '',
      parentsFirstName: '',
    }
  },
  // created: {
  //   sendName() {
  //     return ({firstName: this.firstName, familyName:this.familyName})
  //   }
  // },
  methods: {
      async registration() {
          const student = {
            familyName: this.familyName,
            firstName: this.firstName
        }
        const db = firebase.firestore() //これを入れるか入れないかでエラー内容が変わる。
        const studentsRef =  db.collection('students').doc('生徒一覧')
        await studentsRef.add(student)
        console.log(student)
        // this.$router.push(`/`)
        this.familyName = ''
        this.firstName = ''
        // await this.$store.dispatch('signUp',this.firstName)
        // this.familyName = ''
        // this.firstName = ''
      },
      
  },
}
</script>

import * as firebase from "firebase/app";
import 'firebase/auth'
import 'firebase/firestore'

const firebaseConfig = {
  略
};


firebase.initializeApp(firebaseConfig);
export default firebase;
const db = firebase.firestore();
export { db }

試したこと

記事を参照し、コピペしていますのでタイポミスはないように思います。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

こんにちは
nuxt.config.jsでpluginの読み込みはしていますか??

  plugins: [
    '~/plugins/firebase.js'
  ],

Comments

[wattyo]

確認したところ、できておらず読み込みしたら表示されました。
ありがとうございます！