🇪🇸 En español

    Vue is the framework of the moment and has managed to carve out a niche for itself among the powerful Angular and React, which have been in the market longer, by being a light, versatile framework with a shallower learning curve when compared to the competition; one of its main characteristics is that it's very lightweight and easy to use, as well as being progressive, which means that when implementing an entire project, we can decide whether the entire application will use Vue or only a part of it.

    Main features of Vue

    Vue is a framework whose functionalities are available in other frameworks like React or Angular:

•         We have directives that manipulate the data model which are then linked to the document's DOM; and thanks to Vue's reactivity, as reactive data changes, other parts of a component and other components that reference those values update automatically. This is the magic of Vue or of this type of frameworks in general and is one of the reasons why we can create a complete system that might seem complex with relative ease; in other words, Vue takes care of observing the changes we make through forms or events in general and replicating the changes throughout the application, so we don't have to implement such behavior ourselves.    
•        We have the use of props, which allow data to be passed between components.    
•        We have computed properties, which are derived from other properties and are used to perform complex calculations or other component logic; moreover, computed properties are only re-evaluated when one of the dependencies defining the computed property has changed.    
•        We have watchers or watches that allow us to observe changes in reactive data. Reactive data is data that Vue.js observes, and actions are performed automatically when the reactive data changes.    
•        We also have access to popular libraries to extend the framework's base functionality. Vue, unlike other frameworks, does not have a default routing system; instead, we must install a library called Vue Router to handle routing; we also have libraries for state management like Pinia or Vuex.    

    Components in Vue

    Components are the fundamental piece in Vue for building applications. A Vue application consists of multiple components which you can see as Lego pieces that together form our application; components are graphical interface pieces such as listings, headers, forms for creation, updating, etc.

    Vue.js is a progressive framework for building user interfaces, and that's a fundamental difference from other monolithic frameworks. Vue is designed to be used incrementally, which allows including Vue in only a part of the application; these pieces of code used are called components. Components are blocks of code used to define user interface elements; each component is composed of three sections or blocks: Script, Template, and Style:

1.         Script: This block is used to define the component's logic using JavaScript; here, properties, props, as well as methods, hooks, and any other feature supported by the framework are also declared.    
2.        Template: This block is used to define the HTML, that is, the component's structure; the templating syntax provided by Vue.js is also used here to, for example, print variables or similar, conditionals, or loops.    
3.        Style: This block is used to define the application's style for the HTML elements defined in the template section; this style can be specified to be global to the application or only local to the component.    

    Guide to getting started with Vue 3

    Course and Book to master Vue 3