【Nuxt.js】Firebase와의 제휴 방법
firebase 패키지 설치
터미널プロジェクト名$ npm install --save firebase
firebase plugin 만들기
터미널プロジェクト名$ touch plugins/firebase.js
plugins/firebase.jsimport firebase from 'firebase/app'
import 'firebase/firestore'
if (!firebase.apps.length) {
firebase.initializeApp(
{
apiKey: process.env.FIREBASE_API_KEY,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.FIREBASE_DATABASE_URL,
projectId: process.env.FIREBASE_PROJECT_ID,
storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.FIREBASE_APP_ID,
measurementId: process.env.FIREBASE_MEASUREMENT_ID
}
)
}
export default ({ app }, inject) => {
inject('firebase', firebase);
}
환경 변수의 설정 방법은 이쪽↓
【Nuxt.js】 「dotenv」를 사용한 환경 변수의 설정 방법
nuxt.config.js 설정
nuxt.config.js
//...省略
// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
plugins: [
'~/plugins/firebase'
],
//...省略
동작 확인
pages/index.vue
내부에 송신 버튼을 마련하고,
클릭으로 firestore에 데이터를 보냅니다.
pages/index.vue<template>
<div class="container">
<button @click="submit">送信</button>
</div>
</template>
<script>
export default {
methods: {
submit() {
const db = this.$firebase.firestore();
db.collection('user').add({ name: 'hoge' })
.then(() => {
console.log('成功');
})
.catch((e) => {
console.log(e.message);
});
}
}
}
</script>
Reference
이 문제에 관하여(【Nuxt.js】Firebase와의 제휴 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/higa02/items/f74e7ea34d741b72ebf7
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
プロジェクト名$ npm install --save firebase
터미널
プロジェクト名$ touch plugins/firebase.js
plugins/firebase.js
import firebase from 'firebase/app'
import 'firebase/firestore'
if (!firebase.apps.length) {
firebase.initializeApp(
{
apiKey: process.env.FIREBASE_API_KEY,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.FIREBASE_DATABASE_URL,
projectId: process.env.FIREBASE_PROJECT_ID,
storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.FIREBASE_APP_ID,
measurementId: process.env.FIREBASE_MEASUREMENT_ID
}
)
}
export default ({ app }, inject) => {
inject('firebase', firebase);
}
환경 변수의 설정 방법은 이쪽↓
【Nuxt.js】 「dotenv」를 사용한 환경 변수의 설정 방법
nuxt.config.js 설정
nuxt.config.js
//...省略
// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
plugins: [
'~/plugins/firebase'
],
//...省略
동작 확인
pages/index.vue
내부에 송신 버튼을 마련하고,
클릭으로 firestore에 데이터를 보냅니다.
pages/index.vue<template>
<div class="container">
<button @click="submit">送信</button>
</div>
</template>
<script>
export default {
methods: {
submit() {
const db = this.$firebase.firestore();
db.collection('user').add({ name: 'hoge' })
.then(() => {
console.log('成功');
})
.catch((e) => {
console.log(e.message);
});
}
}
}
</script>
Reference
이 문제에 관하여(【Nuxt.js】Firebase와의 제휴 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/higa02/items/f74e7ea34d741b72ebf7
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
//...省略
// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
plugins: [
'~/plugins/firebase'
],
//...省略
pages/index.vue
내부에 송신 버튼을 마련하고,클릭으로 firestore에 데이터를 보냅니다.
pages/index.vue
<template>
<div class="container">
<button @click="submit">送信</button>
</div>
</template>
<script>
export default {
methods: {
submit() {
const db = this.$firebase.firestore();
db.collection('user').add({ name: 'hoge' })
.then(() => {
console.log('成功');
})
.catch((e) => {
console.log(e.message);
});
}
}
}
</script>
Reference
이 문제에 관하여(【Nuxt.js】Firebase와의 제휴 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/higa02/items/f74e7ea34d741b72ebf7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)