Nuxt firebaseの合成

NuxtでFireBaseを使用して組成APIのすべてのパワーを使用します.JSプロジェクト.
また、フォークをチェックアウトFirebase Composition with Vite

用途
のアプリケーションの例pages/index.vue :

<template>
  <div v-if="!uid">
    <button @click="signInWithGoogle">Sign in</button>
  </div>
  <div v-else>
    <div>Signed in UID: {{ uid }}</div>
    <ul>
      <li v-for="todo in docs" :key="todo.id">{{ todo.title }}</li>
    </ul>
    <input v-model="newTodo" />
    <button @click="addTodo">Add</button>
  </div>
</template>

<script>
import { useAuth, useCollection, useDoc } from 'nuxt-firebase-composition'
import { ref } from '@nuxtjs/composition-api'

export default {
  setup() {
    const { uid, signInWithGoogle } = useAuth()
    const { docs } = useCollection('todos')
    const { create } = useDoc('todos')

    const newTodo = ref('')

    const addTodo = () => {
      create({
        title: newTodo.value,
      })
      newTodo.value = ''
    }

    return {
      newTodo,
      addTodo,
      signInWithGoogle,
      uid,
      docs,
      create,
    }
  },
}
</script>

なぜ?
これはどうですかnuxt/firebase and vuexfire and vuex-easy-firestore ?
再利用可能なモジュールを作成できます.例えば、上のコードを取りましょう~/use/todos.js :

import { useCollection, useDoc } from 'nuxt-firebase-composition'
import { ref } from '@nuxtjs/composition-api'

export default () => {
  const { docs: todos } = useCollection('todos')
  const { create } = useDoc('todos')

  const newTodo = ref('')

  const addTodo = () => {
    create({
      title: newTodo.value,
    })
    newTodo.value = ''
  }

  return {
    newTodo,
    addTodo,
    todos,
  }
}

今すぐあなたが置き換えることができます<script> section of initial code to:

import { useAuth } from 'nuxt-firebase-composition'
import useTodos from '~/use/todos.js'

export default {
  setup() {
    const { uid, signInWithGoogle } = useAuth()
    const { newTodo, addTodo, todos } = useTodos()

    return {
      signInWithGoogle,
      uid,
      newTodo,
      addTodo,
      todos,
    }
  },
}

私はまた、すべてのモジュールが使用される場合useCollection and useDoc and useAuth インターフェイスとしてFireBaseから他のプロバイダに切り替えるには後で簡単になります.コードFireBaseやFireStoreで直接表示されません.
改善の余地は大きいが、私は基礎があると信じている.

セットアップ

Nuxtの作成JSプロジェクト

yarn create nuxt-app my-project

モジュールと依存関係のインストール

yarn add nuxt-firebase-composition firebase @nuxtjs/composition-api

クリエイト~/plugins/firebase.client.js :

import { initFirebase } from 'nuxt-firebase-composition'
import { onGlobalSetup } from '@nuxtjs/composition-api'

export default ({ env: { firebase } }) => {
  onGlobalSetup(() => {
    initFirebase(firebase)
  })
}

プラグインを有効にするplugins セクションnuxt.config.js

{
  plugins: [
    '~/plugins/firebase.client'
  ],
}

ファイアウォールの設定をenv セクションnuxt.config.js

{
  env: {
    firebase: {
      config: {
          // REQUIRED: Official config for firebase.initializeApp(config):
          apiKey: '<apiKey>',
          authDomain: '<authDomain>',
          databaseURL: '<databaseURL>',
          projectId: '<projectId>',
          storageBucket: '<storageBucket>',
          messagingSenderId: '<messagingSenderId>',
          appId: '<appId>',
          measurementId: '<measurementId>'
      },
      services: {
        auth: true,
        firestore: true,
        analytics: false
      }
    }
  }
}

Firebaseの設定スニペットやその他のfirebase固有のパラメータ.FireBaseプロジェクトの概要ページからこの情報を取得できます.https://console.firebase.google.com/project/<your-project-id>/overview
トドスnuxt@2 with @nuxtjs/composition-api はまだ制限されており、我々が持つことができる機能の全体のスペクトルを提供していませんvue3 , 私はそれが解決されると思いますnuxt@3 .
最初に、私はNuxtだけでなく互換性のあるVueパッケージを作成しようとしました、しかし、私は問題を得ましたprovide から@vue/composition-api Nuxtjsで.
私はnuxtjsのためのモジュールを作成しようとしましたが、いくつかの奇妙なエラーを、私はまだ解決することができなかった.しかし、モジュールとしてそれを持つことはすばらしいです.
私はいくつかのフィードバックやアイデアを得るのが大好きだ.
あなたがそれをインストールしようとした場合、それがスムーズに動作したり、問題が発生した場合は私に知らせてください.

サポート・ミー
あなたがアイデアが好きならばnuxt-firebase-composition Githubについて
何かがうまくいかなければcreate an issue .