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的文件,剛好手上有一個站當初是用Vue Cli的,想來轉用nuxt.js,沒想到在第一步引用Firebase SDK就卡關。
Augustus
Let's Write
Let's Write
Publisher Logo

2 Replies to “Nuxt.js 引用Firebase SDK”

    1. 如果你是要頁面上用script src的方法引用,可以參考官網範例:
      https://nuxtjs.org/faq/
      在nuxt.config.js的head裡,像這樣加上:

      head: {
          script: [
            { src: 'https://www.gstatic.com/firebasejs/7.6.1/firebase-app.js' }
          ]
        }
      

留言