ReferenceError: firebase is not defined error when using onAuthStateChanged - firebase

Question

EDIT #2
So I now have the following https://gist.github.com/benbagley/ef13bc70c62f2cc367561e3927a368fd
The error I am getting is
Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).
I am only initialising firebase in the firebase.js file nowhere else.
EDIT
Here's a GIF on what's happening:
https://i.gyazo.com/0446e6b492aae300870a32f8bb2b2aa8.mp4
Hi I'm using Nuxt to build a test app however I am getting the following error
[Vue warn]: Error in created hook: "ReferenceError: firebase is not defined"
In Nuxt I have an app.html file with firebase being linked in the rest of the app like so
index.vue
<template>
<section class="flex h-screen w-screen uppercase shadow leading-loose">
<section id="large-header" class="relative w-full overflow-hidden bg-cover bg-center gradient-background">
<canvas id="demo-canvas"></canvas>
<section class="flex flex-wrap w-full max-w-xs absolute m-0 bg-white shadow content">
<section v-if="authUser" class="bg-white p-8">
<h2 class="text-3xl text-black">Signed in as {{ authUser.email }}</h2>
<button #click='signOut' class="twitch flex justify-center items-center p-8 uppercase text-white font-semibold tracking-wide w-full">
Sign Out
</button>
</section>
<section class="pt-4 pl-4 pb-0 pr-4" v-else>
<tabs class="flex flex-wrap border-b w-full pt-2">
<tab name="Sign In">
<SignIn style="outline:none" />
</tab>
<tab name="Sign Up">
<SignUp style="outline:none" />
</tab>
</tabs>
</section>
<button class="twitch flex justify-center items-center p-8 uppercase text-white font-semibold tracking-wide w-full">
<i class="fab fa-twitch pr-2 text-xl"></i> Twitch
</button>
</section>
</section>
</section>
</template>
<script>
import SignIn from '#/components/Forms/SignIn'
import SignUp from '#/components/Forms/SignUp'
import {Tabs, Tab} from 'vue-tabs-component';
export default {
components: {
SignIn,
SignUp,
Tabs,
Tab
},
data: function () {
return {
authUser: null
}
},
methods: {
signOut () {
firebase.auth().signOut()
}
},
created () {
firebase.auth().onAuthStateChanged(user => { this.authUser = user })
}
}
</script>
The line that is causing the issue is this
firebase.auth().onAuthStateChanged(user => { this.authUser = user })
Sign up work and so does sign in however when I add the above line the entire app just crashes producing the following error
[Vue warn]: Error in created hook: "ReferenceError: firebase is not defined"
Any help is appreciated!

Answer 1

Typically, you would install the Firebase SDK via
npm install --save firebase
(or yarn if that's your thing)
Then you import it where required like any other module.
I recommend creating a module for your firebase app that can be imported elsewhere, for example, say in src/firebase.js
import firebase from 'firebase' // import the sdk
// initialise your app
export default firebase.initializeApp({
apiKey: "REDACTED",
authDomain: "dashboard-nuxt-test.firebaseapp.com",
databaseURL: "https://dashboard-nuxt-test.firebaseio.com",
projectId: "dashboard-nuxt-test",
storageBucket: "dashboard-nuxt-test.appspot.com",
messagingSenderId: "1234567890"
})
then in your components
import firebase from '#/firebase'
// and later
firebaseApp.auth().onAuthStateChanged(user => { this.authUser = user })