Vue Element Library on google chrome and other browsers
Published: 2022-11-12 10:08:00

Element is a Vue based component library for designers, developers and product managers and has been made in different versions and different languages. Version 2.0 is majorly referred to as Element while version 3.0 is referred to as Element plus.

Element follows design discipline: Consistency, Operation Feedback, Efficiency, ease of Identification, straightforward Interface and controllability. Developer: 

https://github.com/ElemeFE/element
Site URL: https://bit.dev/

FrameWork: VueJS
Library: Element.io

**Purpose of the Integration**

The Element Library contains different components:

**Basic**: Made up of Layout, color, Typography, Icon, Button

**Form**: Radio, Checkbox, Input Number, Select, Cascader, Switch, Slider, Time Picker, Date Picker, DateTime Picker, Upload, Rate, ColorPicker, Transfer, Form.

**Date:** Table, Tag, progress, Tree, Pagination, Badge

**Notice:** Alert, Loading, Message, Message Box, Notification

**Nav:** NavMenu, Tabs, Breadcrumb, Dropdown, Steps

**Other**: Dialog, Tooltip, Popover, Card, Carousel, Collapse
Bit.dev’s website integrates Element as a core aspect of its site. Element has different Navigations: sidebar Navigation and Top navigation. By hovering on various aspects of the UI, Element is seen to take up a large chunk of it.
	   
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hr1rm19dvvu3f3hm3qej.png)


**Side Navigation**: Fix the navigation at the left edge, thus improves its visibility, making it easier to switch between pages. In case, the top area of the page holds commonly used tools eg search bar, help button, notice button, etc. Suitable for background management or utility websites. https://element.eleme.io/#/en-US


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/muqj2v8jwb7gt8lwuflz.png)
Level 1 Categories: Suitable for simply structured sites with only one level of pages. No breadcrumb is needed.


**Level 2 Categories:** Sidebar displays up to two levels of navigation. Breadcrumbs are recommended in combination with second level navigation, making it easier for the users to locate and navigate.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9x3k36bbt2b95s73djdp.png)


**Level 3 Categories: **Suitable for complicated utility websites. The left sidebar holds first level navigation and the middle column displays second level navigation or other utility options.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3q924vedmhm82oe9mr8b.png)

**Setup Code**


npm installation is recommended and it works seamlessly with webpack.
npm i element-react –save
	   
 
npm i element-ui -S
To get the CDN, go to unpkg.com/element-ui

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0aig8pabshoxu4rlv1nx.png)

**Theme**: Before the building. You need a style theme, here we recommend you to pick up element-theme-default.
npm install element-theme-default –save
	   
 
**Internalization**: The default language of Element is Chinese. If you wish to use another language, you will need to do some configuration in your entry file, Built-in-transition: You can use Element’s built-in transition directly.	   
 
**Fig 2.7 Compatibility**
The library is compatible with a lot of browsers especially modern browsers however differing in compatibility. It also extends across ensuring that it can be used with fewer limitations.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s7tgrewx6w91ln1ndger.png)


	   
 
https://caniuse.com/?search=element.io
Fig 2.8
**Any deficiencies with the development approach**
No deficiencies have been recorded or observed so far. The Element library has proven

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e2221wcekiyf8pbgxho1.png)

My Twitter Handle: https://twitter.com/mchelleOkonicha

My LinkedIn Handle: https://www.linkedin.com/in/buchi-michelle-okonicha-0a3b2b194/