Guide to authoring open-source Vue.js components

Frameworks facilitate the work of developers, significantly reducing the time needed to create code for a new application or platform. One of the most popular JavaScript frameworks that support the frontend layer is Vue.js which works exceptionally well for lightweight and uncomplicated web projects.

This article will look closely at it and see how it can be used to develop web applications, focusing mainly on creating its components.

What are components?

Look at any website. Following popular standards, it usually has elements such as menus, links, content, buttons, sliders, etc. Each of these elements is a component used on the page. A component can also mean a collection of smaller pieces.

Using the menu example shows the entire components, from a simple link to a complex dropdown and collapsible elements. The whole is formed by the "menu" component and has other specific elements inside. In the case of dropdown, we break one component into even more elements, for example, a link in a dropdown element. The main advantage of breaking components into individual pieces is that we can use them whenever needed on a page.

Components structure

A component consists of three main elements:

• A template is an HTML structure used on a website. It is worth remembering that only one element can wrap the entire component structure.
• A script, that is, any functionality that the component will handle.
• Styles that give our component a visual appeal. The “scoped” attribute allows us to interfere with only one component. This means that if we have more components with the same class on the page, they will not inherit styles from identical classes.

Basic functions and properties of a component

• Props are values or arguments we pass from a parent site to the component we want to create. This allows us to manage content in the component or perform operations based on another component's values. Values passed in props can be static or dynamic.
• Data is a function in the component and can have one or more variables. The scope of these variables is limited to the component. They can be initialized to a value or simply assigned a type. It must be borne in mind that the function needs to return an object with properties.
• Computed is very similar to Data. However, it has many advantages over the above-described function. Most importantly, Computed follows changes within used values. We can return filtered data or calculated values depending on the starting conditions. Computed properties are used for frequently changed values displayed on the page. It also keeps the code more readable.
• Methods define, as the name suggests, all the methods that a component supports. The difference from Computed is that a Method must be called out for the values to be updated. At the same time, in Computed, it happens automatically if only a change on the following variable is detected.
• Mounted is a function executed only once. It’s called out when a component has been rendered on the page, and we already have access to the elements in the DOM.

How to create a new component?

The first step in creating a new component is to add its definition to our script. To do this, we should add a new field: components in the app.js script, inside the object that defines the Vue instance. The components' content is an object whose fields will already be the definitions of the components.

Each field of the components object is also the name of the component being created. The value of such a field is another object. In its simplest form, such an object (which is already the definition of a specific component) has one field: template. The content of this field is a string that defines the HTML code of the constructed component. It can be any amount of nested code, both large and small.

A component prepared this way can be added to the view many times. At this point, we need to remember that the multi-word names of all variables that will go into the view in the literal form are best written with hyphens, not camelCase. That's because they are not case-sensitive in an HTML document and can lead to unpredictable behavior.

The component object has a lot of possibilities. It allows us to add the same options as the main Vue view. There are, of course, a few differences. The most important one is that the data object returns not an object but a function that returns an object. Why does it work this way? Usually, we use created components many times in the view. Many of their "instances" are created, and the scope of objects in their definition is common. Therefore, the data is thrown into a function that creates a separate scope for each version of the component.

Summing up - the business value of Vue

What makes Vue grow so fast, and why do more front-end developers use this technology? First and foremost, it’s all in its simplicity. Since Vue is derived almost directly from Angular (the creator of this framework was an experienced Angular developer), it is very easy to switch to new technology, especially for developers who have already worked in Angular. At the same time, Vue is easier to learn, and the learning curve is relatively short, so the entry threshold has significantly lowered, encouraging many developers to learn a new framework.

Since it is easy for new developers to adapt to Vue, it’s also possible to involve IT specialists from other disciplines in the project. Anyone who has ever been exposed to coding can learn Vue with ease. The magic lies, among other things, in the fact that Vue does not exclude the use of off-the-shelf solutions and components to personalize the application under development, and adapting a template created in Vue will be much faster than learning new technology.

Contact us

At Sunscrapers, we have a team of developers and software engineers with outstanding technical knowledge and experience. We can build your project successfully.

Talk with us about hiring Python and Django developers and work with the best. Sunscrapers can help you make the most out of Python, Django, and other technologies to put your project to the next level.

Contact us at hello@sunscrapers.com

Read more

1. 6 benefits and 3 challenges of Vue.js
2. Vue.js why is it getting so popular?
3. Vue.js and Django - are they sound together?