Nuxt.jsでfirebaseを使う方法

2021年5月8日Vue.js

Nuxt.jsをインストールからfirebaseを使えるようになるまでにすることをまとめました。

Nuxt.jsの設定

Nuxt.jsのプロジェクトの作成

npx create-nuxt-app [プロジェクト名]

でNuxt.jsのプロジェクトを作成します。

? UI framework: Vuetify.js
? Nuxt.js modules: PWA
? Linting tools: Prettier
? Testing framework: None
? Rendering mode: Single Page App
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: jsconfig.json
? What is your GitHub username? 名前
? Version control system: Git

上のようにいろいろ聞かれるので必要なものを設定して最後まで回答するとプロジェクトが作成されます。

Nuxt.jsのプロジェクトを起動

cd [プロジェクト名]
npm run dev

cdコマンドでプロジェクトのフォルダに移動します。 そして、devコマンドで起動します。 http://localhost:3000/と3000がデフォルトになっています。

プロジェクトで不要なものを削除

componentsなどにある初期設定の不要な部分を削除します。 vuetifyを使う場合は、nuxt.configファイルにある

vuetify: {
customVariables: ['~/assets/variables.scss'],
},

の部分を上のように修正します。

Firebaseの設定

Firebaseの始め方

Firebaseの基本的な始め方はFirebaseの使い方を参照してみてください。

firebaseのインストール

あとは下のページに沿ってインストールを行います。 https://firebase.nuxtjs.org/guide/getting-started/

npm install firebase

npm install @nuxtjs/firebase --save

上のコマンドでインストールします。 yarnの場合は下の通りです。

yarn add firebase

yarn add @nuxtjs/firebase

Cannot find module 'firebase/app’

✖ Nuxt Fatal Error
Error: Cannot find module 'firebase/app'

というエラーがでる場合は、node_modulesを削除して、

yarn add firebase

npm install firebase

再度上のコマンドを実行してみましょう。

nuxt.config.jsを編集する

nuxt.config.jsを編集します。 たとえばメールアドレスとパスワードのログイン機能といったAUTHを使う場合は、下のページを参考にすると、とてもわかりやすい例が記載されています。 https://firebase.nuxtjs.org/service-options/auth nuxt.confin.jsのmodulesの部分をたとえば下のように編集します。

  modules: [
    [
      '@nuxtjs/firebase',
      {
        config: {
              apiKey: "APIキー",
              authDomain: "ドメインアドレス",
              projectId: "プロジェクトID",
              storageBucket: "ストレージバケット",
              messagingSenderId: "メッセージの送信者ID",
              appId: "appID"
        },
        services: {
          auth: {
            persistence: 'local', // default
            initialize: {
              onAuthStateChangedMutation: 'ON_AUTH_STATE_CHANGED_MUTATION',
              onAuthStateChangedAction: 'onAuthStateChangedAction',
              subscribeManually: false
            },
            ssr: false, // default
          },
          firestore: true,
          storage: true
        }
      }
    ]
  ],

configの部分は、firebaseで生成した構成の部分をコピーします。 authの部分はだいたい上のURLの通りですが、エミュレーターを使わない場合は削除します。 firestoreやstrageなどのサービスを使う場合は、下に記載があるようにtrue設定するだけ使えるようになります。 https://firebase.nuxtjs.org/guide/options