Angular Icon Get 73% off the Angular Master bundle

See the bundle then add to cart and your discount is applied.

0 days
00 hours
00 mins
00 secs

Write JavaScript like a pro. Javascript Icon

Follow the ultimate JavaScript roadmap.

Exploring VueJS: An introduction to VueJS

Welcome to our blog series, Exploring VueJS! In this series, we will have a deep dive into the basic fundamentals of Vue.js, its best practices, and how to build a real Vue app! So, if you’re new to Vue.js and want to learn more in general this is the perfect place to begin!

As the starting point in the series, we will go over the core concepts of Vue.js, and how to set up the environment. By the end of this article, you’ll understand how Vue works, and be prepared to explore the awesomeness in developing with Vue.

Sounds good? Let’s get started!

Vue.js is about view, isn’t it?

Yes and no 😄

Vue or view in English is a reactive, progressive and lightweight component-based JavaScript framework for frontend development. It focuses not only on the view layer but also on scalability and optimisation of developer experience, which often got neglected in other frameworks.

Vue was created in 2013 by Evan You, who was Google developer at that time, and rose to fame with its ease of use and its flexibility rapidly in 2018. At the time of this post, it is considered a real and well-loved contender in the framework/library world.

But why Vue?

Here’s why I love Vue, and a high-level overview for you, and it’ll hopefully answer the question “Why” for you, and this is mainly because of the concepts Vue.js follows. So let’s go through them:

Reactive data-binding

Vue embraces the concept of data-driven, in which the state of the DOM is just a reflection of the data state. Any change in data will trigger the DOM updates automatically. The connection is based on View-Model approach, hence as long as you declare the relationship between your view and data inside a template, Vue will handle the rest.

Composable components

Reusable components are the key for maintaining and handling complex and large applications. In Vue.js, everything is decoupled into components, with pre-defined behaviors. Developers can define, compose and trigger data communication between components. That said, your UI now is actually a tree of components, where components communicate through an API provided by Vue.js. Changes on UI is reduced into changes of specific component(s), with the least effect to the whole app.

Ease of integration

Unlike most frameworks, Vue.js is perfectly capable of being integrated into existing projects as standalone or in combination with other libraries. You can inject a Vue component inside vanilla JavaScript, Angular, or even React projects (though this is not a recommendation for performance efficiency, but it highlights possible migration considerations).

Ease of use

Vue.js syntax APIs are simple and easy to catch up, especially for those who were familiar with AngularJS or jQuery (which most of us were 😅). The documentation is not only well-written, but also kept in the level of human understanding. In addition, Vue.js offers wide ecosystems to help developers in getting their project up and running at ease. And as Evan You put it in his latest update, Vue 3.0 will focus more on optimizing the developer experience.


Vue is currently one of the fastest and smallest framework in size (18-21kB), hence it’s much more performant in downloading and using, which is very important for front end development.

Isn’t it great?! Yes! So how do we start?

Getting yourself ready

  1. First and foremost, because Vue.js is built in JavaScript and designed to work with any JavaScript written framework, basic JavaScript knowledge is a must. Hence make sure you’ve taken our JavaScript Basics course or you know about JS before continuing 😉.

  2. Of course, you should know HTML & CSS, for a better and more beautiful UI.

  3. Have Node.JS npm version 8.9 or above (8.11.0+ recommended) or Yarn yarn installed in your computer (and of course a computer 🙃)

  4. Code editor (Recommend VSCode or Webstorm).

  5. And enthusiasm for being a Vue master 🥋.

Ready? Let’s start.

Angular Directives In-Depth eBook Cover

Free eBook

Directives, simple right? Wrong! On the outside they look simple, but even skilled Angular devs haven’t grasped every concept in this eBook.

  • Green Tick Icon Observables and Async Pipe
  • Green Tick Icon Identity Checking and Performance
  • Green Tick Icon Web Components <ng-template> syntax
  • Green Tick Icon <ng-container> and Observable Composition
  • Green Tick Icon Advanced Rendering Patterns
  • Green Tick Icon Setters and Getters for Styles and Class Bindings

Setting up

As part of being easy to use, Vue.js offers several ways of installing and setting up your Vue project, which is documented comprehensively.

In this series, we will use the vue-cli tool to quickly set up our environment.


