Nuxt.js 引用 Firebase SDK

/

Nuxt.js 學習中

最近在看 Nuxt.js 的文件,覺得比 Vue CLI 還方便,剛好手上有一個站當初是用 Vue CLI 的,想來轉用 Nuxt.js,沒想到在第一步引用 Firebase SDK 就卡關,後來才發現是在 init 時少了一個等初始化就緒的判斷。

覺得下次再要用 Firebase 時又會忘記,就筆記這篇以供之後查找。


1 新增 firebase.js

先安裝 Firebase:

npm install --save firebase

在 plugins/ 的資料夾下新增 firebase.js 檔,檔案內容就是引用 Firebase SDK:

其中最重要的就是這行:

if(!firebase.apps.length) { …… }

一開始就是少了判斷,在 dev 的時候一直報錯。


2 更新 nuxt.config.js

在 nuxt.config.js 的 plugins 裡加入:

plugins: [
  '~/plugins/firebase'
]

3 各頁面引用

page/**.vue 中的頁面要用 Firebase,import 就可以了:

Summary
Nuxt.js 引用 Firebase SDK
Article Name
Nuxt.js 引用 Firebase SDK
Description
本篇大綱:Nuxt.js 學習中。1 新增 firebase.js。2 更新 nuxt.config.js。3 各頁面引用。最近在看 Nuxt.js 的文件,想來轉用 Nuxt.js,沒想到在第一步引用 Firebase SDK 就卡關。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Apps Script Google

Google Apps Script 基本使用:跨網域 AJAX、接 Firebase

WordPress

Ubuntu 安裝 WordPress – 1:VirtualBox、Ubuntu 20.04

Google Others

Youtube Iframe API 常用功能

Google Others

用 reCAPTCHA v2 來做非機器人驗證

Firebase Google

Firebase Performance 使用筆記

Front-End

拿 Trello 當資料庫 建一個店家清單 – 上篇:Trello 基本使用

Analytics Google

GA:啟用 Web + App 報表

Front-End

Promise、Async、Await 基本使用筆記

Front-End

第 100 篇:起點、轉折、then()

Analytics Google

GA:User-ID 功能 設定及報表檢視

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
2 Comments
最舊
最新
Inline Feedbacks
看所有留言
Willie
Willie
1 年 之前

想請教一下,知道如何在nuxt.js 中加入 firebase 的cdn 嗎?
https://firebase.google.com/docs/web/setup#delay-sdks-cdn
我找了很久都找不到。。。