We are going to start by creating a simple dynamic route that is going to fetch our singular data by `id`. After that I'm going to show you how you can fetch your data by using `slug`instead of `id` so that your singular data has pretty URLs. And lastly we are going to create a bit more complicated routes that is going to include categorisation of our routes. 

As you will see this is all pretty easy to do with our Strapi, Next and React stack.

In this episode I'm going to show you how to create simple and then more advanced dynamic routes for your Next.js and Strapi application.

Dynamic routes

We will actually cover a lot of stuff in this episode. First of all I'm going to show you how to create normal and nested routes (however we are not going to learn about dynamic routes in this episode). Then I will show you how to use Nexts `<Link />` component. Then we are going to create our own Navigation component that will link our site together and also how to make those links give visual feedback to the user, so that the user knows on which page he or she is currently on.

This Navigation is going to be hard coded, which is not ideal, so we are going to create that navigation in Strapi, and make it dynamic so that we don't have to hard code it, cool.

Also you are going to learn the difference between `getInitialProps()` and `getServerSideProps` and how to correctly get environment variables with `getConfig()`.

In this episode we are going to talk about Next.js Routing, Nested Routes, Link component and we are also going to create a dynamic Navigation for our Next site.

Static Routes, Nested Routes,  And Navigation

Some of you have been asking me to continue this series, and I replied to you that we covered everything there is about Sage, of course, I was wrong. I forgot about this JavaScript DOM based routing thing. And one of you has reminded me of that, so thank you very much kind stranger :) .

So, anyway, that is what we are going to be covering in this episode.

In this episode we are going to cover JavaScript routing that comes with Sage for WordPress.

JavaScript DOM-based Routing

Routing in Nuxt is a bit different than something you would get with Vue CLI, because in Nuxt you don't actually define the routes, but the routes are generated for you automatically based on your pages folder structure, and that is what we are going to be doing in this episode.

Also we are going to start building our Vue and Nuxt site by creating a header which is going to be available through out of our site using the layout files.

In this episode we are going to start building our Nuxt site, and also take a look at the basic Nuxt routing.

Basic Routing

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.

Tutorials tagged with: routing

Get in touch