Vue CLI - the official tool for Vue.js - is a powerful tool to scaffold Single Page Apps, set up environment and build configuration for different purposes, such as testing, hot-reload, production-ready builds.

All you need is to run the following commands in your terminal:

1. Install vue-cli package

We will install it in global scope (-g),in order to use it to create an app beyond the limit of the current directory

npm install -g @vue/cli
// OR
yarn global add @vue/cli

2. Create a Pokemon app from boilerplate using

vue create pokemon-vue-app

3. Selecting presets


4. For this series, we will select the following:


Tips: You can use vue ui to create and config your app in more friendly graphical interface.

And yes, we will explore different Vue.js topics through building a Pokemon web application. After all, there’s no better way to learn than practice, right? 😉

Now once the creation process is done, our project is created as a separate folder under the app name - pokemon-vue-app. It’s time to get the app up and running.

Up and running

  1. Navigate to the app directory by
cd pokemon-vue-app
  1. Install all the dependencies required for the app to run. Dependencies are different JavaScript frameworks or libraries that our app relies on. And when the installation is completed, we will run the server and get the app displayed in dev environment:
npm install
npm run serve
// OR
yarn install
yarn serve

Your app output should be automatically displayed in browser at localhost:8080, the serving URL will be visible in the terminal as follows:

DONE Compiled successfully in 3704ms

  App running at:
  - Local: http://localhost:8080/

Note: All the commands related to the app are also listed in your package.json under scripts. And, of course, you can add new customized command that fits your needs 🙂:

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",

And that’s it. Our app is up! 🚀

What’s next? Let’s get a hold on the app infrastructure.

Structure in the Vue way

The .vue file format

Vue.js follows the concept of a single-file component. Hence, in addition to the regular .js file system, we also have Vue.js file format as *.vue - to describe a Vue component.

Each *.vue file, or each Vue component, consists of three types of top-level language blocks, using HTML-like syntax:

  1. <template> (Required)
// OK!
    <h1>Hello world!</h1>
    <h2>VueJS App</h2>

// NOT OK!
    <h1>Hello world!</h1>
  <h2>VueJS App</h2>
  1. <script> (Optional)
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  1. <style> (Optional)
// Using Sass CSS preprocessing!
<style lang="scss">
h3 {
  margin: 40px 0 0;
  1. custom blocks (Optional) for documentation for example.

Upon compiling, vue-loader will parse, pipe the blocks and assemble them back into an ES Module (Vue component object).

Note: You can actually separate these blocks into separate files, and import only relevant block section inside *.vue file.


This is our app’s entry file, where we register services, components, routes, and others for global use in our application.

Moreover, it also defines the root element where Vue will render and mount our app to.

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './registerServiceWorker';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)


App.vue contains the definition of our app’s root component, where we also define where in the app to render the view component of a route.


Using vue-router, this is where we define our app routing and navigation logic.


This is the state management file for our app, using vuex


This is where we register our app to browser’s service worker to make our app PWA and have it cache our app’s assets and code.

We use this service worker to enhance performance as well as offline usage. By default, vue-cli already initializes this file for our benefit, so we don’t need to pay too much attention to it.


The location where we will arrange all our reusable components files in.


This folder is where we will store all the relevant components of certain Vue.js routes.


This is mainly to store our public assets like images. However, in this app, we will not need to use this folder at all 🙂.

So far so good? Indeed.


In general, we have explored what Vue is and how to set up our project using vue-cli step-by-step, with explanations on the available preset tools for our application. Furthermore, we also discussed in detail our application’s structure and the file structure of a Vue component.

Since we understand our way around the app as well as the requirements for a Vue component file, what is our next step?

In the next post, we will cover how data-binding and event listeners are done in Vue.js by creating our first component - the Pokemon Card.

Until then, thank you so much for reading, stay tuned and see you in the next post 🚀!

Learn JavaScript the right way.

The most complete guide to learning JavaScript ever built.
Trusted by 82,951 students.

Todd Motto

with Todd Motto

Google Developer Expert icon Google Developer Expert

Related blogs 🚀

Free eBooks:

Angular Directives In-Depth eBook Cover

JavaScript Array Methods eBook Cover

NestJS Build a RESTful CRUD API eBook Cover