How to consume and display data from a REST API through Vue.js

Consume api rest with Vue.js

Example on how to consume and display data from a REST API through Vue.js, using Axios.js.

Starting 🚀

These instructions will allow you to obtain a copy of the running project on your local machine for development and testing purposes.

Before starting to clone the project, I must tell you that it is already configured by WebPack, so you should not worry.

Pre requirements 📋

First of all, make sure you have all the prerequisites installed:

Download Node.js and npm (npm is distributed along with Node.js, which means that when you download Node.js, npm is automatically installed on your computer)
Git.

After verifying the prerequisites, we can proceed with the installation.

Installation 🔧

Step 1: clone the project

Positioned in the directory, where we want to clone the project, write this command in your terminal

# clone the repository
git clone https://github.com/code4kb/consumir-api-rest-vuejs.git

Step 2: Package installation

After cloning, we access the directory we just created and install all the dependencies of the project. Write this command in your terminal

cd consumir-api-rest-vuejs

npm install

Step 3: After successfully installing the packages, run this command:

npm run serve

Step 4: After executing the above command, the application will run and be available on the local test server:

Server localhost:8080

Step 5: As a result, you should see something similar to this:

Example code

👉 👉 👉 Live! example

How to collaborate in this GitHub repository 🖇️

All proposed ideas, suggestions, fixes, improvements, and comments are welcome. However, please read the CONTRIBUTING.md for details of our code of conduct, and the process to send us pull requests and collaborate.

Built with 🛠️

These are the different tools used in the project

Visual Studio Code - Visual Studio Code by Microsoft, is a code editor redefined and optimized for building and debugging modern web and cloud applications.
Vue.js - Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable.
Node.js y NPM - Node.js, as an asynchronous event-driven JavaScript runtime, Node.js is designed to build scalable network applications.

Download Details:

Author: code4kb

Demo: https://code4kb.github.io/consumir-api-rest-vuejs/

Source Code: https://github.com/code4kb/consumir-api-rest-vuejs

#vuejs #vue #javascript