[NUXT] Minimal settings

[stact]

Could you provide us a minimal documentation to work with Nuxt? Maybe it's the first step to be Nuxt compatible :) https://mesqueeb.github.io/vuex-easy-firestore/faq.html

I've created a minimal project. Maybe it could help the community ;) We know that Firebase SDK is not compatible SSR mode and works only with simple page application mode (mode: 'spa')

Steps:

• Add required packages yarn add firebase vuex-easy-firestore

• Change nuxt mode in nuxt.config.js

// ~nuxt.config.js

[...]
/*
   ** Rendering mode
   ** Doc: https://nuxtjs.org/api/configuration-mode
   */
  mode: "spa",
[...]

• Create a config file:

// ~config/firebase.js

import * as Firebase from "firebase/app";
import "firebase/firestore";

function initFirebase() {
  Firebase.initializeApp(firebaseConfig); // http://support.google.com/firebase/answer/7015592
  return new Promise((resolve, reject) => {
    Firebase.firestore()
      .enablePersistence()
      .then(resolve)
      .catch(err => {
        if (err.code === "failed-precondition") {
          reject(err);
          // Multiple tabs open, persistence can only be
          // enabled in one tab at a a time.
        } else if (err.code === "unimplemented") {
          reject(err);
          // The current browser does not support all of
          // the features required to enable persistence
        }
      });
  });
}

export { Firebase, initFirebase };

• Create 'database' module https://fr.nuxtjs.org/guide/vuex-store/#mode-modules

• Create index.js to store (or into database module?)

// ~store/firebase.js

import { Firebase, initFirebase } from "@/config/firebase.js";
import VuexEasyFirestore from "vuex-easy-firestore";

const easyFirestore = VuexEasyFirestore(
  [
    {
      firestorePath: "teams",
      firestoreRefType: "collection", // or 'doc'
      moduleName: "database/teams",
      statePropName: "data"
    },
    {
      firestorePath: "users",
      firestoreRefType: "collection", // or 'doc'
      moduleName: "database/users",
      statePropName: "data"
    }
  ],
  { logging: true, FirebaseDependency: Firebase }
);

// Is the way to create plugins with Nuxt
export const plugins = [easyFirestore];
// Need to disable mode strict for working with vuex-easy-firestore. (is a better way to disable strict mode?)
export const strict = false

initFirebase().catch(error => {
  // take user to a page stating an error occurred
  // (might be a connection error, or the app is open in another tab)
  console.log(error);
});

• Fetch data in your vue component

<template>
  <div>{{ teams }}</div>
</template>
<script>
export default {
  computed: {
    teams: {
      get: function() {
        return this.$store.state.database.teams.data;
      }
    }
  },
  mounted: function() {
    this.$store.dispatch("database/teams/openDBChannel");
  }
};
</script>

Prerequisite: be sure to be connected to read or/and write on Firestore

I think that we have a better way to init vuex-easy-firestore instead of to declare in ~store/index.js :

• create a nuxt module?
• create a nuxt plugin?

Feel free to share your experience!

[mesqueeb]

I see... I'm not sure about Serverside rendering, because I never needed it with a project I also needed to use Cloud Firestore...

I just found this article, don't see what anticipated problems could be with my library... Nuxt.js (v2), Firestore & SSR.

If anyone has a good understanding of how SSR works I'm willing to work together to make Vuex-Easy-Firestore compatible. I just don't have that much experience with SSR, so don't know where to start or what the problems are. Please reach out to me or post something here.

---

After about two years of open source, I finally got accepted for Github Sponsors!

💜 github.com/sponsors/mesqueeb 💜

A little about me:

• I love open-source
• 6 months ago I got a son, and am trying to be an awesome father 😅
• I'm doing freelance work here and there as my main job

If anyone was helped with vuex-easy-firestore, I'd greatly appreciate any support!

BTW, donations get's paid DOUBLE by GitHub! (they're alchemists... 🦾)

Going forward 👨🏼‍💻

• I got great plans for the future of vuex-easy-firestore going above and beyond!! Look forward to it!!
• On to many more years of open-sourcing! 🎉

[moifort]

@stact thanks for sharing your config!

Here is mine, hope it will help some people!

Firestore data

Dependencies

In your Nuxt project install: yarn add firebase vuex-easy-firestore @nuxtjs/firebase

I use @nuxtjs/firebase module, very easy and simple to integrate firebase in your Nuxt app.

nuxt.config.js

export default {
  mode: 'spa',
  // ...
  plugins: [ '~/plugins/easy-firestore.js' ], // Add your vuex-easy-firestore plugin (conf below)
  modules: ['@nuxtjs/firebase'], // Add firebase module
  firebase: { 
    config: { // you can upload your config directly from firebase console -> settings
      apiKey: ...,
      authDomain: ..,
      ...
    },
    services: {
      firestore: true, // Enable Firestore
    },
  },
 // ...
}   

