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

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.

Routing and Components

Routes are basically URLs that you can define on your Vue.js application. And they route to or link to specific components. So when you click a link Vue will instantly hide current component and show you a new one without page reload. Pretty cool stuff.

In this video we are going to make two components and setup our vue router, and then I'm going to show you how you can link to those components using almost basic links.

### Links in the video

[Vue Router](https://github.com/vuejs/vue-router)

In this Vue.js tutorial I'm going to show you how to setup routes for your Vue.js application.

Tutorials tagged with: vue route

Get in touch