Vue components


The usual Vue components in Nuxt.js are stored in the Components folder. The application is divided into components for ease of development. Reused code can be stored there. For example, not just static pieces of HTML, but full-fledged small modules.

The simplest example of components is the Header and Footer of the site. It makes no sense to duplicate their code inside each page.

But Vue components allow you to take data into yourself, change your work based on them, and also transfer the results to other components. In our simplest application, there is only 2 components: TheHeader (site header) and PageForm. It is customary to use at least 2 words in the name of the component. The components are embedded in the page by their name, for example, TheHeader /gt;.

In order for the component to work, you must first import it at the place of use. Nuxt.js can do this automatically if in nuxt.config.js register components: true. If add Lazy before the component name, then it will connect asynchronously. Naturally, there must be a v-if connection condition. Then the component code will not be loaded on a specific page initially, but when the v-if condition is met, the component will load. This will speed up the initial loading of the page.

Components include html template, scripts and styles. Thus, it becomes an independent element that can be edited in one place without changing the other functionality of the program. The less dependent a component is on other components and other external conditions, the better.

Data can be passed to the component via Props. For example, in our PageForm component we pass the page data and the type of action we want to get. A component is a form that manages the content of a page. That is, using a single component, you can create, edit and delete pages dynamically.

If we pass the "create" action, then the "Create Page" button is displayed. By clicking on it, the createPage method is executed, which sends data from the form to the backend in order to create an entry in the database. If we pass the "update" action, then 2 buttons "Refresh page" and "Delete page" are displayed.

Through Props, we pass the data of the page we want to update to the component with the form. They are inserted into the corresponding fields of the form. In the component itself, you can specify the data type for specific props and their default value. In our case, these pages are an object.

Data from the component can be passed to the parent component via emit. Shared data and states can be stored in Store and localStorage - then they can be received and recorded from anywhere, but in the future this may lead to a complication of the application architecture. Similarly, you can transfer data to a component via provide/inject, but the clarity of such transfer is also not the most optimal.

Author: Aleksandr Dergunov
Published: 3/27/2021