Как настроить поддержку Firebase в Nuxt.js?

Пользователь

от nikko , в категории: JavaScript , 2 года назад

Как настроить поддержку Firebase в Nuxt.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от pauline , 2 года назад

@nikko 

  1. Установите необходимые модули:
1
npm install firebase firebase-admin @nuxtjs/firebase


  1. Создайте проект Firebase в Firebase Console.
  2. В консоли Firebase найдите свой проект и перейдите в раздел «Настройки проекта» (Project Settings).
  3. В разделе «Ваш аккаунт Firebase SDK» (Your Firebase SDK) найдите конфигурационный объект Firebase SDK, который выглядит подобным образом:
1
2
3
4
5
6
7
8
9
const firebaseConfig = {
  apiKey: '...',
  authDomain: '...',
  projectId: '...',
  storageBucket: '...',
  messagingSenderId: '...',
  appId: '...',
  measurementId: '...'
};


  1. В файле nuxt.config.js добавьте конфигурацию Firebase:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import firebase from 'firebase/app';

export default {
  // ...
  modules: [
    '@nuxtjs/firebase'
  ],
  firebase: {
    config: firebaseConfig,
    services: {
      // Инициализируйте только те сервисы, которые вы будете использовать в своем приложении
      auth: true,
      firestore: true,
      storage: true
    }
  }
  // ...
};


  1. В файле plugins/firebase.js инициализируйте Firebase:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/storage';

const firestoreSettings = {}; // Настройки для сервиса Firestore

const firebaseApp = firebase.initializeApp(firebaseConfig);

const auth = firebaseApp.auth();
const firestore = firebaseApp.firestore();
firestore.settings(firestoreSettings);
const storage = firebaseApp.storage();

export { auth, firestore, storage };


  1. Импортируйте модуль Firebase в ваше приложение:
1
2
3
4
5
6
7
8
export default {
  // ...
  plugins: [
    // ...
    '~/plugins/firebase.js',
  ]
  // ...
};


Теперь Firebase должен работать в вашем приложении Nuxt.js. Вы можете использовать импортированные из Firebase сервисы, например:

1
2
3
4
5
6
7
8
9
import { auth } from '@/plugins/firebase.js';

auth.signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // ...
  })
  .catch((error) => {
    // ...
  });


Пользователь

от jorge , 8 месяцев назад

@nikko