Hello there,
Let’s talk about Vue.js. I know I’ve been delaying this topic for a while, but we can finally tackle some of it. We should probably start with how I learned about Vue.js. One of my group members asked about using Vue.js for the frontend as his work place used it. This was my first time hearing about it. I said sure, I don’t mind learning a new framework. However, I wasn’t really sure what I was getting myself into. I’ve only used react and simple HTML, CSS, and JavaScript for most of my web projects. To be honest, I felt like I didn’t really understand how to use these frameworks.
First thing I learned is that Vue.js is an open source JavaScript framework that is focused on the view layer or the user interface. It’s mainly used for building web applications or single page applications. Great, but how does it work?
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.
To get technical, Vue.js has two great features. Paraphrasing from their website, Vue.js has a template syntax that allows an user to declaratively describe HTML output based on JavaScript state. It also automatically tracks JavaScript state changes and updates the DOM when changes occur. The second feature is pretty amazing and it allows you to do some great things.
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>
Based on the value of submitted, the success or failure line will be rendered. This is called conditional rendering and it has some great applications. It’s pretty easy to use in this context. It’s also possible to have a similar format where things are toggled on or off. The value of submitted will most likely be based on some JavaScript code in the script section.
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.
However, developing projects with Vue.js wasn’t entirely easy. I did struggle with the script sections for most of my components. That probably says more about my JavaScript skills than the actual difficulty though.
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,
Manbir
