Nuxt Firebase

Nuxt Firebase

Nuxt3とFirebaseの連携

はじめる

Nuxt3対応

Vue 3で構築されており、Auto-importやComposablesによって非常に簡単に使用することができます。

Firebase v9 SDK対応

新しいAPI形式によって、アプリのバンドル後のサイズを小さく保つことができます。

SSRを用いた認証

Service Workerを使用することで、サーバーサイドやAPIルートでも認証情報を利用できます。

設定

  1. 依存関係のインストール
# npm
npm install -D firebase @e-chan1007/nuxt-firebase
# yarn
yarn add -D firebase @e-chan1007/nuxt-firebase
# pnpm
pnpm add -D firebase @e-chan1007/nuxt-firebase

firebase のインストールを忘れないでください。

  1. モジュールをNuxtの設定に追加する
export default defineNuxtConfig({
  modules: [
    '@e-chan1007/nuxt-firebase'
  ],
  firebase: {
    // ここでオプションを設定します。
  }
})
  1. 使用する
<template>
  <p>Hello {{ currentUser?.displayName }}!</p>
</template>

<script lang="ts" setup>
const { currentUser } = useAuth();
</script>