VueJS Part 1: Intro to VueJS

Over my 10-year-long career, I had a chance to work with many good UI libraries. VueJS is not one of those. That is why recently I decided to learn it, and this post is the first part of the series of notes from my learning. Some of the information might be basic, but it is intended for someone starting with VueJS for the first time. All of this is based on the VueJS version 3.

What is VueJS?

VueJS is a JavaScript framework used for building reactive front-end applications. Being a framework means that it comes with a set of utility functions and guidelines. Those help developers build applications faster, and guidelines help new team members onboard to projects faster. Reactive means that it helps build UIs that are reactive to the user inputs dynamically. And by front-end applications, means we are building part of the application that the user sees and interacts with.

Why VueJS and not vanilla JavaScript?

Building applications in vanilla JavaScript is perfectly fine and you can build complex ones. But that way it might be too slow, and it increases the chance of errors and performance issues. When using a framework like VueJS, you get many functionalities out of the box. Functionality like routing and data binding which you would need to build on your own if you didn’t use any framework. And those functionalities are tested by many developers using it who report any issues with it, and core maintainers make updates to it.

Can you use VueJS in just some parts of the page?

Unlike some other frameworks, VueJS can be used in just part of the page as a widget, or whole. There is no right way, and which way to use depends on your requirements

Alternatives

There are some alternatives you could use as well. Some more popular ones are Angular and React. Both are perfectly good options but also each comes with its benefits and constraints. For example, Angular is pretty much only possible to use with Typescript.

Building the first application

There are multiple ways you could follow to start writing your first VueJS application. One of them is using CLI for generating projects and deciding all the options like using Typescript, JSX, and others during the build time. If you don’t want any of that, the simplest version is just using the CDN.

Building the first application with CDN

1. Setting up the folder structure

You will first need to create files you could use for your projects. So let’s start with the two files, index.html and script.js.

2. Adding some basic HTML content

To start, we can add by adding the next HTML content that will just load VueJS from the CDN.

<!doctype html>
<html>
    <head></head>
    <body>
        <div id="app" />
        <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
        <script src="/script.js"></script>
    </body>
</html>

3. Add application initialisation to script.js

For creating the VueJS application, you could use the following code.

Vue.createApp({
  data() {
    return {}
  }
}).mount("#app")

The createApp function initializes the VueJS application and receives the initialization object as a parameter. After that, you may notice there is the mount function called. This is how you decide to inject the application into the HTML and pass the selector of the application container to it.

4. Adding data to the application

If you want to add some data to the application, you could update the code above, so that you add it to the return object of the data function in the initialization object.

Vue.createApp({
  data() {
    return {
      message: "Hello world"
    }
  }
}).mount("#app")

5. Displaying data in the HTML

To display data in the HTML, you can just use the property name, and wrap it in the two curly bracets. You do need to make sure that content is added inside the container where you load the VueJS application.

<!doctype html>
<html>
    <head></head>
    <body>
        <div id="app">
            <div>{{message}}</div>
        </div>
        <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
        <script src="/script.js"></script>
    </body>
</html>

6. Next steps

There are many more functionalities that you can add to the VueJS applications, but this is just a small intro. And more I will cover in the next post or you can just check the VueJS official documentation.

The code used in this article can be found in my GitHub repository.

For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.