How can I implement async validation in Vue forms?

How can I implement async validation in Vue forms?

You can use the async option in your validation rules. For example, you can create a method that checks if a username is already taken.

Can you show me a code example for that?

Sure! Here's a simple example:

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

You would call validateUsername on the input's blur event.

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

You can use a data property to track the loading state. Set it to true before the fetch call and false after it. Then, you can conditionally render a loading spinner in your template.