How can I implement async validation in Vue.js?

How can I implement async validation in Vue.js?

You can use the async option in your validation rules. For example, you can create a method that checks the server for existing usernames.

Can you show me a code example?

Sure! Here's a simple example:

export default {
  data() {
    return {
      username: '',
      usernameAvailable: false,
    };
  },
  methods: {
    async checkUsername() {
      const response = await fetch(`/api/check-username?username=${this.username}`);
      this.usernameAvailable = await response.json();
    }
  }
};

You would call checkUsername in your validation rule.

What if I want to show a loading indicator while checking?

You can use a loading state. Set a loading variable to true before the fetch call and set it to false after.