This project was developed as an example of how to create a custom element in VueJS (version 2). It uses the random users API and displays the result in a table. After build the project, this custom element can be used in any HTML page.
It was implemented using two VueJS components: RandomUsers.vue and Grid.vue.
This component has filters for gender (Male. Female or Both) and two buttons (Load Users and Reset Table). Data is loaded using axios to make a request to the Random Users API. When the data is fetched, it is transferred to the Grid.vue component through props.
This component is responsible for displaying user data in a table.
Check the node version that is used in this project by opening the .nvmrc file which is at the root of the project. The first version of this project used version v14.16.0 but you must check if it's still valid or updated.
If you use (nvm) to manage your installed node versions and work on Linux or Mac Os computers, you can simply run the following command in order to start using the node version specified in .nvmrc file:
> nvm use
If you are using Windows, you have to install the target version (if not present), switch to that version and run it manually.
After cloning the project, you must install the npm modules that are defined in package.json file, running the following command:
> npm install
The package.json file implements commands to run the code under the key "scripts":
- "serve" (run project with default settings)
To run the project, execute the following command:
> npm run serve
The package.json file implements commands to build the code under the key "scripts":
- "build-ce" (build project with default settings)
To build the project, execute the following command:
> npm run build-ce
- axios: Promise based HTTP client for the browser and node.js
- core-js: Standard library
- vue: Reactive, component-oriented view layer for modern web interfaces.
- @vue/cli-plugin-babel: babel plugin for vue-cli
- @vue/cli-plugin-eslint: eslint plugin for vue-cli
- @vue/cli-service: local service for vue-cli projects
- babel-eslint: Custom parser for ESLint
- eslint: An AST-based pattern checker for JavaScript.
- eslint-plugin-vue: Official ESLint plugin for Vue.js
The folder example has the custom component already compiled and ready to test.
The custom element produced can be introduced in HTML pages as follows:
- include
<script src = "./ random-users.js"></script>in the HTML header - include custom element
<random-users></random-users>in the HTML body
By default, the grid data is loaded after a 2-second waiting period. However, custom element accepts a prop to customize the waiting time for obtaining data from random users api.
The existing props are:
| PROP NAME | TYPE | EXAMPLE | MEANING |
|---|---|---|---|
| wait | Number | 2000 | Time to wait in milliseconds |
-
No prop, wait has default value of 2000 (2 seconds)
<random-users></random-users> -
wait has value of 5000 (5 seconds)
<random-users wait="5000"></random-users>
