WEB APP DEVELOPMENT
My Favorite Vue Components
Reuse components to get off the ground quicker!
Vue.js is an elegant framework for front-end development in web applications. However, Vue by itself just provides the framework for building components. It doesn’t provide a collection of ready-to-use UI components. There are a number of great open-source projects providing useful Vue components (or component libraries) in the Vue ecosystem. In this post, I discuss a few which are my favorite.
Before going further, let me mention that awesome-vue is a great curated list of awesome resources for all things Vue. It has an extensive list of components and component libraries, utilities, open-source projects using Vue, tutorials, books, blog articles, courses, etc. related to Vue. So if you are looking for something specific and it exists, you will most likely find it mentioned in awesome-vue. Now, let’s get started.
Bootstrap
The first issue to address while developing a front-end application is to choose a suitable CSS framework for developing responsive and mobile-first websites. My personal choice is Boostrap. BootstrapVue is a great binding of Bootstrap for Vue.js. This component library includes a wide variety of components (based on corresponding Bootstrap components). Some of the most commonly used ones include alerts, badges, breadcrumbs, buttons, calendars, cards, carousels, dialogs, dropdowns, forms, images, jumbotrons, tables, tabs, toasts, and tooltips.
The basic UI layout is done using the Bootstrap grid system which is built on top of flexbox. Key components in BootstrapVue for layout are <b-container>, <b-row> and <b-col>. See Layout and Grid System for details. However, I have found that the CSS grid layout sometimes works much better for more advanced layouts. See Grid by Example for more information.
Forms are critical for collecting user input. BootstrapVue form controls are featureful and developer-friendly. See here for more information. Available form controls include input, textarea, select, radio, checkbox, file, datepicker, spinbutton, tags, timepicker, rating, form groups. In addition, it includes a wide variety of buttons.
The b-table component is super-rich. It is fully data-driven (with data from your component). It includes sorting, filtering, hover, stripes, pagination, sticky headers, etc. as built-in features. Check out its documentation to see a variety of examples.
b-breadcrumb makes creating data-driven breadcrumbs straightforward. You can easily process the $route.path variable to convert the path into an array of breadcrumbs.
Navbar is great for building the navigation menu (usually at the top of the webpage). You can include links (to different parts of your single page application), badges, dropdowns, search boxes, icons, and whatnot.
Here are a few tutorials for familiarizing yourself with BootstrapVue.
- Getting started with BootstrapVue
- Integrating Bootstrap with Vue.js Using Bootstrap-Vue
- Layout and Grid System
- Build Responsive Carousel in Vue.Js with BootstrapVue
- BootstrapVue — Jumbotrons and Layouts
- BootstrapVue — Tabs
- BootstrapVue — Tooltips and Popover Directives
More Layout
Sidebars are a common feature in rich applications. You can put in hierarchical menus and maybe some summarized information in the sidebars. vue-sidebar-menu is my favorite solution for implementing hierarchical menus. You can organize the menu in sections, have multiple level hierarchy in individual menu items, add icons to menu items, collapse and expand the sidebar and even have dark/light themes out of the box. See demos here.
Dialogs
Modal Dialogs are a vital component of the UI flows of large applications. You use them for simple alerts, prompts, and confirmations. Frequently, detailed information about some entity is shown in a popup dialog. While BootstrapVue includes a dialog component, I find it quite clumsy to use. For simple alerts and confirmations, vuejs-dialog is pretty good. For more advanced use-cases, I suggest vue-js-modal. It supports resizable, adaptive, draggable dialogs with user-defined components.
Utilities
While BootstrapVue includes a wide variety of form input components, its input validation capability is somewhat limited and inflexible. For more flexibility, you can use vee-validate. A number of rules are built-in which pose constraints on acceptable input: alphabetic, alpha-dash, alphanumeric, between a range of values, digits only, email, image, max, min, numeric, regex matching, required, excluded values, allowed values, etc. The rules can be specified in the template and can be chained easily. Custom rules can be defined easily and integrated with the library. See docs here.
Drag and Drop is a common functionality in web applications. SortableJS is a popular JavaScript library for reorderable drag-and-drop lists. It supports a number of frameworks including Vue. Its Vue plugin is known as Vue.Draggable. You can see a number of examples built on Vue.Draggable here. You can customize the styling using CSS. If you are braver, you can study the SASS stylesheet of the component in vue-sidebar-menu.scss and change/override it completely.
Single select and multi-select are common input mechanisms. Barebones HTML <select> element is quite limited. Advanced user interfaces try to make selection easier by providing a number of additional capabilities, for example, single/multiple-select, tagging, filtering, searching, asynchronous select, AJAX support, and Vuex support. Here are two very good components. vue-select and vue-multiselect.
Sometimes, you want to let users copy some text from some specific component to their system clipboard. clipboard.js provides makes it super easy in JavaScript. vue-clipboard2 is a simple binding for it for use in Vue applications.
File upload is hard. Especially hard when you want advanced features like multi-file upload, directory upload, drag and drop upload, ability to upload multiple files at the same time, preview an image before uploading, working with both POST and PUT endpoints, uploads via AJAX requests, advanced checks on input file type, probably parsing the header of the file being uploaded to verify few facts before uploading it. vue-upload-component is a one-stop solution for all of these concerns. Some great examples are available here. While its put-action and post-action callbacks are great for integrating with PUT and POST endpoints, I particularly love the custom-action callback option as it allows me to do additional preprocessing and postprocessing around the actual file upload process.
If you want rich text editing capabilities, a good solution is Quill. It’s a fully customizable editor with extensive formatting support and modular functionality like clipboard, history, and keyboard support. Additional modules can be registered easily. vue2-editor is a wrapper component that brings Quill capability to Vue 2 applications in a seamless manner.
Inter Component Communication
The recommended approach for communication between components is Vuex. Vuex is a state management pattern + library for Vue.js applications. It manages a global and hierarchical state for the application which is accessible to all Vue components.
However, sometimes, it may be overkill. All you may need is a simple publish-subscribe design pattern where one component publishes some event and other components that are interested in the said event subscribe to it. It turns out that Vue can easily be used as an Event Bus. Here are some articles on the subject:
- Vue as Event Bus — Life is Happier
- Using event bus in Vue.js to pass data between components
- Creating a Global Event Bus with Vue.js
BTW, vuex-persist is a useful plugin to cache your Vuex state in the browser’s local storage. This way, whenever your application reloads, it can reuse the previously saved state. For example, if you have a paginated table, you may want to preserve the current page number in Vuex. Whenever the application reloads, it may bring the user to the same page number.
Parting Notes
At the moment, two versions of Vue are in Vogue. Vue 2 is the current stable version and Vue 3 is the upcoming new version. Please make sure that the library you are using is compatible with the Vue version you are working with. I work with Vue 2 only.
Whenever possible, try to install the components from NPM as a package dependency in your project. The load time of your web application is dependent on the amount of code included. The more dependencies you add, the slower your website will be to load and get going. Hence, please be careful before adding more dependencies. If two libraries have overlapping functionality, go for one. Sometimes, you can just study the implementation of a component and implement a stripped-down version in your own code-base which satisfies your specific needs. Tree-shaking helps in ensuring that the production build of your website code removes parts of your dependencies that are not really being used.
Let me know in the comments some of your favorite components. I will try to include them in updates.
