Build a Basic CRUD App with Vue.js, Node and MongoDB

Destroy

To delete a word, just change the method to DELETE and press Send. Zap! The word should be gone and your collection should be empty. You can test that this is indeed the case, either using Compass, or by selecting the original request to get all words from the left hand pane in Postman and firing that off again. This time it should return an empty array.

And that’s it. We’re done with our back end. Don’t forget that you can find all of the code for this guide on GitHub, so if something didn’t work as expected, try cloning the repo and running that.

Creating the Vue Front End

Previously we created our back end in a server folder. We’ll create the front-end part of the app in a front-end folder. This separation of concerns means that it would be easier to swap out the front end if we ever decided we wanted to use a framework other than Vue.

Let’s get to it.

Basic Setup

We’ll use Vue CLI to scaffold the project: