In this first episode of Vue 2 and October CMS Todo App series we are going to set up our development environment.

First we'll install a fresh copy of October CMS, and then in the same folder I'm going to show you how to very easily setup Vue.js 2.0 with Webpack and scaffold our application with Vue CLI.

As you will see this is all very easy stuff.

In this series we are going to create a todo app using October CMS as backend and Vue.js 2 as frontend of our App.

Setup

Right now our single-page application looks ok. But we can make it better by providing user with some feedback when he/she clicks on something. As you probably noticed there is a slight delay when loading our data. So we want to give user feedback that something is actually loading and not make him look at the blank page.

This is where the vue transitions come in. You can set starting and ending points for your transitions and even make cool animations for better user experience.

In this episode of Drupal 8 and Vue.js tutorials I'm going to show you how you can make transitions between your components for better user experience.

Vue Transitions

Since I didn't find any real way to register a user to our Drupal 8 site we are going to be using a little different approach that will have the same results.

So instead of registering a user in traditional sense we are going to create a user. This will be very similar to creating a movie.

I'm also going to show you how to handle success and error messages once the user inputs his/hers data. Because Drupal won't allow you to have a user with the same address etc.

**REST UI LINK** : <https://www.drupal.org/project/restui>

In this episode of Drupal 8 and Vue.js tutorials we are going to create a way for our users to register on our Drupal 8 site.

Register a User on Drupal 8

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.

Creating Movie With Vue.js

In the last two episodes we learned about [Vue components](http://watch-learn.com/video-tutorials/one-page-app-with-drupal-8-and-vue-js-part-07-vue-components/) and [Vue routing](http://watch-learn.com/video-tutorials/one-page-app-with-drupal-8-and-vue-js-part-08-vue-routing/). And now we are ready to put all that knowledge together and make our single-page application behave the way it's supposed to.

We are basically going to take the two main methods that we created for getting the list of movies and getting the single movie and convert them into components. Then we are going to connect them using Vue routing and routing parameters. As you will see that won't be complicated as it sounds.

In this Vue.js tutorial we are going to connect together Vue routing and Vue components to make our single-page app work the way we want.

Tutorials tagged with: single-page app

Get in touch