Element for VueJS: 5 things to love and 5 things to hate

Denny Headrick
Jul 28, 2017 · 5 min read

Anybody that works with me has heard of VueJS, and if they’re on the same team, they have learned to love it… at least enough to say “it’s… interesting” (that’s love right?!) After purchasing stickers with a VueJS logo, even my wife is somewhat aware of it. As such, I love to peruse Awesome Vue, since it confirms my biases, and I happened to stumble on Element. There are a lot of awesome libraries out there, but my requirements and preferences included:

  • Support Internet Explorer at all costs!
  • Bootstrap is everywhere, I didn’t want to use a variation of that
  • Material Design is cool, but I wanted a change of pace

toLove[0]=Cascaders(){

Cascaders are attractive and intuitive components that provide a great way for users to input data that is based upon 1-to-many relationships. As the name suggests, it cascades the data for you. It even provides a filterable option that allows users to type in the values they are looking for and it returns results from multiple tiers.

In order to use this component I had to use objects with child relationships established. This might be a hassle if you don’t have those relationships already mapped out.

Also, this component’s model is based upon an array. I used a computed property with a setter to plug in as a v-model on this component

};

toLove[1]=ColorPickers(){

I’ll admit it. I have no use for this component at work, and I probably never will, but as I browsed the Element’s homepage, I expected a select-box style of selecting a handful of colors. I may be too easily impressed with pretty things as it turns out that creating this effect is far from magic. The underlying component is merely using gradients and calculating the position of event clicks, but I don’t think I could create a more attractive or more elegant color picking component.

};

toLove[2]=Transfers(){

Perhaps, an awkward name, but an attractive component that allows you to move one array of objects to another. This back-and-forth style is not an original idea, but the component, as with many of the components, allows you to activate a filterable property that makes it very nice.

};

toLove[3]=Tabs(){

I have had to use tabs in most of my projects, and there is always a bit of awkwardness when using them in the context VueJS. Why? My first reaction is always to try to implement them with arrays and there are special ways you have to deal with arrays in VueJS.

Element provides a convenient interface for their tab components:

<el-tabs type="border-card">   
<el-tab-pane>
<span slot="label">
<i class="el-icon-date"></i> Route
</span>
Route
</el-tab-pane>
<el-tab-pane label="Config">
Config
</el-tab-pane>
<el-tab-pane label="Role">
Role
</el-tab-pane>
<el-tab-pane label="Task">
Task
</el-tab-pane>
</el-tabs>

While there are events and other props worth learning about, this is a component that’s easy enough to learn based upon the usage example above.

},

toLove[4]=Slider(){

Sliders are a simple addition to form that really spice up number inputs. Clearly, these types of components fair well on mobile devices, but they are fun to use on desktops. This component pairs well with the switches to make a nice “Wow” factor for impressing customers.

};


toHate[0]:Tables(){

The tables are attractive enough as well. They offer the ability to resize, filter, sort, and respond to several events. However, with over 60 properties/events related to this component, it’s a bit difficult to understand all the options available to you. The filters do not allow you to filter out by typing text, which was necessary for me. Although you can create customized columns, the component does not allow for a customized row (which would be useful for creating your own version of a filter.)

I ended up creating a wrapper component to take advantage of the table’s appearance and sorting, but I had to handle the filtering separately.

},

toHate[1]:Documentation(){

Few people have good documentation or a good way to present it, but developers in the VueJS community have a high standard. On top of having to scroll for days on the table page, many of the pages lack any real substance.

},

toHate[2]:Language(){

Chinese is deeply embedded into the components. Working with a CDN in a production environment is not a reasonable option unless you make sure that all of your el-select boxes have placeholders in English, or you will likely get flashes of Chinese.

},

toHate[3]:Tooltips(){

The tooltips are visually nice, but I’d prefer them to work via a directive/property instead of wrapping them in a component.

These tooltips come with a lighter theme as well.

},

toHate[4]:Icons(){

The library includes a pack of 39 icons and defaults for them in most cases without allowing for an easy switch. The loader component, for example, uses their icon and makes it tricky to swap out.

The limited number of icons means you may need to hang on to your iconic Font Awesome reference.

}


Conclusion

While every library has some things that are aggravating, Element’s UI components are a blast to use. It includes some other things, like modals, date-pickers, and grid layouts, that are ubiquitous in many of the style libraries out there. I was able to shift my project from Foundation to this library without a whole lot of pain.

What libraries do you think are awesome?

Denny Headrick

Written by

https://dennyheadrick.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade