Adding .trim

We can use .trim with v-model to trim off the whitespace from the user input. See the following example:

// src/components/modifiers.vue
<textarea v-model.lazy.trim="form.message"></textarea>

Now the text from the user is trimmed automatically. Any extra whitespace at the beginning and end of the text will be trimmed off.

While writing custom validation logic is possible, there is already a great plugin that helps validate inputs easily and displays the corresponding errors. This plugin is called VeeValidate and is a template-based validation framework for Vue. Let's discover how we can leverage this plugin in the next section.