How to start coding VueJS in 60 minutes

How to start coding VueJS in 60 minutes

VueJS is an open-source Javascript framework for building single-page user interfaces.

Evan You – the author of VueJS, decided to implement VueJS when working for Google and using AngularJS for several projects. So he dropped the bad parts of AngularJS and extracted the parts he likes to form his new fancy framework VueJS.

As a backend-focused software engineer who challenged many JS frameworks and libraries such as BackboneJS, KnockoutJS, AngularJS, and ReactJS, I find the Vue as the easiest one to implement something with. You do not have to have broad Javascript knowledge to create an application in minutes with VueJS. But of course, “easy to implement ” is not the only argument we are looking for, so let’s check other core features at a high level.

  • Lightweight, 
  • Simple and readable
  • Virtual DOM rendering
  • Two-way data binding
  • Component support

An Interactive VueJS Project 

This tutorial aims to practice VueJS-3 with Axios at the beginner level. 

For building large-scale Vue applications, you need to install node.js on your machine.

How to install Vue

To install the latest stable version of Vue, run the below command on the terminal;

$ npm install -g @vue/[email protected]
added 1 package, and audited 2 packages in 653ms
found 0 vulnerabilities

Troubleshooting: if you get a similar error as below, which mentions that the package.json is not found, you probably have a package-lock.json file under your user. Just delete it and try again.

npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path /Users/<your_user>/package.json
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open '/Users/<your_user>/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 

How to create a project with Vue

You can spawn up a project in minutes with Vue. Run the below command to initiate an application.

$ vue create my-first-vue-app
> Default (Vue 3) ([Vue 3] babel, eslint) 
🎉  Successfully created project my-first-vue-app.
👉  Get started with the following commands:
 $ cd my-first-vue-app
 $ npm run serve

Fire your very first Vue application with the “ npm run serve” command in the project directory.

$ cd my-first-vue-app
$ npm run serve
 DONE  Compiled successfully in 2183ms                                
  App running at:
  - Local:   http://localhost:8080/ 
  Note that the development build is not optimized.
  To create a production build, run npm run build.

Now we have a user interface that is running on localhost:8080. It is time to enrich this UI with some dynamic features.

Using Axios to consume Data from an API

Axios is an HTTP client for interacting with APIs. I will show how to fetch data with REST API from a public source and display it in the next steps.

Axios Installation

npm install --save axios vue-axios

Import and use Axios in src/main.js file in the my-first-vue-app application, update the code;

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
const app = createApp(App)
app.use(VueAxios, axios)
app.mount('#app')

Making an API request with Axios

I will be using the  Art Institute of Chicago API to fetch artwork data in JSON formatted and display it in an iteration.

Create a function to fetch artworks from Art Institute of Chicago API with Axios. We will place this code in the HelloWorld.vue component. The created lifecycle hook will trigger the getArtWorks() method, and the component will expose the artworks in the data block.

export default {
 data() {
   return {
     artworks: [],
   };
 },
 methods: {
   async getArtWorks() {
     try {
       const response = await this.$http.get(
         "https://api.artic.edu/api/v1/artworks?page=1&limit=50"
       );
       this.artworks = response.data.data;
     } catch (error) {
       console.log(error);
     }
   },
 },
created() {
   this.getArtWorks();
 }
};

We fetched the artworks in a function and exposed them in a data block, but we did not use this anywhere; no binding yet! So let’s loop artworks and display the artists and their styles. 

Delete everything in HelloWorld.vue component template and place the below code block there.

<template>
     {{ artwork.artist_title }}, {{ artwork.style_title }} 
</template>

Enjoy the extensive collections of 19th-century French painting and 20th-century sculpture from http://localhost:8080/  🥳  🥳  🥳 

Juan Sánchez Cotán, Renaissance
William Morris, Arts and Crafts Movement
John Henry Dearle, 19th century
Tanaka Ryohei, Japanese (culture or style)

Enjoyed starting coding in 60 minutes and want to challenge other libraries & frameworks? Feel free to check out my other posts Start Coding React in 60 minutes, Start Coding JavaScript in 60 minutes, Start Coding Java in 60 minutes, or Start Coding Python in 60 minutes!

4 thoughts on "How to start coding VueJS in 60 minutes"

  1. Pingback: Exceptionly

Leave a Reply

Your email address will not be published.

#

“Exceptionly was such a fast and efficient process. Complete game changer for hiring remote.”

Liam Martin
Co-Founder at TimeDoctor

#

“Great service, outstanding speed, stunning quality.”

Andy Tryba
CEO at Gigster

Is Exceptionly an outsourcing business?

No. We encourage our clients to do direct hires. We provide payroll consultancy and services in a 100% transparent way if our clients are new to remote hiring.

Is Exceptionly a database of candidates?

Not really, data is only a small part of our business. While we own over 2 million publicly available software engineer data evaluated, our power lies in hands-on testing and engineer-to-engineer technical interviews.

Is Exceptionly expensive?

Exceptionly is more cost-efficient than any other serious competitor who owns a decent technical testing funnel. If you compare Exceptionly with HR agencies who only do resume screening before endorsement, yes, it is expensive.

Who is the founder of Exceptionly?

Sinan Ata is the founder of Exceptionly, who previously built two global technical talent acquisition enginess and tested over 2.5 million software engineers in his career.

Still have questions? Contact us.

Ready to meet top-notch engineers?

Let's get your talent pipelines up and running!

HIRE WITH EXCEPTIONLY

No hidden fees.