Firebase Nuxt module only on specific pages?

user_441638 0
Viewed 78

I am including @nuxtjs/firebase in my nuxt.config.js, but only using Firebase auth and other features on specific routes. However, by including the Firebase module in nuxt.config.js it's loading a bunch of code that is not needed by other pages and negatively affecting site performance (per Lighthouse).

How can I only load this module for the pages that need it?

nuxt.js firebase vue.js
1 Answers

You can use the 'lazy' option in your nuxt.config.js:

modules: [
[
  '@nuxtjs/firebase',
  {
    config: {
      apiKey: 'somerandomkey', ...
    },
    services: {
      firestore: true,
    },
    lazy: true,
  },
],],

Then when you are ready to use the feature, you can manually load it:

await this.$fire.firestoreReady()

https://firebase.nuxtjs.org/guide/options/#lazy

user_103480650
Related