【Firebase】エラー error 'firebase' is not defined について

Question

Firebaseを用いて新規登録画面を作りたい

Vueを使い新霧登録画面を作っています。
その際にFirebaseを使おうと思っているのですが
うまく読み込めません。
原因は何なのか教えていただきたいです

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

error  'firebase' is not defined 

該当のソースコード

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import firebase from 'firebase'

const config = {  
    apiKey: "---",
    authDomain: "---",
    projectId: "---",
    storageBucket: "---",
    messagingSenderId: "---",
    appId: "---",
    measurementId: "---"
 
};

firebase.initializeApp(config);

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

<template>
  <div class="signup">
    
    <img alt="Vue logo" src="../assets/logo.png">

    <h1>新規登録画面</h1>
    <table>
      <tr>
        <td>ユーザー名</td>
        <td><input type="text" placeholder="userName" v-model='userName'></td>
      </tr>
      <tr>
        <td>メールアドレス</td>
        <td><input type="text" placeholder="E-mail" v-model='email'></td>
      </tr>
      <tr>
        <td>パスワード</td>
        <td><input type="text" placeholder="Password" v-model='password'></td>
      </tr>  
    </table>

    <button @click="signUp">新規登録</button>
    <router-link class="link-signin" to="/signin">ログインはこちらから</router-link>

  

  </div>
</template>

<script>
export default{
  name:'Signup',
  data(){
    return{
      userName:'',
      email:'',
      password:''
    }
  },
  methods:{
    signUp:function(){
      firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
      .then(

      )
      .catch(
      )
    }
  }
}

</script>

試したこと

npmでfirebaseのインストール等のコマンドは打っていない状況です

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

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

Answer 1

変数firebaseがわからないよというエラーなので

1.インストール

npm install firebase

2. Importする

# importを追加しないとそもそもfirebaseが何かわからないので
import firebase from 'firebase' 
<script>
export default{
  name:'Signup',
  data(){
    return{
      userName:'',
      email:'',
      password:''
    }
  },
  methods:{
    signUp:function(){
      firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
      .then(

      )
      .catch(
      )
    }
  }
}

</script>

で良いと思います。

Comments

[yukiman]

yuya556223さんありがとうございます！
npm install firebase
を打ち込んで再度試したのですが結果は変わりませんでした

main.jsでimport firebase from 'firebase'
は記述してあるのですが
vueファイルにかくものなのでしょうか

[yuya556223]

そうですね。vueの中からfirebaseを使うのであればvueファイルの中にも書いたほうがいいと思います。（signUp関数でfirebaseを呼び出しているので）
ちなみにですが、エラー防止のためにもVScodeなどでvue拡張機能をインストールしたりtypescriptを用いるのもありかもしれないです！（importしていないとエラーを出してくれたりします）
これでも解決しない場合は他に原因があるかもしれないので、教えていただけると幸いです

[yukiman]

Failed to compile with 2 errors

Template execution failed: ReferenceError: features is not defined

ReferenceError: features is not defined

- index.html:4 eval
[.]/[html-webpack-plugin]/lib/loader.js!./public/index.html:4:10

- index.html:7 module.exports
[.]/[html-webpack-plugin]/lib/loader.js!./public/index.html:7:3

- index.js:284
[myvue4]/[html-webpack-plugin]/index.js:284:18

- runMicrotasks

- task_queues.js:95 processTicksAndRejections
internal/process/task_queues.js:95:5

というエラーメッセージが出てしまうのですかなぜでしょうか。
何度もすみません！

[yukiman]

すみません！解決しました！
ありがとうございました。