How to start coding VueJS in 60 minutes

How to start coding VueJS in 60 minutes

Table of Contents

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/cli@latest

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.

				
					<script type="wphb-delay-type">
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();
 }
};
</script>

				
			

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>
    <div v-for="artwork in artworks"  v-bind:key="artwork.id">
    <div> {{ artwork.artist_title }}, {{ artwork.style_title }} </div><br>
  </div>
</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 Responses

  1. Pingback: Exceptionly

Leave a Reply

Your email address will not be published. Required fields are marked *

en_USEnglish