In the previous article, we saw how we can limit the input characters text using a temporary state in Vue.js. In this tutorial, we’ll look at how we can do the same but using the maxlength property of the HTML.

Here’s the code to demonstrate the same:

<script setup>
import { ref } from 'vue'
const inputText = ref(null)
</script>

<template>
<div>
    <h2>
      Enter name:
    </h2>
    <input type="text" v-model="inputText" maxlength="10"/>
    <p>
      Entered name: {{ inputText }}
    </p>
</div>
</template>
Code language: HTML, XML (xml)

In the above code we’ve added a maxlenth=”10″ attribute to limit the input characters to 10. This will prevent the user from inputting more characters in the field.

You can find a working version of the above code from the repo links below:

Codesandbox / Demo | Github