VueJS is a top JavaScript framework with an extensive library, but there are several reasons you'll want to know how to create your own custom components. Here's how to get started.
Introduction
VueJS has been, for quite some time, one of the top three frontend JavaScript frameworks. Its environment has grown to encompass a great number of libraries, from complex ones with a myriad of components to simple ones built to speed up particular tasks encountered in day-to-day development. With this in mind, you might be wondering why you would want to develop your own base components, such as buttons, dialogs, input texts, etc., when you can import it all. There are four answers to this question.
- You'll get a better understanding of how components are built under the hood;
- You'll be able to implement them in your own unique way, with some characteristics that other libraries might not have;
- You'll learn some cool CSS tricks and be able to give your components your own colors;
- You may be able to build your own library and put it out into the world.
For our first component, let's make a responsive navigation dialog with some neat transitions.
Button Component
Let's start by creating the button component:
Both <template> and <script> tags are pretty straightforward, just note the @click on the <div> and the action() method. Through those two parts of the code, we pass the responsibility of implementing the action for the button click to the component using it.
On the <style> tag, we add the classes necessary to shape our button. We could create props for specific properties, such as color, background-color, width, and height, but for the purpose of this article, we will skip this step.
DialogItem Component
Our next step is to create a DialogItem, which will provide the icons the user needs to navigate, open another modal, etc.
</style>
In the <script> tag, we have some props for the implementing component to customize our icons, passing them through inline dynamic style:
- iconSize: fontawesome icon’s font-size;
- itemSize: component’s width and height;
- iconOnly: value to indicate if we want only the icon to be displayed;
- animationDelay: value in seconds for the animation’s start delay.
- show: value to indicate rendering of a specific class to hide/show our component.
In the <style> tag, we can build our transition to animate the dialog opening using the transform property, scaling the component from 0 to 1 in 0.5s with transition.
There are two other properties to point out: z-index and pointer-events.
- z-index: Puts our component in front of others with a lower z-index value. The default is 1.
- pointer-events: Makes our component clickable. It is the default behavior, but we are explicitly putting it here because we will use a different value in the component implementing the DialogItem.
Backdrop Component
Now we need to create a Backdrop component in order to have an opaque background to prevent the user from clicking anything but the dialog.This component is also pretty straightforward, with only one important point: the change from opacity and z-index when the show class is added to the root element, “rendering” it on the screen.
Dialog Component
With our DialogItem and Backdrop done, we need to implement the navigation dialog itself in the Dialog component:In this component’s <script>, we only have two properties:
- dialogIcons: array of DialogIcon containing the name and icon values;
- show: value to indicate rendering of a specific class to hide/show our component.
In the <style> tag, we implement the direction of the dialog icons with display: flex and flex-flow: column, and we keep them evenly spaced with justify-content: space-evenly. One important thing to notice is that we do not remove the component from the dom or change its display to none when it is hidden; we simply put its opacity to 0 and its z-index to -1, making it invisible and unclickable. We do that because if we took one of the other approaches, the transition would not be shown.
To wrap up this component, we add a @include through a mixins.scss file created with media queries to change the direction of the icons when the screen is small, using flex-flow: row.
Layout Component
To illustrate the usage of the component, we build a simple Layout component to implement our dialog and button.
And with these final steps, we have finished implementing our custom Navigation Dialog component. We still have to implement the routing logic, but the structure is all set and done.
Conclusion
There are a lot of ways to implement the same behavior we created here, and I welcome you to share yours with us. Also, if you have any questions or suggestions, please feel free to leave a comment!
Reference
The complete code for this component may be found here.
