Nuxt.js 引用 Firebase SDK

Nuxt.js 引用Firebase SDK
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
訂閱
通知
guest

2 Comments
最舊
最新
Inline Feedbacks
看所有留言
Willie
Willie
4 年 之前

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