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
Article Name
Nuxt.js 引用 Firebase SDK
Description
本篇大綱:Nuxt.js 學習中。1 新增 firebase.js。2 更新 nuxt.config.js。3 各頁面引用。最近在看 Nuxt.js 的文件,想來轉用 Nuxt.js,沒想到在第一步引用 Firebase SDK 就卡關。
Augustus
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg
想請教一下,知道如何在nuxt.js 中加入 firebase 的cdn 嗎?
https://firebase.google.com/docs/web/setup#delay-sdks-cdn
我找了很久都找不到。。。
如果你是要頁面上用script src的方法引用,可以參考官網範例:
https://nuxtjs.org/faq/
在nuxt.config.js的head裡,像這樣加上: