Loading Test Data in a Vue Dev build.

When you have built a website, you would want to load test data in your website to see its performance. Test data can be anything, but generally its like list of names, phone numbers, posts etc. It could be something complex too, like imagine empty Facebook site and then you load up test data in there. You may have person’s names but also their likes, posts, friends list etc.

So, when you have user-generated content site, the data is sent to a database for storage and retrieved by your frontend to be displayed on your browser. But in a development build you don not have data and you cant see what site would look like with user posts. You can create your randomized data and store it as JSON file.

So in Vue a Function makes a request to fetch data and then passes it to another functions who display the data according to the syntax. Fetching your locally stored data is simple as passing your argument in function parameter. Just make sure your paths and references are valid, just keep trying different methods.

This probably is not the best method but it works! A further step can be done to load test data when needed by developer else it should the real data, but that is for semi-production build.