json-server vuejs

Oftentimes, when Ive been focused on building out the front end for an application, Ive gotten hung up debugging API issues, changing my mind about the data structure, or slowing down to create necessary data migrations. There must be an easier way to do this, Ive thought.

One of the things I discovered when first introduced to Vue.js was the use of a fake REST API tool called json-server. At first it was like some form of black magic that I had never known existed. I thought to myself, How long has this been around, and how much time could I have saved if I knew about it?

Dont make the same mistake I did. There is an easier way, and in this post Ill demonstrate how to utilize a fake REST API to accelerate your prototyping and development workflow using Vue, axios, and json-server.

Get Started

To get started, install the packages youll need with npm:

# Install Vue CLI tools npm install -g @vue/cli @vue/cli-service-global # Install fake REST API npm install -g json-server # Install HTTP client npm install axios

Add a local database by creating a db.json file with some data. In this case lets add some books:

{ "books": [ { "id": 1, "title": "The Brothers Karamazov", "author": "Fyodor Dostoevsky" }, { "id": 2, "title": "Infinite Jest", "author": "David Foster Wallace" }, { "id": 3, "title": "Suttree", "author": "Cormac McCarthy" } ] }

This provides us some sample data to work with as we build out our Vue component. If you change your mind about your data structure later, its as trivial as updating a json file.

To get your json-server up and running:

json-server --watch db.json

Now, if you visit //localhost:3000/books, you should see the book list json output in your browser.

Create Vue Component

Lets add a Vue component to interact with our fake API.

Create a file named Books.vue which will display a list of books and has a form for adding new books:

// import axios from 'axios'; export default { name: 'app', data[] { return { books: [], title: '', author: '' } }, }

Using Vues rapid prototyping capabilities, we can view a single component in the browser simply by running:

vue serve Books.vue

No further setup is required! Seriously.

For now, we have a form that doesnt submit any data, and our list of books doesnt appear yet. Lets change that by making some axios calls to interact with our fake API.

Get Data from API

To pull the book list into our component well make a GET request, which will fire once our component is created. Uncomment the axios import statement, and add the following after the data:

async created[] { const { data } = await axios.get["//localhost:3000/books"]; this.books = data; },

Post Data to API

You can also make POST requests to this endpoint to add new json records [books] to the file. Add the following after the created hook:

methods: { async addBook[] { const { data } = await axios.post["//localhost:3000/books", { title: this.title, author: this.author }]; this.books = [...this.books, data]; this.title = ''; this.author = ''; } }

After adding some books, you should see them appear below the form in your browser. Open up your db.json file and you can see the new books listed there [with auto-assigned ID values!].

Conclusion

Based on what Ive shown, you can probably guess how PUT and DELETE requests will work so I wont demonstrate those here. If youre curious, there are additional route options such as filtering, pagination, and sorting, which you can read about in the json-server docs

In this post Ive demonstrated a fast and efficient way to prototype a Vue component while avoiding the full setup of a backend API and full-fledged Vue application. This method is perfect for experimenting with an idea on the fly or demo-ing a potential feature to your stakeholders without much up-front time investment. Though just an introduction, hopefully Ive convinced you that Vue, axios, and json-server can greatly speed up your development and prototyping process.