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的文件,剛好手上有一個站當初是用Vue Cli的,想來轉用nuxt.js,沒想到在第一步引用Firebase SDK就卡關。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

WordPress

WordPress 好用的會員相關外掛:登入安全性、會員系統

Google Others

Google Top Heavy 演算法

PWA

PWA學習筆記-1:cache、workbox基本使用

Google Maps

Google Maps API 學習筆記 – 2:在地圖上畫個日本結界

API

如何用 Mockoon 快速建立 Mock APIs Server

Analytics Google

如果頁面有 id=”ga”,用 gtag 埋 Google Analytics 會收不到流量

Front-End

MacBook 用隨身碟執行 Windows 10:Windows To Go、WinToUSB

Analytics Google

GA 報表:電子商務 內部宣傳 報表

API

Imgur API:upload, load 上傳、讀取 心得筆記

API

切詞工具結巴 Jeiba 優化標籤關鍵字

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

本站的文章都是 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
我找了很久都找不到。。。

Let's Write

前端工程師 Augustus 的學習筆記 — solving problems, in simple ways.