Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Binding support for Vue 3 !? #898

Closed
infantiablue opened this issue Sep 26, 2020 · 12 comments
Closed

Binding support for Vue 3 !? #898

infantiablue opened this issue Sep 26, 2020 · 12 comments

Comments

@infantiablue
Copy link

infantiablue commented Sep 26, 2020

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/vuefire@2.2.4/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

@posva
Copy link
Member

posva commented Sep 26, 2020

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

@posva posva closed this as completed Sep 26, 2020
@infantiablue
Copy link
Author

It's nice to hear that. Thanks again for your efforts on this awesome project.

@Sun3
Copy link

Sun3 commented Oct 21, 2020

Glad to hear, I wanted to check on the progress.

Thank you.

@alijuniorbr
Copy link

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.

@Sun3
Copy link

Sun3 commented Nov 2, 2020

@posva Can you give us an update for supporting Vue 3?

Thank you.

@ljcremer
Copy link

@posva Do you maybe have a time in mind for this?

@robertjbass
Copy link

Assuming this is still broken?

@ptrxyz
Copy link

ptrxyz commented Dec 17, 2020

I'm lining up with the others, any news on this? Would love to try it :)

@posva
Copy link
Member

posva commented Dec 17, 2020

Use the npm tag next

@kossmokvin
Copy link

Any news for Vue 3 support?
Thank you in advance

@Hibrix-net
Copy link

@posva Any news here?
Many thanks.

@posva
Copy link
Member

posva commented Jan 10, 2022

#898 (comment)

@vuejs vuejs locked as spam and limited conversation to collaborators Jan 10, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants