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

隨選筆記文

Google Others

Youtube Iframe API 常用功能

Front-End

JavaScript 載入方式 defer、async

PWA

PWA 學習筆記 – 4:manifest.json

Analytics Google

Google Analytics 加上 AI

Front-End

Promise、Async、Await 基本使用筆記

Bot Telegram

Telegram Bot 學習筆記 – 6:Google 表單提交時收到通知

Firebase Google

Firebase Dynamic Links Analytics API 取得短網址分析資料

Front-End

用原生 JS 做一個簡單的抽獎功能頁面

Firebase Google

Firebase Authentication 第三方登入 – Google、FB

Analytics Google

Google Analytics 用戶計時 / User Timings

本站準備替換留言功能,投票調查中,歡迎 參與投票

訂閱
通知
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.