Code example demonstrating the concept

How to create an alias for a Vue component?

Sometimes, you use third-party libraries who develop useful components. It was the case for me with VeeValidate. But the names of the component may not suit you or your linter. Let’s see how solve either of these issues.

I’ve found myself using VeeValidate library in the Masterclass of VueSchool.io.

While they taught the course in JavaScript, I decided to complete it in TypeScript. What a challenge!

At one point, we had to import the Form and Field component of the library the following way using JavaScript and the Options API:

1
2
3
4
5
6
import { Form, Field } from "vee-validate";
export default {
  components: {
    VeeForm: Form,
    VeeField: Field,
  }

But, how do you do it using TypeScript in the Composition API?

Simple: use the import aliases.

1
import { Form as VeeForm, Field as VeeField } from "vee-validate";

While you could have used the same with the Options API, you must use this technique with the Composition API to:

  • Follow the style guide rules of Vue
  • Name the library component as you wish.

Then, I could use the components in the template:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<template>
      <vee-form @submit="register" class="card card-form">
        <h1 class="text-center">Register</h1>
        <div class="form-group push-top">
          <label for="name">Full Name</label>
          <vee-field
            name="name"
            v-model="form.name"
            id="name"
            type="text"
            class="form-input"
          />
        </div>

        <div class="form-group">
          <label for="email">Email</label>
          <vee-field
            name="email"
            v-model="form.email"
            id="email"
            type="email"
            class="form-input"
          />
        </div>

        <div class="form-group">
          <label for="password">Password</label>
          <vee-field
            name="password"
            v-model="form.password"
            id="password"
            type="password"
            class="form-input"
          />
        </div>
          <label for="username">Username</label>
          <vee-field
            name="username"
            v-model="form.username"
            id="username"
            type="text"
            class="form-input"
          />
        </div>
        <div class="form-actions">
          <button type="submit" class="btn-blue btn-block">Register</button>
        </div>
      </vee-form>
</template>
License GPLv3 | Terms
Built with Hugo
Theme Stack designed by Jimmy