To use Vue.js, we just used the following line in the terminal with Visual Studio Code.
npm init vue@latest
It goes through some of the options and will install the required dependencies for you. That was pretty easy. That’s also supposed to be an advantage in that this framework is pretty lightweight (relatively). Vue.js uses a component-based programming model and you can have separate components that make up the user interface. One thing I can say about Vue.js is that it’s really well documented. They have a pretty solid guide on https://vuejs.org/guide/essentials/application.html for what you can do with Vue.js.
As someone who is just getting into Vue.js, it seems like it’s easy to learn how to use it and it doesn’t have a steep learning curve. What I found difficult was learning how to use lifecycle hooks, but it wasn’t too bad. I’m going to tackle some features that I found interesting.
Starting from the beginning, each component generally has a script setup section, a template section where HTML generally goes, another script section, and a style section where CSS goes. For this framework, I think it’s important to mention that having a modular design really helps with making everything a bit easier. So, in the template section, I can do something like:
<template> <div v-if="!submitted"> <h1> Failure </h1> </div> <div v-else> <h1> Success </h1> </div> </template>
Another interesting tool I learned about is PrimeVue. It’s a set of open source components for Vue.js that make some processes easier for the developer. It’s basically a library that helps with building user interfaces. A really great component from this library is DataTable. Using this DataTable, it’s easy to create a table that has pagination, scrolling, and sorting with just a few lines. The below picture has an example of a table I made with it.
It’s easy to learn and the documentation is really detailed. You can install it or learn more about it at https://www.primefaces.org/primevue/setup.
The last thing I want to talk about is the different versions of Vue.js. The latest version is version 3 and that is significantly different from version 2. For example, you can’t use Vuetify to build a table with version 3. That’s why I was looking into alternatives such as PrimeVue. Another quick tip is that having a router can make things easier as you can move and push data from one component to another using $router.push. The router is also a significant component for single page applications.
Thank you for reading till now. That was a small introduction into Vue.js and some of its features. Next time, I think I’ll be talking about how I plan to start my career as a software developer.
I hope you have a great day,