Introduction - Why Vue When React Exists?

Time for a quick sales pitch. Have you ever pondered why it is that front end developers gush over ReactJS? The answer is obvious - it’s portable, reusable, highly modular, and comes with fantastic built-in complex functionality support to boot.

However, ReactJS is rather cumbersome to learn if you are not already learned in JavaScript. Let’s not even mention the downright confusing official documentation, either. That has already been covered by plenty of blog posters on the internet already…

That is not to say that there are not plenty of tutorials on YouTube and blogposts around the globe detailing everything there is to know, because there certainly are. Yet if you want to dive right into a framework, I can honestly say that having tried both myself, VueJS is the easier one to pick up and start creating things with.

Vue’s official documentation (keep in mind this is the link to V3 not V2) is far easier to learn from than React’s. Many people will tell you that Vue is good for sites that are simple in nature and that it is difficult to develop complex functionality in comparison to React, but I would say that if you are trying to pick up a framework for the first time right after having learned a little basic JS and HTML, Vue is far and away the better choice to get used to the concept and functionality of frameworks.

(Note: I still say this even though all my previous blog posts were about implementing my ReactJS project into a CI/CD pipeline!)

A Discussion of Vue View Functionality

Let’s say you want to build a single page application (SPA). Vue has a feature called views that work with Vue’s router module, which can be easily installed using the vue add router command even after you already created your vue application using vue create appnamehere and all dependencies will be installed automatically for you. Vue even tries to convert your existing code into router-compatible code if you were loading everything manually before. Also, when installing Vue Router manually to your pre-existing project, the CLI asks if you want to use history mode, and since V3 projects come pre-packaged with (This can actually be annoying if your code is very specific, but I digress. At least they try!)

If you wanted to do the same process in React, the process is much more cumbersome. Trying to add libraries and scripts after a project has already been created is a nightmare of dependency troubleshooting. Vue immensely simplifies this process.

Let’s take a look at what a Vue project I am currently working on that uses Vue Router looks like.

Now I know what caught your eye first, and let me explain before you get too bothered by it (yes it bothers me too…)

I know that router-view/ is highlighted in red. I believe that is because my VS Code has a linter installed that does not like that this element is located within the template’s root. Nevertheless, it must be there in order for the router to pick up that views are being used in the src/views directory.

Take note of these three directories I have open on the left under COMP484-DISNEYAPIPROJECT: src/router/index.js, src/views (and all of the .vue files), and src/App.vue. These three components are essential to making our Vue views function as intended.

Explaining Views

Let’s not beat around the bush here - your App.vue file is your entire application. No, really it is! Using the router-link elements in the navbar enables us to reference the code located within src/router/index.js which contains our Vue Router functionality. Treat these as you would any anchor element, As you can see,after the closing tags of the router-link elements, I added the horizontal slash character to break up the menu bar. I will demonstrate what this looks like at the very end when I show how I styled the menu bar using CSS. First, let’s look at router’s index.js file.

You likely will notice a few familiar functions at the very top of htis page - the import statements. Each page we want to be loaded by Vue needs to be imported at the top of index.js within the router directory of your project if you want your App.vue’s router-links to function properly. So, we move one directory up in the from selector statement with ../ and go into the views folder and individually select each page we want to be handled by Vue Router.

In the constant array called routes we must also insert the routes we defined in the import statements an array, as seen above. Make sure your component definition matches your import statements! For the most part, try to make everything consistent. Also, note how I do not use just one word for any of the Vue view names. Instead I used HomePage, CharactesPage, etc… That is because V3 comes pre-installed (unless you disable / custom-install it) a linter that will scream bloody murder if you do not use two-word names for all of your components. There is a reason to this madness, I swear.

Now let’s take a look at one of the vue views pages, HomePage.vue.

Right now it is extremely basic, sure. There are however some things that I think do warrant discussion. I want you tro focus on the fact that within our template here, we have the template tag and some basic HTML code in the header. Any time one of the navigation buttons is clicked on our website, these templates are loaded with the configurations each has applied to it. Global CSS is applied to the App.vue page residing within the src folder itself, and scoped CSS, such as we see here, is applied within the view itself. As you can see by the comment, adding the scoped attribute inside the style tag ensures that the scope of the styles being applied is limited to just the HomePage.vue view. Although there are admittedly no elements in our HTML on this view that utilize this scoped styling, it is nonetheless good to know that you have this freedom when designing your views. (sidenote: if you pre-defined a message, you can insert it on the homepage when it is loaded using the JS export default script seen there).

Vue views are extremely dynamic. You can apply scoped styles to them individually, global styles to them in App.vue, run JavaScript code locally on the HTML within the HTML directly instead of having to create a separate JS file to do that for you if you were developing a website using pure JS, CSS and HTML… There’s a lot going on for Vue that makes it simple and yet still fast to use.

Let’s take a quick look at the front-end design of my website in its current skeletal form.

This is the Home page. Because the home page is the first view to be imported within router/index.js, it is loaded first by the router. Behind the scenes, instead of contacting a server to swap pages (this would normally be the process if you made multi-page applications using plain JS, CSS and HTML), Vue uses its router to halt any requests to reach the server and instead loads the view for any page selected automatically, since Vue projects handle all their code on their own. Once your app gets bigger and more complex, you will need this speed. Loading pages through a server is far, FAR slower using a server-loaded approach. With Vue’s built-in router functionality, this process is much faster and efficient. Plus, you get the added benefit of not having to swap too many files to add additional JS or import scripts (you could still do this, but only if you needed to! Most JS and HTML can be written on a view-by-view basis).

Conclusion

So, you’ve seen it all, right? Well, not really. This is extremely basic, but still, I hope I was able to pull the curtains of possibility back a little bit for you if you are new to frameworks like I am. Being able to more easily view the code you write and manage it in an efficient manner is a huge benefit to front-end developers, and being able to learn these tools QUICKLY with well-written documentation is even more important. Having resources to develop your application the way you want to is ultimately what I am trying to show you, and hopefully you can take this knowledge of SPAs and do great things with it one day.

Happy Front End Developing! :) See you next time!

PS: This may be the last post for a while - I am graduating and am about to start my career off training to be a DevOps engineer at AWS! It has been a pleasure making these blog posts for you, dear reader. I truly hope that I was able to help even one or two people with just one of my blogs. I know writing these helped me look back on the work I have done throughout my final year in college and remember quite a few crucial details of the process involved in my education. So, until next time! Please live happy and healthy :D