plugins/easy-firestore.js

import VuexEasyFirestore from 'vuex-easy-firestore'

export default ({ store }) => {
  VuexEasyFirestore([
    {
      firestorePath: 'audit',
      firestoreRefType: 'collection',
      moduleName: 'audit',
      statePropName: 'data',
    },
  ])(store)
}

pages/audit.vue

<template>
  <div>{{ audit }}</div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapState } = createNamespacedHelpers('audit')

export default {
  computed: {
    ...mapState({
      audit: (state) => state.data,
    }),
  },
  mounted() {
    this.$store.dispatch('audit/openDBChannel')
  },
}
</script>

[riderx]

@moifort i tried your code and i got same error as here : https://github.com/mesqueeb/vuex-easy-firestore/issues/159 wich version of nuxt, vuex-easy-firestore, and firebase do you use ?

[moifort]

@riderx My code has changed since :)

This is my version:

package.json

 "@nuxtjs/firebase": "7.6.1",
 "firebase": "8.7.1",
 "nuxt": "2.15.7",
 "vuex-easy-firestore": "1.36.0"

nuxt.config.ts

import fr from 'vuetify/src/locale/fr'
import en from 'vuetify/src/locale/en'
import { NuxtConfig } from '@nuxt/types'
import firebaseConfig from './firebase.config.json'

const config: NuxtConfig = {
  // Disable server-side rendering (https://go.nuxtjs.dev/ssr-mode)
  ssr: false,
   // ...

  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  plugins: [
    '~/plugins/easy-firestore',
  ],


  // Modules (https://go.nuxtjs.dev/config-modules)
  modules: [
    '@nuxtjs/firebase',
  ],

  firebase: {
    // @ts-ignore
    config: firebaseConfig.result.sdkConfig, // JSON keys from firebase
    onFirebaseHosting: true,
    services: {
      functions: {
        location: 'europe-west1',
        emulatorPort: process.env.NODE_ENV === 'production' ? undefined : 5001,
        emulatorHost: 'http://localhost',
      },
      auth: {
        persistence: 'local',
        ssr: false,
        disableEmulatorWarnings: true,
        emulatorPort: process.env.NODE_ENV === 'production' ? undefined : 9099,
        emulatorHost: 'http://localhost',
        initialize: {
          onAuthStateChangedAction: 'user/onAuthStateChangedAction',
        },
      },
      firestore: {
        emulatorPort: process.env.NODE_ENV === 'production' ? undefined : 8080,
        emulatorHost: 'localhost',
        settings: { experimentalForceLongPolling: true },
      },
      storage: false,
      messaging: false,
      performance: process.env.NODE_ENV === 'production',
      analytics: process.env.NODE_ENV === 'production',
      remoteConfig: false,
    },
  },
  
}

export default config

.nuxtignore

store/easy-firestore/*

plugins/easy-firestore.ts

Dont forget to add it in your nuxt.config

import VuexEasyFirestore from 'vuex-easy-firestore'
import { Context } from '@nuxt/types'
import { IEasyFirestoreModule } from 'vuex-easy-firestore/types/declarations'
import entries from '~/store/easy-firestore/entries' // Definition of my easyStore

declare module 'vuex/types/index' {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  export interface Module<S, R> {
    firestorePath: string
    firestoreRefType: string
    moduleName: string
    statePropName: string
    sync: IEasyFirestoreModule['sync']
  }
}

export default ({ store, $fireModule }: Context) => {
  VuexEasyFirestore([entries], {
    FirebaseDependency: $fireModule,
  })(store)
}

store/easy-firestore/entries.ts

import { Module } from 'vuex'

const entries: Module<State, RootState> = {
  firestorePath: 'entriesView',
  firestoreRefType: 'collection',
  moduleName: 'entries',
  statePropName: 'data',
  sync: {
    orderBy: ['createdAt'],
  },
  state: { data: {}, pendingEntry: null, isPushLoading: false },
  getters: { ... },
  mutations: { ... },
  actions: { ... },
}

export default entries

store/index.ts

export const strict = false

[riderx]

@moifort Oh good you did it in TS as i want to do ! Thanks a lot it helps ! i just struggle to define State, RootState in const entries: Module<State, RootState> = { i did

export const state = () => ({
  things: [] as string[],
  name: 'Me',
})
export type State = ReturnType<typeof state>
export type RootState = ReturnType<typeof state>

but i got issue on state: { data: {}, pendingEntry: null, isPushLoading: false }, then. How do you define them ?