Getting Started with the Vue Textbox Component in Vue 2

23 Sep 202417 minutes to read

This article provides a step-by-step guide for setting up a Vue 2 project using Vue-CLI and integrating the Syncfusion Vue Textbox component using the Composition API / Options API.

To get start quickly with Vue TextBox component, you can check on this video:

Prerequisites

System requirements for Syncfusion Vue UI components

Dependencies

The following list of dependencies are required to use the TextBox component in your application.

|-- @syncfusion/ej2-vue-inputs
  |-- @syncfusion/ej2-inputs
  |-- @syncfusion/ej2-base

Setting up the Vue 2 project

To generate a Vue 2 project using Vue-CLI, use the vue create command. Follow these steps to install Vue CLI and create a new project:

npm install -g @vue/cli
vue create quickstart
cd quickstart
npm run serve

or

yarn global add @vue/cli
vue create quickstart
cd quickstart
yarn run serve

When creating a new project, choose the option Default ([Vue 2] babel, eslint) from the menu.

Vue 2 project

Once the quickstart project is set up with default settings, proceed to add Syncfusion components to the project.

Add Syncfusion Vue packages

Syncfusion packages are available at npmjs.com. To use Vue components, install the required npm package.

This article uses the Vue Textbox component as an example. Install the @syncfusion/ej2-vue-inputs package by running the following command:

npm install @syncfusion/ej2-vue-inputs --save

or

yarn add @syncfusion/ej2-vue-inputs

Import Syncfusion CSS styles

You can import themes for the Syncfusion Vue component in various ways, such as using CSS or SASS styles from npm packages, CDN, CRG and Theme Studio. Refer to themes topic to know more about built-in themes and different ways to refer to themes in a Vue project.

In this article, the Material theme is applied using CSS styles, which are available in installed packages. The necessary Material CSS styles for the Textbox component and its dependents were imported into the <style> section of src/App.vue file.

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
</style>

The Custom Resource Generator (CRG) is an online web tool, which can be used to generate the custom script and styles for a set of specific components.
This web tool is useful to combine the required component scripts and styles in a single file.

Adding TextBox to the application

Add the input element with e-input class into the <template> section of the App.vue file in src directory.

<template>
    <div id ='wrap'>
        <div id ='input-container'>
            <div>
                <!--element which is going to render the TextBox-->
                <input class="e-input" type="text" placeholder="Enter Date" />
            </div>
        </div>
    </div>
</template>

Adding icons to the TextBox

You can create a TextBox with icon as a group by creating the parent div element with the class e-input-group and add the icon element as span with the class e-input-group-icon. For detailed information, refer to the Groups section.

      <!--element which is going to render the TextBox with date icon-->
      <div class="e-input-group">
            <input class="e-input" name='input' type="text" placeholder="Enter Date"/>
            <span class="e-input-group-icon e-input-popup-date"></span>
      </div>

  .e-input-group-icon.e-input-popup-date:before {
    content: "\e901";
  }

Run the project

To run the project, use the following command:

npm run serve

or

yarn run serve

Output will be as follows:

<template>
    <div class='wrap'>
        <div id='input-container'>
            <input class="e-input" type="text" placeholder="Enter Date" />
            <div class="e-input-group">
                <input class="e-input" name='input' type="text" placeholder="Enter Date" />
                <span class="e-input-group-icon e-input-popup-date"></span>
            </div>
        </div>
    </div>
</template>
<script setup>
import { onMounted } from 'vue';
onMounted(() => {
    // To get the all input fields and its container.

    let inputElement = document.querySelectorAll('.e-input-group .e-input,.e-float-input.e-input-group input');

    // Add 'e-input-focus' class to the input for achive ripple effect when focus on the input field.

    for (let i = 0; i < inputElement.length; i++) {
        inputElement[i].addEventListener("focus", function () {
            let parentElement = inputElement[i].parentNode;
            if (parentElement.classList.contains('e-input-in-wrap')) {
                parentElement.parentNode.classList.add('e-input-focus');
            } else {
                inputElement[i].parentNode.classList.add('e-input-focus');
            }
        });
        inputElement[i].addEventListener("blur", function () {
            let parentElement = inputElement[i].parentNode;
            if (parentElement.classList.contains('e-input-in-wrap')) {
                parentElement.parentNode.classList.remove('e-input-focus');
            } else {
                inputElement[i].parentNode.classList.remove('e-input-focus');
            }
        });
    }

    // Add 'e-input-btn-ripple' class to the icon element for achive ripple effect when click on the icon.

    var inputIcon = document.querySelectorAll('.e-input-group-icon');
    for (let i = 0; i < inputIcon.length; i++) {
        inputIcon[i].addEventListener('mousedown', function () {
            inputIcon[i].classList.add('e-input-btn-ripple');
        });
        inputIcon[i].addEventListener('mouseup', function () {
            setTimeout(function () {
                inputIcon[i].classList.remove('e-input-btn-ripple');
            }, 500);
        });
    }
});
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

