Vue3에 firebase를 연동하는 작업을 하는 중에, globalVariable을 사용하려 했으나 다음과 같은 오류가 발생하였다.
ReferenceError: firebase is not defined
Vue2에서는 Vue.prototype.$firebase = firebase 와 같은 구문을 사용하여 전역으로 firebase를 사용할 수 있었지만, Vue3에서는 해당 방법 대신 app.config.globalProperties.$firebase = firebase; 와 같은 구문을 사용해야 한다.
main.js
...
import firebaseApp from './plugins/firebase'
...
const app = createApp(App);
app.use(vuetify)
.use(router)
.mount('#app');
...
app.config.globalProperties.$firebase = firebaseApp;위와 같이 적용을 했음에도 불구하고 같은 에러가 났다. 계속 에러가 발생하는 이유는 Options API가 아니고 Composition API 방식이었기 때문이다.
위의 globalProperties 방법은 Options API를 사용하는 방법이고, Composition API에서는 provide와 inject를 사용하여 setup() 안에서 변수를 정의해주어야 한다.
provide로 app에 사용할 값을 제공해주고, 사용할 곳에서 inject로 변수에 주입하여 사용하면 된다.
다음과 같이 수정하여 작동하는 것을 확인할 수 있었다.
수정
main.js
...
import firebaseApp from './plugins/firebase'
...
const app = createApp(App);
app.use(vuetify)
.use(router)
.mount('#app');
...
app.provide('firebase', firebaseApp);index.js
import {inject} from 'vue';
...
setup() {
...
const firebase = inject('firebase');
...
}