firebase is not definedを解決したい

前提・実現したいこと

firebaseとnuxt.jsを使って生徒管理アプリを作っています。始めは、ちゃんとfirebaseが起動できていたのですが、入力した生徒の情報が反映されず、また、firebaseから警告が出ていたので、いろいろな記事や動画を参考にfirebaseの設定周りのコードを書いていったのですが、以下のエラーが解決できず困っています。

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

firebase is not defined

該当のソースコード

store/add.js

js
1import { firestoreAction } from 'vuexfire'
2
3const db = firebase.firestore()
4const studentsRef = db.collection('students')
5
6export const state = () => ({
7  stutents: []
8})
9
10export const actions = {
11  init: firestoreAction(({ bindFirestoreRef }) => {
12    bindFirestoreRef('students', students)
13  }),
14  add: firestoreAction((context, firstName) => {
15    if(firstName.trim()) {
16      studentsRef.add({
17        firstName: firstName,
18      })
19    }
20  })
21}

store/index.js

js
1import { vuexfireMutations } from 'vuexfire'
2
3export const state = () => ({
4   students: [],
5})
6
7export const mutations = {
8   ...vuexfireMutations
9}
10
11export const getters = {
12   getStudents: (state) => {
13      return state.students
14   }
15}

firebase.js

js
1import * as firebase from "firebase/app";
2import 'firebase/auth'
3import 'firebase/firestore'
4
5const firebaseConfig = {
6  apiKey: process.env.FB_API_KEY,
7  authDomain: process.env.FB_AUTH_DOMAIN,
8  databaseURL: process.env.FB_DATABASE_URL,
9  projectId: process.env.FB_PROJECTID,
10  storageBucket: process.env.FB_STORAGE_BUCKET,
11  messagingSenderId: process.env.FB_MESSAGING_SENDER_ID,
12  appId: process.env.FB_APPID,
13  measurementId: process.env.FB_MEASUREMENTID
14};
15
16
17firebase.initializeApp(firebaseConfig);
18
19export const db = firebase.firestore();
20export default firebase;