【Nuxt.js】firebase導入編：nuxt/firebaseを導入しよう

#vue #nuxt #プログラミング #プログラミング初心者 #エンジニア #駆け出しエンジニア #駆け出しエンジニアと繋がりたい #駆け出しWebクリエイターと繋がりたい #駆け出しWebクリエイター

🎈 WPでも公開中です
https://wp.me/pc9NHC-1bj

前置き

nuxt/firebase
今までよりもっと簡単に
firebaseを使えて
パフォーマンスを向上するものです✨

今回は導入方法と
使い方を載せています✍️
非常に簡単なので
firebaseを使っている方は
ぜひやってみてください！

導入方法

Getting Started

まずはインストールから。

// terminal
$ npm install firebase
$ npm install @nuxtjs/firebase

そしてnuxt.config.jsで設定💫

今まではplugins/firebase.jsを作って
読み込んでいましたが
それが不要です💡

modules: [
   [
     '@nuxtjs/firebase',
     {
       config: {
         apiKey: '<apiKey>',
         authDomain: '<authDomain>',
         // databaseURLはなくてOK
         projectId: '<projectId>',
         storageBucket: '<storageBucket>',
         messagingSenderId: '<messagingSenderId>',
         appId: '<appId>',
         measurementId: '<measurementId>'
       },
       services: {
         auth: true // Just as example. Can be any other service.
       }
     }
   ]
 ],

または

modules: ['@nuxtjs/firebase'],

firebase: {
  // options
}

servicesは
使いたいものを
trueにするだけでOK🙆‍♀️

⬇️利用可能なサービスはこちら

services: {
 auth: true,
 firestore: true,
 functions: true,
 storage: true,
 database: true,
 messaging: true,
 performance: true,
 analytics: true,
 remoteConfig: true
}

使い方

Usage

使いたいサービスを
$fireで書きます。
実際使用する際には
thisが必要なので
this.$fire.auth
といった感じになります💡

##サンプル1
nuxt.config.jsでは
servicesで
firestore: true,
にしています。

trueにするのを忘れてしまうと
このようなエラーがでます。

Error
TypeError: Cannot read property 'collection' of undefined

<template>
 <div class="page">
   <input
     type="text"
     v-model="text"
   />
   <button @click="submit">
     submit
   </button>
 </div>
</template>

<script>
export default {
 data() {
   return {
     text: ''
   }
 },
 methods: {
   async submit() {
     try {
       this.$fire.firestore.collection('sample')
         .add({
           text: this.text
         })
         .then((ref) => {
           console.log('Add ID: ', ref.id)
         })
     } catch (e) {
       console.log(e)
     }
   }
 }
}
</script>

##サンプル2

<template>
 <div class="page">
   <form class="form" @submit.prevent>
     <label class="label">
       <span class="label">
         email
       </span>
       <input
         class="input"
         type="text"
         v-model="email"
       />
     </label>
     <label class="label">
       <span class="label">
         password
       </span>
       <input
         class="input"
         type="password"
         v-model="password"
       />
     </label>
     <button
       class="button"
       type="submit"
       @click="createAccount"
     >
       createAccount
     </button>
   </form>
 </div>
</template>

<script>
export default {
 data() {
   return {
     email: '',
     password: ''
   }
 },
 methods: {
   async createAccount() {
     try {
       await this.$fire.auth
         .createUserWithEmailAndPassword(this.email, this.password)
         .then(() => {
           console.log('done!')
         })
     } catch (e) {
       console.log(e)
     }
   }
 }
}
</script>

まとめ

新たにpluginsでjsファイルを
作成しなくても良く、
importする必要もないので
煩わしさがなくなりました✨

各サービスごとのオプションは
まだ試していないのですが、
(公式のSERVICE OPTIONSで
確認できます👀)

普通にfirebaseを使うよりも
nuxt/firebaseを使っても良さそうです💫😀

🎈 WPでも公開中です
https://wp.me/pc9NHC-1bj