In the last few episodes we were actually creating a CRUD (Create Read Update Delete) system for our Vue.js single-page application. We already got CRD letters covered in our application. So we can [view movies](http://watch-learn.com/video-tutorials/one-page-app-with-drupal-8-and-vue-js-part-06-displaying-single-data-item/), [create new movies](http://watch-learn.com/video-tutorials/one-page-app-with-drupal-8-and-vue-js-part-10-creating-movie-with-vue-js/) and [delete movies](http://watch-learn.com/video-tutorials/one-page-app-with-drupal-8-and-vue-js-part-11-delete-movie-with-vue-js/). Now all that is left to do is create a way for us to update a movie. And we are going to do just that in this episode.

To create a movie you have to use all the knowledge from all the other parts of CRUD. We first have to get our movie and display the data from it in our form. Then we have to change that data and update it. As you will see the process of updating is very similar to creating. You just have to use a different request.

### Code used in this video

[Download it here](https://github.com/ivandoric/one-page-app-with-drupal-and-vue/releases/tag/12)

In this tutorial we are going to finish our CRUD system with Drupal 8 and Vue.js. The last thing we need to do is make an update system.

Update Movie With Vue.js

In the [last episode](http://watch-learn.com/video-tutorials/one-page-app-with-drupal-8-and-vue-js-part-10-creating-movie-with-vue-js/) we learned how to create data using Drupal REST API and Vue.js as our frontend. I think it is only logical for me to show you how you can delete those items using the same methods.

As you will see the process is very similar to creating something on you REST API, you just have to access a different end point (in our case node of the movie). To do that you would just pass the node id to the end point URL which we already did in [this episode](http://watch-learn.com/video-tutorials/one-page-app-with-drupal-8-and-vue-js-part-06-displaying-single-data-item/).

In this tutorial I'm going to show you how to delete an item using Drupal 8 REST API and Vue.js.

Delete Movie With Vue.js

As you can imagine creating a new Drupal node via REST API is not as easy as getting the list of nodes or one node. Mostly because to create a new node via REST API you need to take care of Drupal authorization first. You don't want unauthorized users to add content to your site as they please.

But as you will see, if you are using Vue.js and its resource plugin to make your requests to the Drupals API creating a new node via REST is very easy if you know what you are doing.

In this episode we are going to create a form that will let us enter title and body of our movie node. Then we are going to `post` the data that we get from that form to Drupal and create a new movie node.

I'm also going to show you how to inform a user of successful `post` request to the Drupl 8 REST API.

In this tutorial you will learn how to connect to the Drupal 8 REST API and create a new movie node using Vue.js and Vue resource plugin.

Tutorials tagged with: CRUD

Get in touch