The Feature I’m LOVING in Vue 3.3

Today, I am excited to share with you my favorite new feature from Vue 3.3. This feature is the ability to use v-model with custom modifiers. In this tutorial, I will walk you through how to use this new feature with HTML tags.

First, let’s set up a new Vue project using Vue 3.3. You can do this by using the Vue CLI or by including the Vue script in your HTML file. Make sure you have Vue 3.3 or later installed.

Next, let’s create a simple Vue component with a custom input form. Here is an example of a template for our component:

<template>
  <div>
    <input v-model.trim.lowercase="message" />
    <p>Message: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

In this example, we are using the custom modifiers trim and lowercase with v-model. The trim modifier trims any whitespace from the input value, and the lowercase modifier converts the input value to lowercase.

Now, when the user types in the input field, the value will automatically be trimmed and converted to lowercase before being bound to the message data property. This makes it easier to manipulate and validate user input without having to write additional methods or watchers.

You can also create your own custom modifiers by defining them in the modifiers property of the Vue component. Here is an example of how you can define a custom modifier called uppercase:

<template>
  <div>
    <input v-model.trim.uppercase="message" />
    <p>Message: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  modifiers: {
    uppercase: {
      read(value) {
        return value.toUpperCase();
      },
      write(value) {
        return value.toLowerCase();
      }
    }
  }
};
</script>

In this example, the uppercase modifier converts the input value to uppercase when reading it from the input field and converts it back to lowercase when writing it back to the message data property.

Overall, the ability to use v-model with custom modifiers in Vue 3.3 is a powerful feature that allows you to easily manipulate and validate user input. I hope you found this tutorial helpful and that you can incorporate this feature into your own Vue projects. Happy coding!