- Firebaseでプロジェクト作成
- 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
}





![PHP Iteratorパターン [PHPによるデザインパターン入門]](https://www.yuulinux.tokyo/contents/wp-content/uploads/2017/09/phpDP_20190407_1-150x150.jpg)