Vuefire: Binding support for Vue 3 !?

Created on 26 Sep 2020  路  9Comments  路  Source: vuejs/vuefire

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

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

All 9 comments

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

Was this page helpful?
0 / 5 - 0 ratings