Vue + Postman mock server

In this article I would like to show you how easy it is to set up mock server in your Vue application. This is one of the ways how you can set up mock data for web application.

Photo by Clément H on Unsplash

Why mock server? There can be many reasons why you need the mock server. The most common reason for me is that when you starting developing new feature, your backend side probably would not be ready yet. Another reason could be that you just want to test the behaviour of your application with different responses and different http status codes, which can be handy when everything work just fine with your application at that time.

If you don’t have some Vue application you need to install one. There are plenty of tutorials describing this step better that i can do it right now.

If you don’t have postman you can download it from https://www.postman.com/downloads/

First we need to set up our mock server in Postman by clicking on New, then we pick Mock Server from options. In the first step we need to add at least one endpoint that can be changed later.

In second step we just name our mock server.

In third step we can see information about our mock server. The most important is url name on which mock server is running on.

Our /api/items endpoint don’t have any response yet, so we can add some by clicking on Example and then on Default.

In Example Response section we can add response we want to be returned when Vue application call /api/items endpoint. This is still default example, we can add more and switch between them when we want to see different results in our application. We also can add different status codes when we want test how application will be working when some of the responses would returned for example status code 500.

Next we need to change vue.config.js by adding new proxy target under ‘api/items’ key. Target is your Postman Mock Server -that url you created before. You can target only one endpoint or all endpoints if you have response examples for all of them in your mock server. In my example I’m targeting only api/items endpoint.

module.exports = {
  devServer: {
    https: true,
    port: 3000,
    host: 'localhost',
    proxy: {
      'api/items': {
        target: 'https://ddeec074-9101-4f91-a194-4f2a9d7f457.mock.pstmn.io',
        ws: true,
        changeOrigin: true
      },
      'api': {
        target: 'http://localhost:3000',
        ws: true,
        changeOrigin: true
      },
    }
  }
};

This simple solution can provide us with custom response for every endpoint we add.