Vue 3 Axios

Posted on  by admin
Section’s Engineering Education (EngEd) Program fosters a community of university students in Computer Science related fields of study to research and share topics that are relevant to engineers in the modern technology landscape.

You can find more information and program guidelines in the GitHub repository. If you're currently enrolled in a Computer Science related field of study and are interested in participating in the program, please complete this form.

Vue is a front-end JavaScript framework used to create single-page apps that run on the client-side. It can also be used to create full-stack applications by making HTTP requests to a backend server.

It is popular with Node.js and the Express(MEVN stack). JSON server is an npm package that lets you create mock REST APIs with zero coding.

It is used to create a simple JSON file that can be used as a database and responds to HTTP requests. Axios is the HTTP client that we will use to make HTTP requests to the JSON server.

In this article, we will build a shopping list application. We will start with a blank Vue.js application, then add the JSON server for local data storage, and Axios for making HTTP requests:. To follow along with this tutorial, you are required to have the following:. Node.js installed. Some JavaScript knowledge.

Assuming you have installed Node on your computer, run the following commands in your terminal to install Vue CLI:.


Then run the following command to start the Vue.js application:.

Nikola PavicevicNikola Pavicevic

Inside our shopping-list directory, create a file named data.json:. Let’s add the following data in the file:. We have created a shopping list object containing a list of items together with their IDs.

To use this data in our application, we need to use json-server.

Not the answer you're looking for? Browse other questions tagged vue.jsaxiosvue-componentvuejs3vue-composition-api or ask your own question.