I'm still learning about Vue 3, and try to use Vuefire for my upcoming projects. Then, I am experiencing with the official examples from vuejs.org (https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-firebase-validation) which is using Vue 2. Then, I am trying to use Vue 3, but the binding function doesn't work:
update with latest packages
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/[email protected]/dist/vuefire.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase.js"></script>
then
`
<script>
var emailRE = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
var config = {
apiKey: "AIzaSyAi_yuJciPXLFr_PYPeU3eTvtXf8jbJ8zw",
authDomain: "vue-demo-537e6.firebaseapp.com",
databaseURL: "https://vue-demo-537e6.firebaseio.com"
};
firebase.initializeApp(config);
var usersRef = firebase.database().ref("users");
// create Vue app
const app = createApp({
// initial data
data() {
return {
newUser: {
name: "",
email: ""
}
},
users: []
},
// firebase binding
// https://github.com/vuejs/vuefire
firebase: {
users: usersRef
},
// computed property for form validation state
computed: {
validation: function () {
return {
name: !!this.newUser.name.trim(),
email: emailRE.test(this.newUser.email)
};
},
isValid: function () {
var validation = this.validation;
return Object.keys(validation).every(function (key) {
return validation[key];
});
}
},
// methods
methods: {
addUser: function () {
if (this.isValid) {
usersRef.push(this.newUser);
this.newUser.name = "";
this.newUser.email = "";
}
},
removeUser: function (user) {
usersRef.child(user[".key"]).remove();
}
}
}).mount("#app");`
Thanks for your reading
I have started developing it but it isn't finished. It will probably be out in the following week. I have the work on a private repository before moving it to a different branch on this repo
It's nice to hear that. Thanks again for your efforts on this awesome project.
Glad to hear, I wanted to check on the progress.
Thank you.
It is very good to know that. I would also like to thank you for your efforts on this really useful project. I'm just waiting for your update to move my project to Vue 3.
@posva Can you give us an update for supporting Vue 3?
Thank you.
@posva Do you maybe have a time in mind for this?
Assuming this is still broken?
I'm lining up with the others, any news on this? Would love to try it :)
Use the npm tag next
Most helpful comment
I have started developing it but it isn't finished. It will probably be out in the following week. I have the work on a private repository before moving it to a different branch on this repo