.wrap {
    box-sizing: border-box;
    margin: 0 auto;
    padding: 20px 10px;
    width: 340px;
}

#input-container .e-input-group {
    margin: 30px 0;
}

.e-input-group-icon:before {
    font-family: e-icons;
}

.e-input-group .e-input-group-icon.e-input-popup-date {
    font-size: 16px;
}

.e-input-group.e-small .e-input-group-icon.e-input-popup-date {
    font-size: 14px;
}

.e-input-group-icon.e-input-popup-date:before {
    content: "\e901";
}
</style>
<template>
    <div class='wrap'>
        <div id='input-container'>
            <input class="e-input" type="text" placeholder="Enter Date" />
            <div class="e-input-group">
                <input class="e-input" name='input' type="text" placeholder="Enter Date" />
                <span class="e-input-group-icon e-input-popup-date"></span>
            </div>
        </div>
    </div>
</template>
<script>

export default {
    data: function () {
        return {}
    },
    mounted: function () {
        // To get the all input fields and its container.

        let inputElement = document.querySelectorAll('.e-input-group .e-input,.e-float-input.e-input-group input');

        // Add 'e-input-focus' class to the input for achive ripple effect when focus on the input field.

        for (let i = 0; i < inputElement.length; i++) {
            inputElement[i].addEventListener("focus", function () {
                let parentElement = this.parentNode;
                if (parentElement.classList.contains('e-input-in-wrap')) {
                    parentElement.parentNode.classList.add('e-input-focus');
                } else {
                    this.parentNode.classList.add('e-input-focus');
                }
            });
            inputElement[i].addEventListener("blur", function () {
                let parentElement = this.parentNode;
                if (parentElement.classList.contains('e-input-in-wrap')) {
                    parentElement.parentNode.classList.remove('e-input-focus');
                } else {
                    this.parentNode.classList.remove('e-input-focus');
                }
            });
        }

        // Add 'e-input-btn-ripple' class to the icon element for achive ripple effect when click on the icon.

        var inputIcon = document.querySelectorAll('.e-input-group-icon');
        for (let i = 0; i < inputIcon.length; i++) {
            inputIcon[i].addEventListener('mousedown', function () {
                this.classList.add('e-input-btn-ripple');
            });
            inputIcon[i].addEventListener('mouseup', function () {
                let element = this;
                setTimeout(function () {
                    element.classList.remove('e-input-btn-ripple');
                }, 500);
            });
        }
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

.wrap {
    box-sizing: border-box;
    margin: 0 auto;
    padding: 20px 10px;
    width: 340px;
}

#input-container .e-input-group {
    margin: 30px 0;
}

.e-input-group-icon:before {
    font-family: e-icons;
}

.e-input-group .e-input-group-icon.e-input-popup-date {
    font-size: 16px;
}

.e-input-group.e-small .e-input-group-icon.e-input-popup-date {
    font-size: 14px;
}

.e-input-group-icon.e-input-popup-date:before {
    content: "\e901";
}
</style>

Floating label

The floating label TextBox floats the label above the TextBox after focusing, or filled with value in the TextBox. You can create the floating label TextBox by using floatLabelType API.

<template>
  <div class='wrap'>
    <div id='input-container'>
      <ejs-textbox id='textbox' floatLabelType="Auto" placeholder="First Name"></ejs-textbox>
    </div>
  </div>
</template>
<script setup>
import { TextBoxComponent as EjsTextbox } from '@syncfusion/ej2-vue-inputs';

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

.wrap {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 20px 10px;
  width: 340px;
}
</style>
<template>
  <div class='wrap'>
    <div id='input-container'>
      <ejs-textbox id='textbox' floatLabelType="Auto" placeholder="First Name"></ejs-textbox>
    </div>
  </div>
</template>
<script>
import { TextBoxComponent } from '@syncfusion/ej2-vue-inputs';

export default {
  name: "App",
  components: {
    "ejs-textbox": TextBoxComponent
  },
  data: function () {
    return {}
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

.wrap {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 20px 10px;
  width: 340px;
}
</style>

See Also