Using an InputMask with Vue (e.g. The Vue Ecosystem)


Vue.jsOne of the first times I started working with Vue, I was concerned about it's long-term success. I was coming from Angular and their ecosystem is huge.

I was delighted to find that the ecosystem is pretty varied. The Vue website tries to make it easier to find the kinds of libraries and components that you might need. It comes from two places on the website.

On the Vue website, you can look in the Ecosystem menu:

Vue Curated

"Vue Curated" is a list of recommended plugins that the community has created, and "Awesome Vue" is a github repo that collects pretty much everything from the community. Let's show you an example...

Asking an Input Mask to Vue

If you came to this blog for the input mask example, you're reading the right section! I looked through "Awesome Vue" and found a handful of input masks. Just like any other ecosystem (e.g. jQuery), you have to find the one that matches your requirements. I picked one that I thought would be lightweight:

Masked Inputs

The first thing I did was just add the masked input to the package.json file to bring it into the project:

  "dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1",
    "axios": "0.18.0",
    "vue-inputmask": "0.2.1"
  },

Once Visual Studio finishes installing the package (or you'll need to run npm install if you're running this in VS Code), you can add the new directive to the project. In my main.js, I just import the project and use Vue.use to bootstrap it:

import VueInputMask from "vue-inputmask"

// Add support for input mask
Vue.use(VueInputMask.default);

Now that it's added, I can use it in my view. This particular Masked Input, just allows you to add a v-mask to your markup like so:

      <div class="form-group">
        <label for="phone">Phone</label>
        <input type="tel" 
               name="phone" 
               class="form-control" 
               v-mask="'(999) 999-9999'" 
               v-model="customer.phone" />
      </div>

(BTW, I know how bad this is for localization, but for a simple example I'm going for it.)

You can see I am using v-mask to set a phone number mask. Note the inner single quotes are required. This results in an input that forces the format:

Masked Edit

This masked edit also allows you to change some of the properties of how the masked edit works by adding properties. But this requires that we change the text version to an object version of the mask (note the object syntax inside the v-mask):

      <div class="form-group">
        <label for="phone">Phone</label>
        <input type="tel" 
               name="phone" 
               class="form-control" 
               v-mask="{ mask: '(999) 999-9999', placeholder: '#' }" 
               v-model="customer.phone" />
      </div>

This results in this:

Masked Edit with Placeholder

This particular mask won't let you easily switch a mask based on values of other fields, but should be coming soon. So to make it work for both Canada and US Postal Codes, I put two masks (as an array) to use one of the masks based on the type of input. For example:

      <div class="form-group">
        <label for="postalCode">Postal Code</label>
        <input type="text" 
               name="postalCode" 
               class="form-control" 
               v-mask="{ mask: ['99999-9999','9A9 A9A'], placeholder: '#' }" 
               v-model="customer.postalCode" />
      </div>

Results in this:

Multiple Masks

Hopefully this post has both explained how to find the Vue ecosystem and how to use this light masked edit.

The code for the example is available at:

https://github.com/shawnwildermuth/VueMaskedEditExample

Let me know in the comments.



Shawn
Shawn Wildermuth
Author, Teacher, and Coach




My Courses

Wilder Minds Training
Vue.js by Example
Bootstrap 4 by Example
Intro to Font Awesome 5 (Free Course)
Pluralsight
Designing RESTful Web APIs (new)
Building an API with ASP.NET Web API
Building an API with ASP.NET Core
Building a Web App with ASP.NET Core, MVC6, EF Core, Bootstrap and Angular
Less: Getting Started

Application Name WilderBlog Environment Name Production
Application Ver v4.0.30319 Runtime Framework x86
App Path D:\home\site\wwwroot\ Runtime Version .NET Core 3.0.0
Operating System Microsoft Windows 10.0.14393 Runtime Arch X86