フロントをnuxt.js、バックエンドをfirebaseでSPA開発をする場合の連携方法についてご紹介します。
まずは、npx create-nuxt-appでnuxt.jsの環境を構築し、その後の方法を以下に示します。注意として、create-nuxt-appで環境構築する際の設定として、レンダリングモードをSPAにすることが必要になる点に気をつけましょう。
①Firebase関連パッケージをインストールしていきましょう。まずはfirebaseをインストールします。firebase公式サイトから、cloudfirestoreでデータベースを事前に作成しておくとスムーズです。
npm install --save firebase
②次にvuexfireをインストールします。
npm install --save vuexfire@3.0.1
③環境変数の設定します。dotenvをインストールします。.envをプロジェクトディレクトリ直下に作成します。
npm install --save @nuxtjs/dotenv
④firebaseコンソールのプロジェクトの設定で、該当のプロジェクトのIDを確認し、.envに設定を記述します。
FIREBASE_PROJECT_ID = 'nuxt-test'
⑤nuxt.config.jsのモジュールに読み込む設定を行います。
modules: [
'@nuxtjs/dotenv'
],
⑥firebaseと連携していきましょう。pluginsフォルダの中にjavascriptファイルを作成。初期化処理を行います。
import firebase from 'firebase'
const config = {
projectId: process.env.FIREBASE_PROJECT_ID
}
if (!firebase.apps.length) {
firebase.initializeApp(config)
}
export default firebase
⑦storeフォルダ内にindex.jsを作成。vuexfireからvuexfireMutationsを使用できるように設定
import { vuexfireMutations } from 'vuexfire'
export const mutations = {
...vuexfireMutations
}
あとはstoreに実際の処理を行うjsを記述し、pagesのvueで読み込んであげれば環境の完成となります。