This was really helpful! I was already using VueFire but my app's structure was so messy - this really helped in organising my app, and my thoughts. Thanks!
firebase: { names: namesRef }, [Vue warn]: Property or method "names" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property, I am getting this error, was looking for an answer on stackoverflow but cant find, I am not sure if this tutorial is outdated or methods deprecated could you please help thanks
@@pujanshrestha5436 yes, but it was long time ago :D i think there were 2 errors: 1.) in the main.js if you use real time db (like me): import { rtdbPlugin } from 'vuefire' Vue.use(rtdbPlugin) 2.) in the .vue file: import {namesRef} from '../firebase' export default { name: 'app', data() { return { items: [] } }, firebase: { items: namesRef } }
Actually is a real time database then it's "import { rtdbPlugin } from 'vuefire' Vue.use(rtdbPlugin)" vuefire.vuejs.org/vuefire/getting-started.html#plugin
Property or method "names" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. 11:40
@@victorvermeulen1746 I can't seem to figure this out even after reading the documentation, I added : names:" " in the return of the App.vue, I have no longer an error, but I don't have the name list either :c
Help Paul,I don't know how to fix it : (node:29344) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. import Vue from 'vue' ^^^^^^ SyntaxError: Cannot use import statement outside a module ___ even after I add "type":"module"in the package.jason ,it just : Error [ERR_MODULE_NOT_FOUND]: Cannot find module / TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".vue"
What if I want to deploy the project? how can I secure my crud operations? can you please show how to secure the API? or if someone can link me up to an explanation source it would be highly appreciated ...
I tried this way . but it shows error - "names" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. i also tried to declare names in data. then errors gone but no data shoes anyone can help me?
WARNING in ./src/main.js 6:8-15 "export 'default' (imported as 'VueFire') was not found in 'vuefire' @ ./src/main.js @ multi (webpack)-dev-server/client?localhost:8083 webpack/hot/dev-server ./src/main.js
because we called it names in the firebase object: firebase :{ names : namesRef ^^^^^^^ }, it's just a key name !! call it names or Names won't change anything.
@paul getting a error in console : firebase.js?d88e:2 Uncaught TypeError: __webpack_require__.i(...) is not a function .... const app = initApp({ also, can we not just import firebase from 'firebase'; ?
it is hard to learn everything if you work without npm... by the way,i had to write firebase.database() instead of app.database(), it took me much time to figure it out
anyone got an answer to this? vue.esm.js?efeb:591 [Vue warn]: Property or method "names" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. found in ---> at src/App.vue
![PURPEECH - นี่ฉันเองคนที่... (It's me) [Official MV]](http://i.ytimg.com/vi/NuhHd0hOOg8/mqdefault.jpg)
Thank you for this tutorial! I've been searching for firebase CRUD and this is the easiest to follow most streamlined tutorial I've seen.
Can you please make a video of CRUD app Vuejs and the new FireStore?
this :)
This was really helpful! I was already using VueFire but my app's structure was so messy - this really helped in organising my app, and my thoughts. Thanks!
Great walkthrough and easy to understand. Thank you!
Thanks! :)
simple and direct, thank you very much
Thank you, Paul! You just saved my day yesterday with one small hint :-)
+Rolf Eggenberger Glad I could help! :)
firebase: {
names: namesRef
},
[Vue warn]: Property or method "names" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property, I am getting this error, was looking for an answer on stackoverflow but cant find, I am not sure if this tutorial is outdated or methods deprecated could you please help thanks
i have the same error
i have the same error, did you fix it yet? ty
@@MrAcewill did you find answr?
@@ggwp7963 did you solve it1?
@@pujanshrestha5436 yes, but it was long time ago :D
i think there were 2 errors:
1.) in the main.js if you use real time db (like me):
import { rtdbPlugin } from 'vuefire'
Vue.use(rtdbPlugin)
2.) in the .vue file:
import {namesRef} from '../firebase'
export default {
name: 'app',
data() {
return {
items: []
}
},
firebase: {
items: namesRef
}
}
import { firestorePlugin } from 'vuefire'
Vue.use(firestorePlugin)
using this now
Actually is a real time database then it's
"import { rtdbPlugin } from 'vuefire'
Vue.use(rtdbPlugin)"
vuefire.vuejs.org/vuefire/getting-started.html#plugin
Thank you for this video!! It was so helpful to get started with firebase
Thanks for this! It really helped.
Thank you so much! Very useful. Like)
At this point in time I want to thank you for this video
awesome man....love you teaching style
Excellent! Thank you Paul!
Great man! So easy setup.
Thanks Willy!
Property or method "names" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. 11:40
vuefire.vuejs.org/vuefire/binding-subscriptions.html#declarative-binding It is explained here.
@@victorvermeulen1746 I can't seem to figure this out even after reading the documentation, I added : names:" " in the return of the App.vue, I have no longer an error, but I don't have the name list either :c
@@Keiturna i can`t display the names either. have you solved this problem?
Amazing stuff. But how would you add a loading spinner as the app fetches data from firebase? Vuefire adds a little complexity with that
Help Paul,I don't know how to fix it :
(node:29344) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
import Vue from 'vue'
^^^^^^
SyntaxError: Cannot use import statement outside a module
___
even after I add "type":"module"in the package.jason ,it just :
Error [ERR_MODULE_NOT_FOUND]: Cannot find module /
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".vue"
Mate, could you share your VS code theme settings ? I like it.👌
Remove doesn't work ... It says that it returned an undefined value ....
Is firebase is like a headless CMS?
Thanks Paul. It helps me much.
Great to hear Ron!
hi sir that's a very good tutorial :) can you make a tutorial on shopping cart or e-commerce kind of project in vue.js
thankyou :)
tnx simple and easy to understand :))
Hey Paul, Great as always (y), But please more of VueJs Videos would be amazing if possible :D
Nice. But, i have app using vue. And I write in single file html. How do I using firebase realtime database in my project?
Hey Paul what vs code theme are you using here?
looks like monokai
nope its material theme
Thank you for this tutorial
I believe the tutorial is a bit outdated in reference to Vuefire.
I wanted to display the generated id, and I dont know how, please help me. thanks!
What if I want to deploy the project? how can I secure my crud operations? can you please show how to secure the API? or if someone can link me up to an explanation source it would be highly appreciated ...
I tried this way .
but it shows error -
"names" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
i also tried to declare names in data.
then errors gone but no data shoes
anyone can help me?
what is the font of your Editor?
How can i get your code style or font style (explame const , { }) in visual studio?
WARNING in ./src/main.js
6:8-15 "export 'default' (imported as 'VueFire') was not found in 'vuefire'
@ ./src/main.js
@ multi (webpack)-dev-server/client?localhost:8083 webpack/hot/dev-server ./src/main.js
Great Video!
Thanks so much !!
Great video! Would you consider a video on vuejs + firebase auth and maybe extending this to have routes for each name and a few more fields? Thanks!
I want too
['.key'] always return undefined
A solution to this problem can be found here :stackoverflow.com/questions/37094631/get-the-pushed-id-for-specific-value-in-firebase-android
Do vuefire work in android app or IOS app? Do vuefire have firestore functions?
I thought this is accessible globally.. why is it that there's a need of importing of the firebaseConfig file?
You are great!
Thanks Anatoliy!
@paul why did you use v-bind:key in the v-for?
vuejs.org/v2/guide/list.html#key
vue requires it when u use v-for, I think it's for performance reason.
That's correct. :)
v-for why use personName of names instead of personName in Names?
because we called it names in the firebase object:
firebase :{
names : namesRef
^^^^^^^
},
it's just a key name !! call it names or Names won't change anything.
What is the name of vscode theme are you using?
can i used this lib with vue-native ?
What extension do you use to make your Vue code look colorful like that in VSCode?
u can configure sublime text there
How would i add multiple elements in a form like firstname, lastname, etc?
do as many inputs as you can and push it normally like :
namesRef.push({ firstname : this.firstname, lastname: this.lastname ,edit: false }); etc ...
@@ADiLHaddaoui how can iedit both of them? i tried but failed.
font name pls?
Operator www.typography.com/blog/introducing-operator
@paul getting a error in console :
firebase.js?d88e:2 Uncaught TypeError: __webpack_require__.i(...) is not a function
....
const app = initApp({
also, can we not just import firebase from 'firebase'; ?
it's : import { initializeApp } from 'firebase'; then const app = initializeApp({
it is hard to learn everything if you work without npm... by the way,i had to write firebase.database() instead of app.database(), it took me much time to figure it out
so use npm
Uncaught TypeError: Object(...) is not a function on line 3 of firebase.js ???? what does that mean?
Have you checked for any syntax errors?
Paul Halliday many times over.
It's a spelling mistake(Bloody UK and the US):
Please use:
import { initializeApp } from 'firebase';
const app = initializeApp({});
Hope this helps
Great
This won't work with cloud firestore ?
I'll work on a new Firestore version of this.
@@paulhalliday Great, i subscribed and waiting !
@@paulhalliday Great, I already subscribed and waiting for new version!
He is Crazy Cong...
WTF I can't make it work.
I'm using router, I don't know how to set that up.
If you can't get VueFire to install, check this out stackoverflow.com/questions/56416834/export-default-imported-as-vuefire-was-not-found-in-vuefire
9:47
anyone got an answer to this?
vue.esm.js?efeb:591 [Vue warn]: Property or method "names" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> at src/App.vue
You need to add this to your data object within the Vue instance. :)
Hi Paul, quick reply, thanks. You pointed me in the right direction and I got it working. Great tutorial. New subscriber. Appreciate your help!
Glad I could help! Enjoy Vue.js. 🙌
How can i write it so it works?
I hadn't imported it properly in main.js or something
what a hell