The Best of Vue.js
Vue Js (Now Vue 3) was introduced as a flexible, light alternative to Angular. It took all the features of Angular and built a lighter, more compact version of it.
Vue, first introduced in 2014, by Evan You while working at Google, is a framework that can be used to build single-page applications and web UI. It can also be combined with Electron for the development of both mobile and web applications.
Here are some features of Vue which are interesting for first-time users, especially ones who are integrating it with a laravel project.
Table of Contents
Single File Components
*.vue files are called single file components or SFC. These files have an HTML-like structure which in turn provides components like logic, style, and template in JS, CSS, and HTML respectively, combining all three in a single file to build reusable, organized, and encapsulated code. Building your application in SFC is advisable to tap into the full potential that the features of vue have to offer.
Building smaller and reusable components can help you break down large projects into smaller pieces, which in turn can be extended into the whole project, thereby adhering to the often forgotten cardinal rule of DRY(Don't repeat yourself) of Software engineering. Smaller components also come in handy when testing the entire project and checking on how they work on their own.
Options API and Composition API
Vue components can be written in 2 ways vis-a-vis Options API and Composition API.
Options API -
In this method of using Vue, we define the logic of the component using options as objects. For example, data, mounted, and methods. These options are defined within the default function which in turn points it to the component instance.
This method of API is built around the concept of “component instance” (this), which usually goes with a class-based model for coders coming from OOPs concept coding environment, and because of this, it's more beginner friendly and enforces code organization.
Composition API -
Composition API works on imported API functions that are defined in the component. We use the <script setup> tag to define the API. The setup attribute works as a hint that transforms the Vue compile time, allowing the use of the composition API with less boilerplate code. The imports, top-level functions, and variables that are declared in the script tag can be directly used in the template. It is more free-form and requires an understanding of how reactivity works in Vue to be used effectively. In return, its flexibility enables more powerful patterns for organizing and reusing logic.
Async Components / On-screen loading
Asynchronous components/ lazy loading or on-screen loading components are one of the best performance tweaks offered by Vue. In this approach, the components are added and rendered on demand which will in turn reduce the file size significantly, HTTP call time, and more.
This process of lazy loading can be done locally and globally with both types of APIs; options and composition.
Global Components
As we already know, the components that we build in Vue are reusable i.e when you register a component, you can use it everywhere within the Vue instance.
This significant feature is a result of the use of global components. They are an important part of Vue and can save a lot of time. But there’s a catch. Registering all components globally can lead to the final build size of the project being quite large, resulting in poor SEO performance and a slower page load.
To counter this problem, every section of the application can be divided into sub-parts, and the smaller components are allowed to be used only by particular global parent components.
Vue CLI
Vue CLI is arguably the best tool to get started with Vue and stay on top of the latest updates. It provides a fair deal of dexterity and capabilities to any new Vue JS developer. You can rapidly test your singular components and fully develop a component in isolation, test it, and still access your main project on reloading as it helps in bifurcating the particular component.
You can install Vue globally using the CLI command and a single component can be built that can be shared with anyone.
