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
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)
Arabic 
English
4 Responses