In this article, we will look at how to work with blur event in Vue using the v-on:blur or @blur directive with examples.

We will begin by creating a new application using Vue CLI.

❯ vue create blur-demo

Once, the installation is complete, we can navigate to the folder and run the server to load the application.

❯ cd blur-demo
❯ npm run serve

This will run our server on port 8080 by default http://localhost:8080/

v-on:blur (@blur)

In Vue, we make use of the v-on:blur directive or shorthand @blur to handle the blur event.

<input type="text" v-on:blur="myMethod" />

The v-on:blur will call the myMethod method when the input is out of focus. Let’s create a simple method to alert when the input is out of focus.

myMethod() {
  alert("Triggered on blur event");
}

Let’s see it in action by adding the above code in the App.vue file of our project.

// App.vue

<template>
  <input type="text" v-on:blur="myMethod" />
</template>

<script>
export default {
  name: "App",
  methods: {
    myMethod() {
      alert("Triggered on blur event");
    },
  },
};
</script>

blur-vue-1

blur-vue-2

That’s it! 😃