1. Firebaseでプロジェクト作成
2. Cloudfirestore でデータベース作成(テストモード)

 

nuxt-projects $ npx create-nuxt-app nuxt-todo-yuu

create-nuxt-app v3.2.0
<img draggable="false" data-mce-resize="false" data-mce-placeholder="1" data-wp-emoji="1" class="emoji" alt="✨" src="https://s.w.org/images/core/emoji/12.0.0-1/svg/2728.svg">  Generating Nuxt.js project in nuxt-todo-yuu
? Project name: nuxt-todo-yuu
? Programming language: JavaScript
? Package manager: Npm
? UI framework: None
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert se
lection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert sele
ction)
? Testing framework: None
? Rendering mode: Single Page App
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert
selection)
⠏ Installing packages with npm

・・・

🎉  Successfully created project nuxt-todo-yuu

  To get started:

	cd nuxt-todo-yuu
	npm run dev

  To build & start for production:

	cd nuxt-todo-yuu
	npm run build
	npm run start

 

$ cd nuxt-todo-yuu
nuxt-todo-yuu $ npm install --save firebase@7.19.1
nuxt-todo-yuu $ npm install --save vuexfire@3.0.1

 

$ view nuxt-projects/nuxt-todo-yuu/package.json

{
  "name": "nuxt-todo-yuu",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "firebase": "^7.19.1",
    "nuxt": "^2.14.0",
    "vuexfire": "^3.0.1"
  },
  "devDependencies": {}
}

 

環境設定

nuxt-todo-yuu $ npm install --save @nuxtjs/dotenv@1.3.0

 

nuxt-todo-yuu $ touch .env

 

nuxt-todo-yuu $ vi .env

FIIREBASE_PPROJECT_ID = 'nuxt-todo-yuu'

 

nuxt-todo-yuu $ vi nuxt.config.js

・・・

  modules: [
    '@nuxtjs/dotenv' ←●追加
  ],

・・・

 

nuxt-todo-yuu $ npm run dev

 

http://localhost:3000/

デベロッパーツールのconsoleでエラーがでていなければOK

 

$ vi plugins/firebase.js

import firebase from 'firebase'

const config = {
    projectId: process.env.FIREBASE_PROJECT_ID
}

if (!firebase.apps.length) {
    firebase.initializeApp(config)
}

export default firebase

 

$ vi store/index.js


import { vuexfireMutations } from 'vuexfire'

export const mutations = {
    ...vuexfireMutations
}