フロントをNuxt.js、バックエンドをfirebaseでSPA環境を作る

フロントを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で読み込んであげれば環境の完成となります。

Witten by Masa

情報工学系学部卒のエンジニアです。メインはフロントエンドですが、そのほかにもPython,PHP,GAS,など色んな言語、開発、データ分析、マーケティングなど手広くやってます。