My First Time Working With Vue.js
I recently started taking a Udemy course for Vue.js and have learned enough to play around with it a bit. I figured I would share my initial thoughts, and what I’ve learned in just a couple days.
In order to demonstrate what I’ve learned, I’ll be building a very simple app from scratch, then I’ll incorporate Vue.js and talk about each step along the way. This post is meant to be an introduction to Vue.js for anyone out there interested in learning but just wants to check it out before they invest more time and energy. Although, so far I think Vue is awesome, and doesn’t require much learning to get started poking around.
From the first couple of days of learning it, I have found that Vue.js is definitely easy to integrate. Vue can be used to create a whole app, or it can be implemented in just a part of an app. For this post, I’ll be showing how easy Vue can be to integrate into any vanilla JS, HTML, CSS app.
Opening Steps
I started by opening a terminal, and navigating to the folder I wanted to create the project in. Once I was there, I went ahead and created a project folder:
mkdir first-vue-appAfter that, I entered that directory with cd first-vue-app and created 3 different files, a JS file, HTML file, and CSS file:
touch app.js
touch index.html
touch styles.cssNow I am ready to open this app in an editor, and get started!
In The Editor — Boilerplate Steps
As of right now, all 3 files are empty, and I think a good place to start is by typing ! then hitting enter into the index.html file and getting our HTML going, so far here’s our boilerplate code:
Now I will change the <title> and get some connections established here by adding a <link> tag for the styles.css, and add a <script> tag for our app.js file. I will also go ahead and install Vue here with a <script> tag that I copied and pasted from the Vue docs under the installation section. Here is what I am going to start with:
So what have I done so far? Mostly just set up stuff, and connect our files together, just basic web dev stuff; you might have also noticed I added an id to the <body>, this is how we are going to tell Vue which element to mount to (more on that in a bit).
Now that I have installed Vue with the <script> tag on line 8, we can move on to the app.js file, and start doing actual Vue things!
Getting Started With Vue
Once in the empty app.js file, I am going to create a const and I will be setting it to the Vue app itself like so:
const app = Vue.createApp({});
We have a Vue skeleton, but we won’t see anything happen until after a few more steps. The first of which being that we need to mount this “app” to our <body> element. Why? Because this is how Vue works, it mounts to an HTML element and controls the element and everything inside of it.
I believe I’ve heard it a few times that Vue is “declarative”, because you lay out what you want as the end result, and let Vue worry about the steps that get you there. That will make more sense in a bit.
Let’s mount our app:
const app = Vue.createApp({});app.mount('#app-body');
Notice how I used the id we inserted earlier? Now we will be able to control every single element inside of the <body> with Vue.
So what am I trying to accomplish with this app? I just want to demonstrate some basics by showing how to connect variables and functions from the app.js file to the HTML file. I’ll make a simple profile page!
The way we store variables in the Vue object is by adding a key:value pair, which HAS to have a key called data. The value set to data has to be a function which returns an object. That object will hold all of our variables which can be set to any data type.
Let’s take a look at that in action:
const app = Vue.createApp({
data: function() {
return {
name: "Tyler Funk",
age: 28,
hometown: "Kansas City, MO",
hobbies: ["Golf", "Coding", "Video Games"],
avatarImage: "https://www.w3schools.com/howto/img_avatar.png"
}
}
});app.mount('#app-body');
So theoretically we have access to a variable called name, age, hometown, hobbies, and avatarImage. But how do we connect them to our HTML? First, let’s go back to our HTML. I need to add some elements, since we need to lay out what we want the end result to be. Then, I can demonstrate how to use the Vue syntax in the HTML file.
Since I have some info to display, I should probably make some text elements to have somewhere to attach the info. I’ll start there by adding an <h2> for each string or number, and I’ll add an <img> element for the avatarImage, I’ll put them all in a <section> container:
Now that I have laid out the elements I want to display the information in, I need to use a special double curly brace syntax so Vue knows to use the information stored in app.js:
Okay so the double curly braces makes sense, but what is going on with the attribute on the <img> on line 13? Well, you can’t use the variables inside of an HTML attribute without using the special “directive” called v-bind. If v-bind is followed by a colon, and then by an HTML attribute, it is now possible to access variables in the Vue object.
Let’s take a look at where this has gotten me so far:
We can clean that up with some quick CSS:
Which gives us a slightly better looking profile:
Now we have used most of our information, but what about the array of hobbies? I’ll create a function that randomizes which hobby gets shown every time the user refreshes the page. To do that, we need to create a key:value pair with a key of methods, and the value will be an object full of whatever functions we want to create. I’ll first show the set up with an empty function, or “method” named getRandomHobby:
Inside of the methods key, you don’t use the function keyword when creating functions, and in order to add another one I would just have to put a comma following the closing curly brace and then define a new “method”.
Now that I have a function defined, I can implement the logic required to grab a random element from the hobbies array:
And now I can create a new <h2> element which will call the new function/method and will display a random hobby every time the page is loaded (line 17 below):
Here is the effect I was going for:
Conclusion
I have barely scratched the surface with Vue, there is so so much more to learn, but I am already seeing the practicalities of it. I love that you can inject it into any vanilla JS app, and to be honest, it’s not very much code at all, there is barely 60 lines of code across all 3 files. All that interactivity with such little code, and the fact that you only need one <script> tag to install it makes it one of the easiest front end frameworks to start working with right away.
I am a React guy, but Vue is growing on me, and I definitely think it has it’s place in the front end world. I am looking forward to learning, and sharing more about Vue with you.
Thanks for reading if you made it this far, and as always, happy hacking!
